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>

  • 相关阅读:
    TextFlow with JavaFX 2
    搞IT的技术人员为什么会如此苦逼
    Spring MVC3.0.5搭建全程
    JetNuke笔记 ( by quqi99 )
    What is the difference between application server and web server?
    Customize Netbeans Platform Splash Screen and About Dialog
    caffe-win10-cifar10
    Ubuntu14.04+caffe+CPU
    win10+caffe+GPU
    Majority Element(169) && Majority Element II(229)
  • 原文地址:https://www.cnblogs.com/ricesm/p/5037065.html
Copyright © 2011-2022 走看看