jq图片左右无缝切换滚动，有定时切换。

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="http://code.jquery.com/jquery.js"></script>
<style>
body,ul,li{ margin:0; padding:0;}
.divbox{ width: 1000px; margin:0 auto; position: relative;}
.div_a{ width: 440px;border:1px solid #eee; margin:0 auto; position: relative; height: 100px; overflow: hidden;}
.div_a ul{ overflow:hidden; position: absolute; height: 100px;}
.div_a li{ width:110px; float:left; list-style:none; text-align:center;}
.div_a li span{ margin:0 auto;}
.pos{position: absolute;}
.next{ position: absolute; right: 0; height: 50px; top: 0; width: 50px; display: block; background: #000;}
.prev{ position: absolute; left: 0; height: 50px; top: 0; width: 50px; display: block; background: #000;}
</style>
<script language="javascript">
$(function(){
var ii=0;
var obj=$("#fuck")
obj.find("li").clone().appendTo("#stra");//克隆一份
var length=obj.find("li").length;
var width=obj.find("li").width();
var str=length*width;
obj.width(str);
var step=0 //定义动画值，初始值为0,0表示动画可以执行，1表示动画正在执行，不能点击
var timo=setInterval(zdgd,3000); //3秒执行zdgd方法

var dbox=function(){
   step=0;
   if(ii==length/2){
               obj.css({"left":0})
               ii=0;
            }else if(ii==-length/2){
               obj.css({"left":0})
               ii=0;
            }
}

function zdgd(){
ii++
if(ii==length/2+1){
          ii=1;
     }else if(ii==1){
        obj.css({"marginLeft":-str/2,"marginRight":0})
     }
        obj.animate({
            left:width*ii
        },dbox)
}

function zgd(ii){
        obj.animate({
            left:width*ii
        },dbox)
}

$(".prev,.next,.pos").hover(function(){ //鼠标移上去停止动画，移开执行
clearInterval(timo)
},function(){
timo=setInterval(zdgd,3000);
})

$(".prev").on("click",function(){
if(step==0){
     ii++
     if(ii==length/2+1){
          ii=1;
     }else if(ii==1){
        obj.css({"marginLeft":-str/2,"marginRight":0})
     }
     step=1;
     zgd(ii)
   }else{
      return false;
    }
})

$(".next").on("click",function(){
    if(step==0){
     ii--
     if(ii==-1){
          obj.css({"marginRight":str/2,"marginLeft":0})
     }else if(ii==-length/2-1){
       ii=-1;
     }
     step=1;
     zgd(ii)
    }else{
      return false;
    }
})

})

</script>
</head>

<body>
<div class="divbox">
<div class="div_a">
   <ul id="fuck">
    <div id="stra" class="pos">
     <li><span style="width:100px;height:100px;background:#000;display:block;"></span></li>
     <li><span style="width:100px;height:100px;background:#ff0;display:block;"></span></li>
     <li><span style="width:100px;height:100px;background:#f00;display:block;"></span></li>
     <li><span style="width:100px;height:100px;background:#dff;display:block;"></span></li>
     <li><span style="width:100px;height:100px;background:#f00;display:block;"></span></li>
     <li><span style="width:100px;height:100px;background:#dff;display:block;"></span></li>
    </div>

   </ul>
</div>
    <a class="prev" href="javascript:;"></a>
   <a class="next" href="javascript:;"></a>
</div>
</body>
</html>

jq图片左右无缝切换滚动，有定时切换。

猜你喜欢