0
点赞
收藏
分享

微信扫一扫

JQ无缝滑动轮播图

一条咸鱼的干货 2022-03-14 阅读 60

(1)html布局:

    <div id="rotation">

        <ul> 

            <li><img src="imgs/6.png"></li>

            <li><img src="imgs/1.png"></li>

            <li><img src="imgs/2.png"></li>

            <li><img src="imgs/3.png"></li>

            <li><img src="imgs/4.png"></li>

            <li><img src="imgs/5.png"></li>

            <li><img src="imgs/6.png"></li>

            <li><img src="imgs/1.png"></li>

     </ul>

      <ol>

            <li>1</li>

            <li>2</li>

            <li>3</li>

            <li>4</li>

            <li>5</li>

            <li>6</li>

      </ol>

      <button id="rotate_left">&gt;</button>

       <button id="rotate_right">&lt;</button>

    </div>

(2)css:

#rotation { 

            overflow: hidden;

            color: white;

            position: relative;//父元素相对定位,

            margin: 0 auto;

            width: 600px;

            height: 600px;

        }

#rotation>ul {

            width: 4800px; 

            position: absolute;//子元素绝对定位

            left: -600px;

        }

  #rotation>ul>li {

            width: 600px;

            float: left;

        }

   #rotation>ol {

            position: absolute;

            top: 70%;

            left: 40%;

        }

 #rotation>ol>li {

            margin-left: 5px;

            width: 25px;

            height: 25px;

            border-radius: 25px;

            line-height: 25px;

            text-align: center;

            background-color: black;

            float: left;

        }

#rotation>button:nth-child(3) {

            position: absolute;

            top: 30%;

            left: 94%;

            width: 30px;

            height: 80px;

            background-color: red;

        }

 #rotation>button:nth-child(4) {

            position: absolute;

            top: 30%;

            width: 30px;

            height: 80px;

            background-color: red;

        }

(3js代码:

<script src="../../../lib/jquery-3.6.0.min.js"></script>

    <script>

        var rotate = $('#rotation');

        var ul = $('#rotation>ul');

        var oli = $('#rotation>ol>li');

        var rotate_right = $('#rotation>#rotate_right');

        var rotate_left = $('#rotation>#rotate_left');

        var index = 0;//负责下面的小li

        var n = 1;//次数,默认是1开头,因为ul的left值是-600px

        oli.eq(0).css('background-color', 'red').siblings().css('background-color', '');//初始第一个li颜色

        rotate_left.on('click', function () {

            index++;

            if (index >= 6) {//判断小圆点

                index = 0;

            }

            oli.eq(index).css('background-color', 'red').siblings().css('background-color', '');

            n++;

            if (n == 8) {//点击次数,因为前后加了一张最后的图片和第一张图片,不熟悉可以边点击边

                n = 2;

                ul.css('left', -600);//回到开头

            }

            ul.stop().animate({

                left: -600 * n,//做动画

            })

        })

        rotate_right.on('click', function () {

            index--;

            if (index == -1) {

                index = 5;

            }

            oli.eq(index).css('background-color', 'red').siblings().css('background-color', '');

            n--;

            if (n == -1) {

                n = 5;

                ul.css('left', -600 * (n + 1));

            }

            ul.stop().animate({

                left: -600 * n,

            })

        })

        var timer = setInterval(function () {

            rotate_left.click();//点击事件放在定时器,每1秒自动点击一次,会自动轮播

        }, 1000)

        rotate.on({//进入和离开清除定时器和开启定时器

            mouseenter: function () {

                clearInterval(timer);

            },

            mouseleave: function () {

                timer = setInterval(function () {

                    rotate_left.click();

                }, 1000)

            }

        })

        oli.on('mouseenter', function () {

            $(this).css('background-color', 'red').siblings().css('background-color', '');

            n = $(this).index() + 1;//下面小圆点移入显示对应图片,获取下标赋值给一个张图

            index = $(this).index();

            ul.stop().animate({

                left: -600 * n,

            })

        })

    </script>

举报

相关推荐

0 条评论