图片循环滚动效果
2016-02-21 22:43
337 查看
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="Scripts/jquery-1.7.2.min.js" type="text/javascript"></script>
<style type="text/css">
* { margin:0;padding:0}
.containerBox { position: relative;overflow: hidden; width: 900px; height:60px;margin:50px auto;border: 1px solid red;}
.containerBox ul { position:absolute;overflow: hidden;height: 60px; }
.containerBox ul li { display:inline; width:120px; height:60px; margin:0 15px; float:left;}
</style>
<script type="text/javascript">
$(function () {
//为了使ul向左滚动能够用不停止（看上去是这样的），需要复制出来一份ul，当原始ul向左滚动时，复制出来的ul能够跟在原始ul的后面，看起来是连续循环不间断的。所以，只需要解决当原始ul滚动结束，后续复制的ul能够连续跟着，并且当复制出来的ul滚动结束，还能够循环下去就可以了。因此，就是当原始ul滚动结束时，复制出来的ul到达了原始ul的初始位置，这时，将两个ul的left属性全部初始化，无缝切换。
//如果当前div的宽度不够放下所有的图片 则图片滚动
//思路就是复制出来一个ul，left值为当前ul的宽度。复制出来的ul与原始ul一起向左滚动。
//当滚动值与ul的宽度一致时，说明复制的ul滚动到了当前ul的原始位置。这时，把两个ul的left全部复原。
if ($(".containerBox ul li").length > $(".containerBox").width()/150) {
var ulWidth = $(".containerBox ul li").length * 150;//计算出ul的长度=li的个数*（li的宽度+2*margin值15）
var cloneList = $(".containerBox ul").clone();
$(".containerBox").append(cloneList);//复制出来一个ul加载到当前ul的后面
$(".containerBox ul").css("width", ulWidth + "px"); //把当前ul的宽度赋值为ulWidth，以使所有的li都在同一行上
$(cloneList).css("left", ulWidth + "px"); //由于ul是absolute，为了使复制出来的跟在当前ul后面，给复制的ul的left属性赋值为ulWidth
var left = 0, interval;
Scroll();
//当鼠标放在ul上时，停止滚动
$(".containerBox ul").hover(function () {
clearInterval(interval);
}, function () {
Scroll();
})
function Scroll() {
interval = setInterval(function () {
//每25ms执行一次滚动
left = left - 1; //向左滚动-1px
//当left值等于ulWidth时，说明当前ul已经滚动到看不到的位置了，复制的ul滚动到了当前ul的原始位置
//这时，使left归0，相当于初始化了当前ul跟复制ul的位置。就能达到无限滚动的效果了。
if (Math.abs(left) >= ulWidth) {
left = 0;
}
$(".containerBox ul:eq(0)").css({ "left": left + "px" });
$(".containerBox ul:eq(1)").css({ "left": (ulWidth + left) + "px" });
}, 25);
}
}
})
</script>
</head>
<body>
<div class="containerBox">
<ul>
<li><a href="javascript:void(0)"><img width="120" height="60" alt="图片1"></a></li>
<li><a href="javascript:void(0)"><img width="120" height="60" alt="图片2"></a></li>
<li><a href="javascript:void(0)"><img width="120" height="60" alt="图片3"></a></li>
<li><a href="javascript:void(0)"><img width="120" height="60" alt="图片4"></a></li>
<li><a href="javascript:void(0)"><img width="120" height="60" alt="图片5"></a></li>
<li><a href="javascript:void(0)"><img width="120" height="60" alt="图片6"></a></li>
<li><a href="javascript:void(0)"><img width="120" height="60" alt="图片7"></a></li>
<li><a href="javascript:void(0)"><img width="120" height="60" alt="图片8"></a></li>
<li><a href="javascript:void(0)"><img width="120" height="60" alt="图片9"></a></li>
<li><a href="javascript:void(0)"><img width="120" height="60" alt="图片10"></a></li>
<li><a href="javascript:void(0)"><img width="120" height="60" alt="图片11"></a></li>
</ul>
</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 