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图片无限循环滚动的主要内容,如果未能解决你的问题,请参考以下文章

unity 背景无限循环滚动效果

HTML5 3D无限循环图片流

无限循环滚动视图思路一

iOS: 无限循环轮播图简单封装

在 Swift 中使用 UIScrollView 进行无限循环滚动

Android 一个无限循环滚动的卡片式ViewPager