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>

  • 相关阅读:
    Eclipse中的常见设置
    Maven配置及使用总结
    启动Eclipse时,出现 “Failed to load the JNI shared library "C:Program Filesjavajdk1.7.....jvm.dll"
    Java 环境问题汇总
    Java 异常处理
    Java面向对象(二)
    Java面向对象(一)
    Java获取路径
    Java代码读取文件
    工作常用快捷键大全
  • 原文地址:https://www.cnblogs.com/ricesm/p/5037065.html
Copyright © 2011-2022 走看看