轮播图

功能的实现

主要功能有自动轮播，点击左右箭头轮播，鼠标移上下方圆点轮播

几个图片都是叠加在一起，通过z-index和透明滤镜来控制显示，

代码书写

css样式

 * {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style: none;
        }

        .slider {
            width: 590px;
            height: 470px;
            border: 5px solid black;
            position: relative;
            overflow: hidden;
        }

        .slider .list li {
            position: absolute;
            opacity: 0;
            transition: opacity .3s;
        }

        .slider .list li.current {
            opacity: 1;
            z-index: 2;
        }

        .btn {
            position: absolute;
            top: 50%;
            width: 80px;
            height: 40px;
            background: black;
            color: white;
            opacity: .3;
            z-index: 3;
            font-size: 35px;
            text-align: center;
            line-height: 40px;
            border-radius: 10px;
            cursor: pointer;
            user-select: none;

        }

        .btn:hover {
            opacity: 1;
        }

        .prev {
            left: -20px;
        }

        .next {
            right: -20px;
        }

        .pagination {
            position: absolute;
            bottom: 20px;
            z-index: 2;
            left: 30px;
        }

        .pagination li {
            float: left;
            margin-left: 10px;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: white;
            opacity: .5;
            border: 3px solid rgba(255, 66, 0, .2);
            cursor: pointer;
        }

        .pagination li:hover {
            opacity: 1;
        }

html代码

 <div class="slider">
        <ul class="list">
            <li class="current"><a href="#1"><img src="./imgs/pic (1).jpg" alt=""></a></li>
            <li><a href="#2"><img src="./imgs/pic (2).jpg" alt=""></a></li>
            <li><a href="#3"><img src="./imgs/pic (3).jpg" alt=""></a></li>
            <li><a href="#4"><img src="./imgs/pic (4).jpg" alt=""></a></li>
        </ul>
        <!-- 箭头 -->
        <div class="btn prev">&lt;</div>
        <div class="btn next">&gt;</div>
        <!-- 圆点 -->
        <ul class="pagination">
            <li class="bullet"></li>
            <li class="bullet"></li>
            <li class="bullet"></li>
            <li class="bullet"></li>
        </ul>
    </div>

js代码

 //定义一个全局变量，来表示当前显示的图片的索引
        var currentIndex = 0;

        // 将轮播切换到指定的图片上
        function slideTo(index) {

            if (index === 4) {
                index = currentIndex = 0
            }

            if (index === -1) {
                index = currentIndex = 3;
            }
            var lis = document.querySelectorAll('.slider .list li');
            //清除旧焦点
            //xxx.classList.remove(yyyClass)
            //xxx.classList.add(xxxClass)


            //取得当前图片，切换图片，使上一张图片隐藏，下一张显示
            document.querySelector('.current').classList.remove('current');
            lis[index].classList.add('current')

        }
        //定义函数实现点击左右箭头轮播
        function slideNext() {
            currentIndex++
            slideTo(currentIndex)
        }
        function slidePrev() {
            currentIndex--
            slideTo(currentIndex)
        }


        //绑定事件执行左右箭头点击事件
        document.querySelector('.slider .prev').onclick = function () {
            slidePrev()
        }

        document.querySelector('.slider .next').onclick = function () {
            slideNext()
        }
        


        //取得所有的圆形点，依次遍历
        var bullets = document.querySelectorAll('.pagination .bullet');
        for (var i = 0; i < bullets.length; i++) {
            bullets[i].index = i;

            //鼠标滑过实现轮播
            bullets[i].onmouseover = function () {
                // console.log(this.index);
                currentIndex = this.index;
                slideTo(currentIndex)
            }
        }
        

        //鼠标移上图片停止轮播
        document.querySelector('.slider').onmouseover = function () {
            stop()
        }
         //鼠标移开图片继续轮播
        document.querySelector('.slider').onmouseout = function () {
            auto()
        }
        //自动轮播
        var id;
        function auto() {
            id = setInterval(function () {
                slideNext();
            }, 3000)
        }
        //停止轮播
        function stop() {
            clearInterval(id)
        }
        auto();

由于是第一次发表，对很多地方还不是很熟悉，可能有些地方写的不好，或者说不知道怎么写，有什么问题我会尽力改正，谢谢！