轮播图可复制尝试效果

忧郁火龙果

已于 2022-06-29 19:00:43 修改

阅读量147

点赞数

分类专栏： JS基础文章标签： javascript 前端

于 2022-06-29 19:00:14 首次发布

本文链接：https://blog.youkuaiyun.com/LQlove1/article/details/125527696

版权

JS基础专栏收录该内容

48 篇文章

订阅专栏

一、功能步骤

隐藏所有图片，只显示第一张
点击按钮，切换图片
给右边按钮写切换功能 rightBtn
// 给左边按钮写切换功能 leftBtn
自动轮播效果 var autoPlay = setInterval(autoChange,2000);
// 鼠标移入图片停止计时器 , 显示按钮swiper.addEventListener(‘mouseover’ , stopChange);
鼠标移出图片开始计时器，隐藏按钮swiper.addEventListener(‘mouseout’ , startChange);
动态生成小圆点var li = document.createElement(‘li’);
circle.appendChild(li)
9.让小圆点跟随着pic一起动起来var lis = document.querySelectorAll(‘li’);
10.点击小圆圈，切换图片功能
// this指向被点击的小圆圈
this.className = ‘liColor’;
// 得到被点击的index，this指向被点击的按钮的index
var index = this.getAttribute(‘index’);
pic[index].className = ‘pic active’;
展示效果：
代码演示：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    * {
        margin: 0%;
        padding: 0%;
    }

    .swiper {
        position: relative;
        margin-left: 25%;
        margin-top: 200px;
    }

    .pic {
        width: 500px;
        height: 250px;
        position: absolute;
        opacity: 0;
        transition: all 1s;
    }
    .picPlus{
        display: none;
    }
    .active {
        display: block;
        opacity: 1;
    }

    /* 按钮布局 */
    .leftBtn,
    .rightBtn {
        position: absolute;
        cursor: pointer;
        display: none;
    }

    .leftBtn {
        width: 30px;
        height: 60px;
        background-color: rgba(136, 136, 136, 0.5);
        margin-top: 90px;
        background-image: url(./imgs/向左箭头.png);
        background-size: 30px 60px;
    }

    .rightBtn {
        width: 30px;
        height: 60px;
        background-color: rgba(136, 136, 136, 0.5);
        margin-left: 470px;
        margin-top: 90px;
        background-image: url(./imgs/向右箭头.png);
        background-size: 30px 60px;
    }

    .leftBtn:hover,
    .rightBtn:hover {
        background-color: rgba(159, 155, 155, 0.9);
    }
    /* 小圆圈样式 */
    .circle{
        height: 20px;
        /* background-color: rgb(0, 255, 30); */
        float: left;
        position: absolute;
        z-index: 10;
        margin-top: 220px;
        margin-left: 50px;
        list-style: none;
    }
    .circle li{
        width: 10px;
        height: 10px;
        border: 2px solid white;
        float: left;
        margin-left: 16px;
        border-radius: 50%;
        cursor: pointer;
    }
    .clearColor{
        background-color: rgb(0, 0, 0, .0);
    }
    .liColor{
        background-color: white;
    }
</style>

<body>
    <div class="swiper">
        <div class="pic active" id="pic"><img src="./imgs/210F2130512J47-0-lp.jpg" alt="" width="500px" height="250px"></div>
        <div class="pic" id="pic"><img src="./imgs/01a3c25b1cfc94a80121bbec79c2d0.jpg" alt="" width="500px" height="250px"></div>
        <div class="pic" id="pic"><img src="./imgs/200216115230-9-1200.jpg" alt="" width="500px" height="250px" ></div>
        <div class="pic" id="pic"><img src="./imgs/2106110ZPM4H-0-lp.jpg" alt="" width="500px" height="250px"></div>
        <div class="pic" id="pic"><img src="./imgs/24041224115258-lp.jpg" alt=""width="500px" height="250px"></div>
        <div class="leftBtn"></div>
        <div class="rightBtn"></div>
        <!-- 圆圈 -->
        <ul class="circle">
            
        </ul>
    </div>
    <script>
        // 轮播图原理
        // 1.隐藏所有图片，只显示第一张
        // 2.点击按钮，切换图片
        // 获取图片元素和按钮元素
        var pic = document.querySelectorAll('#pic');
        var leftBtn = document.querySelector('.leftBtn');
        var rightBtn = document.querySelector('.rightBtn');
        var swiper = document.querySelector('.swiper');
        var circle = document.querySelector('.circle');
        var index = 0;
// 给右边按钮写切换功能
        for (var i = 0; i < pic.length; i++) {
            // 给每个pic添加索引
            pic[i].setAttribute('index', i);
        }
        // 给按钮添加事件
        rightBtn.addEventListener('click', rightShift);
        function rightShift(){
            // 点击过后把所有pic隐藏
            for(var j = 0; j < pic.length; j++){
                pic[j].className = 'pic';
                // 隐藏小圆圈背景颜色
                lis[j].className = 'clearColor';
            }
            // 索引来显示当前图片
            if(index < pic.length - 1){
                index++
                pic[index].className = 'pic active';
                // 给小圆圈添加背景颜色
                lis[index].className = 'liColor';
            }else{
                index = 0;
                pic[index].className = 'pic active';
                // 给小圆圈添加背景颜色
                lis[index].className = 'liColor';
            }
        }
// 给左边按钮写切换功能
        leftBtn.addEventListener('click', leftShift);
        function leftShift(){
            // 点击过后把所有pic隐藏
            for(var j = 0; j < pic.length; j++){
                pic[j].className = 'pic';
                // 隐藏小圆圈背景颜色
                lis[j].className = 'clearColor';
            }
            // 索引来显示当前图片
            if(index >= 1){
                index--;
                pic[index].className = 'pic active';
                // 给小圆圈添加背景颜色
                lis[index].className = 'liColor';
            }else{
                index = 4;
                pic[index].className = 'pic active';
                // 给小圆圈添加背景颜色
                lis[index].className = 'liColor';
            }
        }

// 自动轮播效果
        var autoPlay = setInterval(autoChange,2000);
        function autoChange(){
            // 每隔一秒就隐藏所有pic
            for(var j = 0; j < pic.length; j++){
                pic[j].className = 'pic';
            // 每隔一秒就隐藏所有li背景颜色
                lis[j].className = 'clearColor';
            }
            if(index < pic.length - 1){
                index++
                pic[index].className = 'pic active';
            // 给小圆圈添加背景颜色
                lis[index].className = 'liColor';
            }else{
                index = 0;
                pic[index].className = 'pic active';
            // 给小圆圈添加背景颜色
                lis[index].className = 'liColor';
            }
        }
// 鼠标移入图片停止计时器 , 显示按钮
        swiper.addEventListener('mouseover' , stopChange);
        function stopChange(){
            clearInterval(autoPlay);
            leftBtn.style.display = 'block';
            rightBtn.style.display = 'block';
        }
// 鼠标移出图片开始计时器 ， 隐藏按钮
        swiper.addEventListener('mouseout' , startChange);
        function startChange(){
            autoPlay = setInterval(autoChange,2000);
            leftBtn.style.display = 'none';
            rightBtn.style.display = 'none';
        }
// 动态生成小圆点
        for(var i = 0 ; i < pic.length ; i++ ){
            var li = document.createElement('li');
            circle.appendChild(li)
        };
// 让小圆点跟随着pic一起动起来
        var lis = document.querySelectorAll('li');
        for(var i = 0 ; i < lis.length ; i++){
            lis[i].setAttribute( 'index' , i);
            // 初始化给第一个li添加类名
            lis[0].className = 'liColor';
        }
//点击小圆圈，切换图片功能
        for(var i = 0 ; i < lis.length ; i++){
            lis[i].addEventListener('click' , circleFn)
        }
        function circleFn(){
            for(var i = 0 ; i < lis.length ; i++){
                lis[i].className = 'clearColor';
                pic[i].className = 'pic';
            }
            // this指向被点击的小圆圈
            this.className = 'liColor';
            // 得到被点击的index，this指向被点击的按钮的index
            var index = this.getAttribute('index');
            pic[index].className = 'pic active';
        }
    </script>
</body>

</html>