图片无缝滚动(缓冲，一停一顿效果)，可左右翻滚控制

作者：我就是个世界发表于：2010-04-21

图片无缝滚动JS特效　(缓冲，一停一顿效果)，并可左右翻滚控制

效果预览：
[img]http://ghost.cmsdream.com/attachments/200810/4665057891.jpg[/img]
[url=http://ghost.cmsdream.com/samples/scroll/index.html]效果预览[/url]
代码下载：[url=http://ghost.cmsdream.com/samples/scroll/scroll.rar]点击下载[/url]

样式表代码（scroll.css）：
[separator]
[code]
* {margin:0;padding:0;}
body {width:370px;}
a {text-decoration:none;color:#000;}
a:hover {text-decoration:underline;color:#f00;}
ul,li {float:left;width:100%;list-style-type:none;}
h3,h3 a {font-size:12px;font-weight:normal;font-family:"宋体",Verdana;}

.bc {height:90px;clear:both;overflow:hidden;padding:3px 15px 0 15px;}
.bc a.scroll {width:12px;height:46px;overflow:hidden;text-indent:-100px;margin-top:5px;background:#333;}
.bc a.s1 {float:left;}
.bc a.s2 {float:rightright;}

#scroll1 {padding:5px 8px 7px 8px;}
.bc div.scroll {float:left;position:relative;width:318px;left:6px;overflow:hidden;}

div.scroll ul {width:8000%;}
div.scroll ul li {width:106px;padding:0 0 2px 0;text-align:center;}
div.scroll ul li img {clear:both;width:90px;height:60px;border:1px solid #ccc;margin:0 auto;}
div.scroll ul li h3 {height:20px;line-height:20px;overflow:hidden;}
div.scroll ul li h3,div.scroll ul li h3 a {color:#c00;font-family:"宋体";}
[/code]

效果JS代码（scroll.js）：

[code]
function scroll_initialize(Id){
    var self    =this;
    var obj     = document.getElementById(Id);
    if(obj.getElementsByTagName('li').length==0)return;
    var links   = obj.getElementsByTagName('a');
    var a       = links[0];
    var b       = links[links.length-1];
    var ul      = obj.getElementsByTagName('ul')[0];
    var div     = obj.getElementsByTagName('div')[0];

    var li_width    = obj.getElementsByTagName('li')[0].offsetWidth;
    var li_count    = obj.getElementsByTagName('li').length;
    var ul_width    = li_width * li_count;

    this.speed      = 2000;
    this.mar        = null;

    this.doSlide = function(n,t,d,c){
        var timers=new Array(n);
        var x=div.scrollLeft;
        for(var i=0;i<n;i++)(function(){
            if(timers[i]) clearTimeout(timers[i]);
            var j=i;
            timers[i]=setTimeout(function(){
                if(d==0){
                    if(ul_width-div.scrollLeft<=0){
                        div.scrollLeft-=ul_width;
                    }else{
                        div.scrollLeft=x+Math.round((c*li_width)*Math.sin(Math.PI*(j+1)/(2*n)));
                    }
                }else{
                    if(div.scrollLeft<=0){
                    }else{
                        div.scrollLeft=x-Math.round((c*li_width)*Math.sin(Math.PI*(j+1)/(2*n)));
                    }
                }
            },(i+1)*t);
        })();

        if(ul_width-div.scrollLeft<=0 || (div.scrollLeft % li_width != 0 && div.scrollLeft != 0)){
            div.scrollLeft=0;
        }
    }
    this.istop=function(){
        clearInterval(self.mar);
    };
    this.istart=function(){
        self.mar = setInterval(function(){self.doSlide(20,40,0,1);},self.speed);
    };

    this.initialize = function(){
        ul.innerHTML+=ul.innerHTML;
        ul.style.width = parseInt(ul_width * 2) + 'px';
        a.onclick=function(e){self.doSlide(20,40,0,3);return false;};
        a.onfocus=function(){this.blur();};
        a.onmouseout=function(){self.istart();};
        a.onmouseover=function(){self.istop();};
        b.onclick=function(e){self.doSlide(20,40,1,3);return false;};
        b.onfocus=function(){this.blur();};
        b.onmouseout=function(){self.istart();};
        b.onmouseover=function(){self.istop();};
        div.onmouseout=function(){self.istart();};
        div.onmouseover=function(){self.istop();};
        this.istart();
    };

    this.initialize();
}
[/code]

页面HTML代码(scroll.html)：

[code]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>doc1</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<link href="scroll.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="scroll.js"></script>
</head>

<body>
<div class="bc" id="scroll1">
    <a href="#left" class="scroll s1" title="向左滚动">向左滚动</a>
    <div class="scroll">
        <ul>
            <li>
                <a href="#"><img src="http://image2.7com/res/h000/h69/img2008091116271jpg" /></a>
                <h3><a href="#">魔幻《天地OL》</a></h3>
            </li>
            <li>
                <a href="#"><img src="http://image2.7com/res/h000/h68/img2008090916013jpg" /></a>
                <h3><a href="#">《名将三国》</a></h3>
            </li>
            <li>
                <a href="#"><img src="http://image2.7com/res/h000/h67/img2008090516554jpg" /></a>
                <h3><a href="#">变型金刚OL</a></h3>
            </li>
            <li>
                <a href="#"><img src="http://image2.7com/res/h000/h67/img2008090516533jpg" /></a>
                <h3><a href="#">盛大《八门OL》</a></h3>
            </li>
            <li>
                <a href="#"><img src="http://image2.7com/res/h000/h67/img2008090516504jpg" /></a>
                <h3><a href="#">回合制《穿越OL》</a></h3>
            </li>
            <li>
                <a href="#"><img src="http://image2.7com/res/h000/h69/img2008091116330jpg" /></a>
                <h3><a href="#">卡通网页游戏乐土</a></h3>
            </li>
        </ul>
    </div>
    <a href="#right" class="scroll s2" title="向右滚动">向右滚动</a>
</div>
</body>
</html>
[/code]

请发表您的评论