jq图片无限循环滚动
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jq图片无限循环滚动相关的知识，希望对你有一定的参考价值。
刚开始写的这段代码没有加判断false出现错误，即鼠标第二次放上去不会停止滚动且移开之后滚动速度加快。加了之后就变正常了，banner滚动也一样。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css" media="screen">
*{padding: 0;margin: 0;}
.box a{text-decoration: none;color: #666;}
.box{width: 1920px;margin: 0 auto;height: 420px;overflow: hidden;}
.indome{width: 99999px;}
.box .slider1,.box .slider2{list-style: none;float: left;}
.box .slider1 li,.box .slider2 li{float:left;}
.page a{display: inline-block;width: 40px;height: 68px;text-align: center;line-height: 68px;background: rgba(0,0,0,0.2);font-size: 24px;color: #fff;top: 45%;position: absolute;z-index: 99;}
.page a.pre{left: 0;}
.page a.next{right: 0;}
</style>
</head>
<body>
<div class="box">
<div class="indome">
<ul class="slider1">
<li><a href="" title=""><img src="banner1.jpg" ></a></li>
<li><a href="" title=""><img src="banner2.jpg" ></a></li>
<li><a href="" title=""><img src="banner3.jpg" ></a></li>
</ul>
<ul class="slider2">
</ul>
</div>
</div>
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript">
var t=1;
var li_length=$(".slider1 li img").width();
var box=$(".box");
var slider1=$(".slider1")
var slider2=$(".slider2")
var length=$(".slider1 li").length;
var flase=false;
var timer
$(".slider1").css("width",length*li_length)
$(".slider2").css("width",length*li_length)
var slider1Html=$(".slider1").html();
$(".slider2").append(slider1Html);
function slider(){
if (box.scrollLeft()>=slider1.offsetWidth){
box.scrollLeft(0);
}
else{
box.scrollLeft(box.scrollLeft()+1);
}
}
function star(){
if(!flase){
flase=true;
timer=setInterval(slider,t)
}
}
function stop(){
flase=false;
clearInterval(timer);
}
star();
$(".box").hover(function(){
stop();
},function(){
star();
})
</script>
</body>
</html>
以上是关于jq图片无限循环滚动的主要内容，如果未能解决你的问题，请参考以下文章