轮播图的效果

轮播图样式：  

* {

            margin: 0;

            padding: 0;

            list-style: none;

        }

        .box {

            width: 800px;

            margin: 20px auto;

            position: relative;

        }

        .box img {

            width: 800px;

        }

        ul {

            position: absolute;

            height: 30px;

            bottom: 10px;

            left: 0;

            right: 0;

            margin: auto;

            display: flex;

            justify-content: center;

            align-items: center;

        }

        ul li {

            width: 10px;

            height: 10px;

            border: 1px solid #ccc;

            border-radius: 50%;

            margin-left: 8px;

            cursor: pointer;

        }

        ul li.active {

            background-color: orangered;

        }

        .arrow {

            width: 60px;

            height: 60px;

            font-size: 30px;

            text-align: center;

            line-height: 60px;

            color: white;

            background-color: rgb(186, 240, 240);

            opacity: 0.2;

            position: absolute;

            top: 0;

            bottom: 0;

            margin: auto;

            cursor: pointer;

            user-select: none;

        }

        .arrow:hover {

            opacity: 0.6;

        }

        .left {

            left: 0px;

        }

        .right {

            right: 0px;

        }

    </style>

<div class="box">

        <img src="" alt="" id="img">

        <ul>

            <!-- <li class="active"></li>

        </ul>

        <div class="right arrow">&gt;</div>

        <div class="left arrow">&lt;</div>

    </div>

这里我们要先引入jquery，因为我是以jquery的方式去写的

 <script>

下面的数组是图片的地址

        let imgs = [

            'http://p1.music.126.net/ki3TM2tt0abtK0bidRkk2Q==/109951166163229260.jpg?imageView&quality=89',

            'http://p1.music.126.net/DYXaY--WYhAEhIKkdZPKGQ==/109951166247502142.jpg?imageView&quality=89',

            'http://p1.music.126.net/GzX8dMNzSxZvnFRAmjFDFg==/109951166247478728.jpg?imageView&quality=89',

            'http://p1.music.126.net/_l9QReWvbAHvqBspgiPr3Q==/109951166164220741.jpg?imageView&quality=89',

            'http://p1.music.126.net/6_0t7EQczN7rei2IoHQBAw==/109951166164247744.jpg?imageView&quality=89',

            'http://p1.music.126.net/mqJTg7kaMBwDtvNyHeJiZQ==/109951166247560952.jpg?imageView&quality=89'

        ]

        // 定义一个数组下标

        let index = 0

        //   // 小圆点点击事件(当点击事件在创建事件的前面时。会失效，所以需要通过事件委托的方式，创建点击事件)

        //  $('ul').on('click','li',function(){

        //      index=$(this).index()

        //      change()

        //  })

        // 根据图片的数量创建小点

        imgs.forEach(function (item, index) {

            let li = $('<li>')

            if (index === 0) {

                li.addClass('active')

                $('#img').attr('src', item)

            }

            $('ul').append(li)

        })

        // 自动轮播的效果

        let timer = null

        function run() {

            timer = setInterval(() => {

                if (++index >= imgs.length) {

                    index = 0

                }

                change()

            }, 1500);

        }

        run()

        

        // 切换图片和高亮的方法

        function change() {

            $('#img').attr('src', imgs[index])

            $('ul li').eq(index).addClass('active').siblings('.active').removeClass('active')

        }

        //  左箭头按钮点击事件

        $('.left').click(function () {

            if (--index < 0) {

                index = imgs.length - 1

            }

            change()

        })

        // 右箭头按钮点击事件

        $('.right').click(function () {

            if (++index >= imgs.length) {

                index = 0

            }

            change()

        })

        // 每个小点的点击事件

        $('li').click(function () {

            index = $(this).index()

            change()

        })

        // 鼠标进入事件

        $('.box').mouseenter(function () {

            clearInterval(timer)

        })

        // 鼠标离开事件

        $('.box').mouseleave(function(){

            run()

        })

    </script>