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>

  • 相关阅读:
    内部类概述和访问特点
    权限修饰符 权限
    抽象类和接口作为返回值类型的问题
    抽象类和接口作为形参问题
    jdbc:java数据库连接
    类与类、类与接口、接口与接口的关系
    接口
    抽象类
    多态
    继承中构造方法的关系
  • 原文地址:https://www.cnblogs.com/ricesm/p/5037065.html
Copyright © 2011-2022 走看看