循环滚动
Posted 简单就好zyx
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了循环滚动相关的知识，希望对你有一定的参考价值。
样式：
#hotsel{position: relative; width: 100%; overflow: hidden;}
#hotselul{width:92%;margin:auto; height: 250px; overflow: hidden;}
.rxtj{ margin:20px auto; position: relative;width:2000%;}
.rxtj li{float: left; margin-right:20px; width: 160px; height: 240px;display: block;}
.rxtj li p{font-size: 14px; text-align: center; width: 100%; margin-bottom:0px;}
.rxtj img{margin-bottom:10px;}
.buypre{position: absolute;left: 0px;top:80px; cursor: pointer; display: block; z-index: 9999;}
.buynext{position: absolute;right: -0px;top:80px; cursor: pointer; display: block;z-index: 9999;}
html: <div id="hotsel">
<div id="hotselul">
<ul class="rxtj">
<li><img src="images/buy_15.jpg">
<p>百度竞价托管</p>
<p class="redtext">￥8,800/年起</p>
</li>
<li><img src="images/buy_17.jpg">
<p>新竞价大师</p>
<p class="redtext">￥3800起</p>
</li>
<li><img src="images/buy_19.jpg">
<p>百度内容营销</p>
<p class="redtext">￥3600/套</p>
</li>
<li><img src="images/buy_21.jpg">
<p>企业百科</p>
<p class="redtext">￥1500/个</p>
</li>
<li><img src="images/buy_22.jpg">
<p>百度口碑 <span class="redtext">限时特价</span></p>
<p class="redtext">￥0,1/100条</p>
</li>
<li><img src="images/buy_23.jpg">
<p>微信代运营</p>
<p class="redtext">￥4800</p>
</li>
<li><img src="images/buy_24.jpg">
<p>网站托管服务</p>
<p class="redtext">￥1800起</p>
</li>
<li><img src="images/buy_25.jpg">
<p>400电话</p>
<p class="redtext">￥0.1/个</p>
</li>
</ul>
</div>
<span class="buypre"><img src="images/buyl.jpg"></span>
<span class="buynext"><img src="images/buyr.jpg"></span>
</div>
script：
<script type="text/javascript">
$(function() {
var _index5 = 0;
$(".buynext img").click(function() {
_index5++;
var len = $(".rxtj li").length;
if (_index5 + 5 > len) {
$(".rxtj").stop().append($(".rxtj").html());
}
$(".rxtj").stop().animate({
left: -_index5 * 180
}, 1000);
});
$(".buypre img").click(function() {
if (_index5 == 0) {
$(".rxtj").prepend($(".rxtj").html());
//$(".rxtj").css("left","-1300px");
_index5 = 6
}
_index5--;
$(".rxtj").stop().animate({
left: -_index5 * 180
}, 1000);
});
})
</script>
以上是关于循环滚动的主要内容，如果未能解决你的问题，请参考以下文章