• 循环滚动


    样式:

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

  • 相关阅读:
    初心不负 笔记-JS高级程序设计-引用类型篇-Array
    CSS-样式篇
    笔记-JS高级程序设计-变量,作用域和内存问题
    笔记-JS高级程序设计-基本概念篇
    WPF 10天修炼 第四天- WPF布局容器
    WPF 10天修炼 第三天- Application全局应用程序类
    WPF 10天修炼 第二天- XAML语言
    WPF 10天修炼 第一天- 入门
    C# 关于e.Handled 的说明
    C# Replace方法
  • 原文地址:https://www.cnblogs.com/zhouyx/p/5360176.html
Copyright © 2020-2023  润新知