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>

  • 相关阅读:
    KVM源代码阅读--内核版本3.17.4
    最新的裸机联想笔记本装win7系统/SSD(固态硬盘)上安装win7系统/联想K4450A i7装win7系统
    Vmaware复制后的虚拟机不能上网问题解决
    KVM基于X86硬件辅助的虚拟化技术实现机制【转】
    KVM和QEMU简介
    笔记--[基于完全虚拟化的安全监控技术研究_张丽(2013)]
    win8预装系统环境下安装win7问题以及双操作系统安装解决
    VM 操作系统实例化(基于 KVM 的虚拟化研究及应用--崔泽永(2011))的论文笔记
    VMware vsphere Hypervisor、VMware vsphere和VMware Workstation小记
    虚拟化、(完)全虚拟化、半虚拟化和准虚拟化技术个人总结
  • 原文地址:https://www.cnblogs.com/zhouyx/p/5360176.html
Copyright © 2011-2022 走看看