zoukankan      html  css  js  c++  java
  • 循环滚动

    样式:

        #hotsel{position: relative; 100%; overflow: hidden;}
        #hotselul{92%;margin:auto; height: 250px; overflow: hidden;}
        .rxtj{ margin:20px auto; position: relative;2000%;}
        .rxtj li{float: left; margin-right:20px; 160px; height: 240px;display: block;}
        .rxtj li p{font-size: 14px; text-align: center; 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>

  • 相关阅读:
    偶遇this之坑
    程序员的职业素养——读后感
    我怎么没想到——读后感
    黑客与画家——读后感
    漫谈认证与授权
    动手造轮子:实现一个简单的依赖注入(二) --- 服务注册优化
    动手造轮子:实现简单的 EventQueue
    asp.net core 自定义 Policy 替换 AllowAnonymous 的行为
    SQL Server 中 `JSON_MODIFY` 的使用
    WeihanLi.Npoi 近期更新
  • 原文地址:https://www.cnblogs.com/zhouyx/p/5360176.html
Copyright © 2011-2022 走看看