循环滚动

标签：

样式：

    #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>

循环滚动

标签：

原文地址：http://www.cnblogs.com/zhouyx/p/5360176.html