zoukankan      html  css  js  c++  java
  • jquery 图片滚动

    效果图:

    $(function(){
        $("#roll-img2").html($("#roll-img").html());
        function rollPlay(){
            if($(".ro-main").scrollLeft() > $(".roll-img").width())
            {
                $(".ro-main").scrollLeft(0);
            }
            else
            {
                $(".ro-main").scrollLeft($(".ro-main").scrollLeft()+1);
            }
        }
        var roll=setInterval(rollPlay,40);
        $(".ro-main").hover(function(){clearInterval(roll);},function(){roll=setInterval(rollPlay,40);});
        $(".roll-btn span").bind("click",rollBtnClick);
        function rollBtnClick(){
            if($(this).hasClass("roll-prev")){
                $(".ro-main").scrollLeft($(".ro-main").scrollLeft()+200);
            }else{
                if($(".ro-main").scrollLeft() <= 200)
                {
                    $(".ro-main").scrollLeft($(".roll-img").width()-200);
                }
                else{
                    $(".ro-main").scrollLeft($(".ro-main").scrollLeft()-200);
                }
            }
        }
    })
    </script>


    <div class="ro-main">
        <div class="roll">
            <ul id="roll-img" class="roll-img">
                <li><img src="images/img01.jpg"><span><a href="">产看详情</a><b>谁谁谁水水水水</b></span></li>
                <li><img src="images/img02.jpg"><span><a href="">产看详情</a><b>谁谁谁水水水水</b></span></li>
                <li><img src="images/img03.jpg"><span><a href="">产看详情</a><b>谁谁谁水水水水</b></span></li>
                <li><img src="images/img04.jpg"><span><a href="">产看详情</a><b>谁谁谁水水水水</b></span></li>
                <li><img src="images/img05.jpg"><span><a href="">产看详情</a><b>谁谁谁水水水水</b></span></li>
            </ul>
            <ul id="roll-img2" class="roll-img"></ul>
        </div>
    </div>
    <div class="roll-btn">
                <span class="roll-prev">1</span>
                <span class="roll-next">2</span>
    </div>

  • 相关阅读:
    pta-L2-032 彩虹瓶 (25 分)
    pat-L2-019 悄悄关注
    谷歌与Airbnb的JS代码规范
    无阻塞加载脚本----性能优化(二)
    web开发者性能优化工具(一)
    threeJS创建mesh,创建平面,设置mesh的平移,旋转、缩放、自传、透明度、拉伸
    攻防世界-web-高手进阶区011-Web_python_template_injection
    攻防世界-web-高手进阶区010-upload1
    攻防世界-web-高手进阶区009-unserialize3
    攻防世界-web-高手进阶区008-PHP2
  • 原文地址:https://www.cnblogs.com/ricesm/p/5037065.html
Copyright © 2011-2022 走看看