简单的左右无缝滚动.

分类: Javascript   发布于: 2012.10.24, 21:09, by  usual  查看:6,390   |   评论: 发表留言

简单的左右无缝滚动,demo,能鼠标控制左右滚动.

主要通过改变scrollLeft值来实现.没什么技术含量.做个备份.

HTML结构如下:

<div id="scroll">
   <div id="left"></div>
   <div id="wrap">
       <div class="wrap1">
           <div id="s1">
               <img src="images/1.jpg" alt="" width="200"/>
               <img src="images/2.jpg" alt="" width="200"/>
               <img src="images/3.jpg" alt="" width="200"/>
               <img src="images/4.jpg" alt="" width="200"/>
               <img src="images/5.jpg" alt="" width="200"/>
               <img src="images/6.jpg" alt="" width="200"/>
           </div>
           <div id="s2"></div>
       </div>
   </div>
   <div id="right"></div>
</div>

CSS如下:

body,div{margin:0; padding:0;}
img{border:0 none;}
#scroll{width:830px; margin:50px auto; border:1px solid #ccc; padding:20px 50px; position:relative; border-radius:5px; box-shadow:0 0 10px #999;}
#wrap{width:830px; overflow:hidden;}
.wrap1{width:5000px;}
#wrap img{float:left; margin-right:10px; border-radius:5px; }
#s1,#s2{float:left;}
#left,#right{position:absolute; width:20px; height:80px; top:50%; margin-top:-40px; background:#ccc; cursor:pointer;}
#left:before,#left:after,#right:before,#right:after{position:absolute;width:0; height:0; content: “”; }
#left:before{border-color:#fff #ccc #ccc #fff; border-width:20px 10px; border-style:solid; }
#left:after{border-color:#ccc #ccc #fff #fff; border-width:20px 10px; border-style:solid; bottom:0;}
#right:before{border-color:#fff #fff #ccc #ccc; border-width:20px 10px; border-style:solid; }
#right:after{border-color:#ccc #fff #fff #ccc; border-width:20px 10px; border-style:solid; bottom:0;}
#left{left:15px;}
#right{right:15px;}

JS:

$("wrap").scrollLeft=0;
function $(id){
   return document.getElementById(id);
}
$("s2").innerHTML=$("s1").innerHTML;
var moveTime=autoPlay=null;
var _width=$("s1").children[0].offsetWidth+10;
var len=$("s1").children.length;
var start=0;
var lock=false;
function startMove(direction){    
   if(lock)return;    
   lock=true;    
   if(direction=="left"){                    
       if($("wrap").scrollLeft==0){
           $("wrap").scrollLeft=$("s2").offsetWidth;
           start=len;
       }
       start;        
       moving(_width*start);
       if(start<0){
           start=len
       }        
   }
   if(direction=="right"){
       if($("wrap").scrollLeft>=$("s2").offsetWidth){
           $("wrap").scrollLeft=0;
       }
       start++;
       moving(_width*start);
       if(start==len){
           start=0
       }
   }
   
}
function moving(distance){
   clearInterval(moveTime);        
   moveTime=setInterval(function(){
       var speed=(distance-$("wrap").scrollLeft)/4;
       speed=speed>0?Math.ceil(speed):Math.floor(speed);
       $("wrap").scrollLeft==distance?(clearInterval(moveTime),lock=false):$("wrap").scrollLeft=$("wrap").scrollLeft+speed;
   },30);
}

$("left").onclick=function(){
   startMove("left")
}
$("right").onclick=function(){
   startMove("right")
}
autoPlay=setInterval(function(){
    startMove("right")
},2000);
$("scroll").onmouseover=function(){
   clearInterval(autoPlay);
}
$("scroll").onmouseout=function(){
   autoPlay=setInterval(function(){
        startMove("right")
    },2000);
}