ichenchao
jq传统轮播图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>


    <style>
        *{
            margin: 0;
            padding: 0;
        }


        .box{
            width: 560px;
            height: 300px;
            border: 5px solid gray;
            margin: 100px auto;
            position: relative;
            overflow: hidden;
        }


        .m_unit{
            width: 10000px;
            height: 300px;
            position: absolute;
            top: 0;
            left: 0;
        }
        .m_unit ul{
            overflow: hidden;
        }
        .m_unit ul li{
            list-style: none;
            float: left;
            width: 560px;
            height: 300px;
        }


        /*左右按钮*/
        .btn span{
            width: 55px;
            height: 55px;
            background: url(\'images/dog/btnL.png\');
            position: absolute;
            border-radius:  10px;
            top: 50%;
            margin-top: -28px;
        }


        .btn span.right{
            background: url(\'images/dog/btnR.png\');
            right: 0;
        }


        /*小圆点*/
        .circle ul li{
            list-style: none;
            float: left;
            width: 20px;
            height: 20px;
            background: orange;
            margin-right: 10px;
            border-radius: 50%;
        }


        .circle ul{
            overflow: hidden;
        }


        .circle{
            position: absolute;
            bottom: 10px;
            right: 10px;
        }


        .circle ul li.current{
            background: red;
        }
    </style>
</head>
<body>
    <div class="box" id=\'box\'>
        <div class="m_unit" id=\'m_unit\'>
            <ul>
                <li><a href="#"><img src="images/dog/0.jpg" alt=""></a></li>
                <li><a href="#"><img src="images/dog/1.jpg" alt=""></a></li>
                <li><a href="#"><img src="images/dog/2.jpg" alt=""></a></li>
                <li><a href="#"><img src="images/dog/3.jpg" alt=""></a></li>
                <li><a href="#"><img src="images/dog/4.jpg" alt=""></a></li>
            </ul>
        </div>


        <div class="btn">
            <span class=\'left\' id=\'leftBtn\'></span>
            <span class=\'right\' id=\'rightBtn\'></span>
        </div>


        <div class="circle" id=\'circle\'>
            <ul>
                <li class=\'current\'></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
    </div>


    <script src=\'js/jquery-1.12.3.min.js\'></script>


    <script>


        // 获取图片的长度
        var imgLength = $(\'#m_unit ul li\').length;


        // 拼接假0
        $(\'#m_unit ul\').append($(\'#m_unit ul li\').eq(0).clone());


        // 信号量
        var idx = 0;


        // 自动轮播
        var timer = setInterval(rightBtnHandler,2000);


        // 鼠标进入box
        $(\'#box\').mouseenter(function() {
            clearInterval(timer);
        });


        // 鼠标离开box
        $(\'#box\').mouseleave(function() {
            timer = setInterval(rightBtnHandler,2000);
        });


        // 右按钮点击事件
        $(\'#rightBtn\').click(rightBtnHandler);
        function rightBtnHandler(){
            idx++;
            $(\'#m_unit\').animate({\'left\': -560 * idx}, 1000, function(){
                if(idx > imgLength-1){
                    idx = 0;
                    // $(\'#m_unit\').css(\'left\',\'0px\');
                    $(this).css(\'left\', \'0px\');
                }
            });


            circleChange();
        }




        // 左按钮点击事件
        $(\'#leftBtn\').click(function(){
            idx--;


            if(idx < 0){
                idx = imgLength - 1;
                $(\'#m_unit\').css(\'left\', -560 * imgLength);
            }


            $(\'#m_unit\').animate({\'left\': -560 * idx}, 1000);


            circleChange();
        });
        
        // 小圆点点击事件
        $(\'#circle ul li\').each(function(i){
            // console.log(i);
            $(this).click(function(){
                idx = i;
                $(\'#m_unit\').animate({\'left\': -560 * idx}, 1000);
                circleChange();
            });
        });


        // 小圆点更改
        function circleChange(){
            var idxx = idx;
            if(idxx > imgLength-1) idxx = 0;
            // 排他
            $(\'#circle ul li\').eq(idxx).css(\'background\',\'red\').siblings().css(\'background\',\'orange\');
        }
    </script>
</body>
</html>
jq呼吸轮播图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>


    <style>
        *{
            margin: 0;
            padding: 0;
        }


        .box{
            width: 560px;
            height: 300px;
            border: 5px solid gray;
            margin: 100px auto;
            position: relative;
            overflow: hidden;
        }


        .m_unit{
            width: 10000px;
            height: 300px;
            
        }
        .m_unit ul{
            overflow: hidden;
        }
        .m_unit ul li{
            list-style: none;
            float: left;
            width: 560px;
            height: 300px;
            position: absolute;
            top: 0;
            left: 0;
            opacity: 0;
            filter: alpha(opacity=0);


        }
        .m_unit ul li.active{
            opacity: 1;
            filter: alpha(opacity=100);
        }


        /*左右按钮*/
        .btn span{
            width: 55px;
            height: 55px;
            background: url(\'images/dog/btnL.png\');
            position: absolute;
            border-radius:  10px;
            top: 50%;
            margin-top: -28px;
        }


        .btn span.right{
            background: url(\'images/dog/btnR.png\');
            right: 0;
        }


        /*小圆点*/
        .circle ul li{
            list-style: none;
            float: left;
            width: 20px;
            height: 20px;
            background: orange;
            margin-right: 10px;
            border-radius: 50%;
        }


        .circle ul{
            overflow: hidden;
        }


        .circle{
            position: absolute;
            bottom: 10px;
            right: 10px;
        }


        .circle ul li.current{
            background: red;
        }
    </style>
</head>
<body>
    <div class="box" id=\'box\'>
        <div class="m_unit" id=\'m_unit\'>
            <ul>
                <li class="active"><a href="#"><img src="images/dog/0.jpg" alt=""></a></li>
                <li><a href="#"><img src="images/dog/1.jpg" alt=""></a></li>
                <li><a href="#"><img src="images/dog/2.jpg" alt=""></a></li>
                <li><a href="#"><img src="images/dog/3.jpg" alt=""></a></li>
                <li><a href="#"><img src="images/dog/4.jpg" alt=""></a></li>
            </ul>
        </div>


        <div class="btn">
            <span class=\'left\' id=\'leftBtn\'></span>
            <span class=\'right\' id=\'rightBtn\'></span>
        </div>


        <div class="circle" id=\'circle\'>
            <ul>
                <li class=\'current\'></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
    </div>


    <script src=\'js/jquery-1.12.3.min.js\'></script>
    <script>
        var m_unit = $(\'#m_unit ul li\');
        // $(\'#m_unit ul\').eq(0).append($(\'#m_unit ul li \').clone());


        var idx =0;
        var timer = setInterval(rightBtnHandler,2000);


        $(\'#box\').mouseenter =function(){
            clearInterval(timer);
        }
        $(\'#box\').mouseleave = function(){
             timer = setInterval(rightBtnHandler,2000);
        }
        $(\'#rightBtn\').click(rightBtnHandler);
        function rightBtnHandler(){
            $(\'#m_unit ul li\').eq(idx).animate({\'opacity\':0},1000);
            idx++;
            if(idx > m_unit.length-1 ) idx =0;
            $(\'#m_unit ul li\').eq(idx).animate({\'opacity\':1},1000);
            circleChange();
        }
        $(\'#leftBtn\').click(function(){
            $(\'#m_unit ul li\').eq(idx).animate({\'opacity\':0},1000);
            idx --;
            if(idx < 0){
                idx = m_unit.length-1;
            }
            $(\'m_unit ul li\').eq(idx).animate({"opacity":1},1000);
            circleChange();
        });
        $("#circle ul li").each(function(i){
                $(this).click(function(){
                    $("#m_unit ul li").eq(idx).animate({\'opacity\':0},1000);
                    idx = i;
                    $("#m_unit ul li").eq(idx).animate({\'opacity\':1},1000);
                    circleChange();
                })
            })
        
        function circleChange(){
            $("#circle ul li").eq(idx).css(\'background\',\'red\').siblings().css(\'background\',\'orange\');


            }
            
</script>
</body>

</html>

jq三位置轮播图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>


    <style>
        *{
            margin: 0;
            padding: 0;
        }


        .box{
            width: 560px;
            height: 300px;
            border: 5px solid gray;
            margin: 100px auto;
            position: relative;
            /*overflow: hidden;*/
        }


        .m_unit{
            width: 10000px;
            height: 300px;
            position: absolute;
            top: 0;
            left: 0;
        }
        .m_unit ul{
            overflow: hidden;
        }
        .m_unit ul li{
            list-style: none;
            position: absolute;
            top: 0px;
            left: 560px;
            width: 560px;
            height: 300px;
            
        }
        .m_unit ul li.current{
            left: 0px;
        }


        /*左右按钮*/
        .btn span{
            width: 55px;
            height: 55px;
            background: url(\'images/dog/btnL.png\');
            position: absolute;
            border-radius:  10px;
            top: 50%;
            margin-top: -28px;
        }


        .btn span.right{
            background: url(\'images/dog/btnR.png\');
            right: 0;
        }


        /*小圆点*/
        .circle ul li{
            list-style: none;
            float: left;
            width: 20px;
            height: 20px;
            background: orange;
            margin-right: 10px;
            border-radius: 50%;
        }


        .circle ul{
            overflow: hidden;
        }


        .circle{
            position: absolute;
            bottom: 10px;
            right: 10px;
        }


        .circle ul li.current{
            background: red;
        }
    </style>
</head>
<body>
    <div class="box" id=\'box\'>
        <div class="m_unit" id=\'m_unit\'>
            <ul>
                <li class=\'current\'><a href="#"><img src="images/dog/0.jpg" alt=""></a></li>
                <li><a href="#"><img src="images/dog/1.jpg" alt=""></a></li>
                <li><a href="#"><img src="images/dog/2.jpg" alt=""></a></li>
                <li><a href="#"><img src="images/dog/3.jpg" alt=""></a></li>
                <li><a href="#"><img src="images/dog/4.jpg" alt=""></a></li>
            </ul>
        </div>


        <div class="btn">
            <span class=\'left\' id=\'leftBtn\'></span>
            <span class=\'right\' id=\'rightBtn\'></span>
        </div>


        <div class="circle" id=\'circle\'>
            <ul>
                <li class=\'current\'></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
    </div>


    <script src =\'js/jquery-1.12.3.min.js\'></script>
    <script>
         //获取所有图片
            var imgLength=$(".m_unit ul li").length;
            // //节流 
            // var timer=setInterval(rightHandler,2000);
            // //鼠标进入事件
            // $(".box").mouseenter(function(){
            //     clearInterval(timer);
            // });
            // //鼠标移除事件
            // $(".box").mouseleave(function(){
            //     timer=setInterval(rightHandler,2000);
            // });
            // //信号量
            var idx=0;
            // 右按钮点击事件click
            $(".right").click(rightHandler);
            function rightHandler(){
            $(\'.m_unit ul li\').eq(idx).animate({\'left\': -560}, 1000);
                idx ++;
                if(idx == imgLength)idx=0;
                // console.log(idx);
                $(\'.m_unit ul li\').eq(idx).css(\'left\',\'560px\');
                $(\'.m_unit ul li\').eq(idx).animate({\'left\': 0}, 1000);     
                circleChange();
                }
            $(\'.left\').click(function(){
                $(\'.m_unit ul li \').eq(idx).animate({\'left\':560},1000);
                idx --;
                if(idx<0)idx = imgLength-1;
                $(\'.m_unit ul li\').eq(idx).css(\'left\',\'-560px\');
                $(\'.m_unit ul li\').eq(idx).animate({\'left\': 0}, 1000);    
                circleChange();
                
            })
                $("#circle ul li").each(function(i){
                $(this).click(function(){
                    if(idx>$(this).index()){
                        //this.index是当前点击点所对应的图 idx是当前显示的图 
                        //先把this移动-560
                        //然后this 从-560移动到0 
                        //当前显示的图从0 到560
                        $(".m_unit ul li").eq($(this).index()).css({\'left\':-560});
                        $(".m_unit ul li").eq($(this).index()).animate({\'left\':\'0px\'},1000);
                        $(".m_unit ul li").eq(idx).animate({\'left\':\'560px\'},1000);
                        }else{
                        $(".m_unit ul li").eq($(this).index()).css({\'left\':560});
                        $(".m_unit ul li").eq($(this).index()).animate({\'left\':"0px"},1000);
                        $(".m_unit ul li").eq(idx).animate({\'left\':\'-560px\'},1000);                        }
                        idx = i;
                        circleChange();
                });
            });


          function circleChange(){
            $("#circle ul li").eq(idx).css(\'background\',\'red\').siblings().css(\'background\',\'orange\');


            }
            
    </script>
</body>

</html>

jq传送带轮播图



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>


    <style>
        *{
            margin: 0;
            padding: 0;
        } 


        .box{
            width: 560px;
            height: 300px;
            border: 5px solid red;
            margin: 100px auto;
            position: relative;
            /*overflow: hidden;*/
        }


        .imglist ul li{
            display: none;
        }


        .m_unit{
            width: 1120px;
            height: 300px;
            position: absolute;
            top: 0;
            left: 0;
        }


        .m_unit li{
            width: 560px;
            height: 300px;
            list-style: none;
            float: left;
        }


        .btn span{
            width: 55px;
            height: 55px;
            position: absolute;
            top: 50%;
            margin-top: -27px;
        }


        .btn .left{
            background: url(\'images/dog/btnL.png\');
            left: 10px;
        }


        .btn .right{
            background: url(\'images/dog/btnR.png\');
            right: 10px;
        }


        .circle{
            position: absolute;
            bottom: 10px;
            left: 50%;
            margin-left: -70px;
        }


        .circle ul li{
            list-style: none;
            width: 20px;
            height: 20px;
            margin-right: 10px;
            background: orange;
            border-radius: 50%;
            float: left;
        }


        .circle ul li.current{
            background: red;
        }
    </style>
</head>
<body>
    <div class="box">
        
        <div class="imglist" id=\'imglist\'>
            <ul>
                <li><a href="#"><img src="images/dog/0.jpg" alt=""></a></li>
                <li><a href="#"><img src="images/dog/1.jpg" alt=""></a></li>
                <li><a href="#"><img src="images/dog/2.jpg" alt=""></a></li>
                <li><a href="#"><img src="images/dog/3.jpg" alt=""></a></li>
                <li><a href="#"><img src="images/dog/4.jpg" alt=""></a></li>
            </ul>
        </div>
        
        <!-- 传送带 -->
        <div class="m_unit" id=\'m_unit\'>
            
        </div>


        <div class="btn">
            <span class="left" id=\'leftBtn\'></span>
            <span class="right" id=\'rightBtn\'></span>
        </div>


        <div class="circle" id=\'circle\'>
            <ul>
                <li class=\'current\'></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>


    </div>


    <script src=\'js/jquery-1.12.3.min.js\'></script>
    <script>
        var imgs = $(\'#imglist ul li\');
        var m_unit =$(\'#m_unit\');
        m_unit.append(imgs.eq(0).clone());
        m_unit.append(imgs.eq(1).clone());


        // $(\'#m_unit ul\').eq(0).append($(\'#m_unit ul li \').clone());


        var idx =0;
        // var timer = setInterval(rightBtnHandler,2000);


        // $(\'#box\').mouseenter =function(){
        //     clearInterval(timer);
        // }
        // $(\'#box\').mouseleave = function(){
        //      timer = setInterval(rightBtnHandler,2000);
        // }
        $("#rightBtn").click(rightBtnHandler);
        function rightBtnHandler(){
            $(\'#m_unit\').css({\'left\':\'0px\'});
            $(\'#m_unit\').empty();
            m_unit.append(imgs.eq(idx).clone());
            idx++;
            if(idx>imgs.length-1)idx=0;
            m_unit.append(imgs.eq(idx).clone());


            
            
            $(\'#m_unit\').animate({\'left\':-560},1000);
            changeCircle();
        }
        $(\'#leftBtn\').click(function(){


            $(\'#m_unit\').css({\'left\':\'-560px\'});
            $(\'#m_unit\').empty();
            m_unit.append(imgs.eq(idx).clone());
            idx--;
            if(idx<0)idx=imgs.length-1;
            m_unit.prepend(imgs.eq(idx).clone());    
            $(\'#m_unit\').animate({\'left\':0},1000);
            changeCircle();
        });


        // 更改小圆点
        
        function changeCircle(){
            // 排他
            var idxx = idx;
            if(idxx>imgs.length-1)idxx=0;
            $(".circle li").eq(idxx).css(\'background\',\'red\').siblings().css(\'background\',\'orange\');    
            }
</script>
</body>

</html>

jq间歇模型2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>


    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 300px;
            height: 200px;
            background: #ddd;
            margin: 100px auto;
            position: relative;
            overflow: hidden;
        }


        ul{
            position: absolute;
            top: 0;
            left: 0;
        }


        li{
            list-style: none;
            width: 300px;
            height: 50px;
            line-height: 50px;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <div id =\'box\'>
        <ul>
            <li>沈同学 阿里**网络有限公司</li>
            <li>曹同学 *度网络有限公司</li>
            <li>朱同学 *讯网络有限公司</li>
            <li>杨同学 *60网络有限公司</li>
            <li>杨同学 *东网络有限公司</li>
            <li>曹同学 *易网络有限公司</li>
        </ul>
    </div>


    <script src=\'js/jquery-1.12.3.min.js\'></script>
    <script>
        var uls = $(\'#box ul\');
        var lis =$("#box ul li");


        // 内容翻倍
          uls.append(lis.clone());
          console.log(lis.length);
          var idx = 0;
          setInterval(function(){
              idx++;
              $("#box ul ").animate({\'top\':-50*idx},1000,function(){
                  if(idx==lis.length){
                      idx = 0;
                      $(\'#box ul\').css({"top":"0"});
                  }
              })
          },2000);
    </script>
</body>
</html>
--------------------- 
作者:柳LL 
来源:CSDN 
原文:https://blog.csdn.net/yllmyl/article/details/80598694 
版权声明:本文为博主原创文章,转载请附上博文链接!

 

分类:

技术点:

相关文章:

猜你喜欢