原生js用div实现简单的轮播图

文章地址 https://www.cnblogs.com/sandraryan/

原生js实现轮播图。

打开页面图片自动轮播，点击prev next按钮切换到上/下一张图片，点击1-5切换到对应图片。

大概长这样 不用加图片，div就可以实现

css代码：

.wrap {
        /* 展示区域样式 */
        width: 500px;height: 400px;
        box-shadow: 0 0 10px rgba(0,0,0,.5);
        display: flex;
        overflow: hidden;
        position: relative;
    }
    .swipe {
        width: 2500px;
        display: flex;
        position: absolute;
        left: 0;
        /* 给图片变化添加过渡效果，时间不能超过定时器一次的时间，否则会冲突 */
        transition: .8s;
    }
    /* 被轮播的子元素样式 */
    .box{
        width: 500px;height: 400px;
        background-color: rgb(228, 226, 226);
        color: #fff;
        font-size: 200px;
    }
    button{
        width: 100px;height: 40px;
        margin: 10px 5px;
        border-radius: 8px;
        background-color: rgb(202, 202, 202);
        font-size: 22px;
        color: white;
    }

页面结构：

<!-- 一些按钮 -->
    <button class="prev">prev</button>
    <button class="next">next</button>
    <br>
    <button class="btn">one</button>
    <button class="btn">two</button>
    <button class="btn">three</button>
    <button class="btn">four</button>
    <button class="btn">five</button>
    <!-- 展示区域 -->
    <div class="wrap">
        <!-- 被轮播的元素父级 -->
        <div class="swipe">
            <!-- 被轮播的子元素列表 -->
            <div class="box">box1</div>
            <div class="box">box2</div>
            <div class="box">box3</div>
            <div class="box">box4</div>
            <div class="box">box5</div>
        </div>
    </div>

js代码：

 <script>
    // 获取元素
    var prev = document.querySelector(".prev");
    var next = document.querySelector(".next");
    var btns = document.querySelectorAll(".btn");
    var swipe = document.querySelector(".swipe");

    // 自动播放
    // 封装函数
    // 判断索引，改变left值的函数
    function nextFn(){
        index = index == 4 ? 0 : ++index;  
        // 定位元素left才会生效
        swipe.style.left = -index * 500 + "px";
    }

    // 定时器的函数
    function autoPlay(){
        autoTinmer = setInterval(function(){
        // left初始值为0，每张图片的left是图片宽度乘图片数量
        // 只有五张图片，能移动的left最大的left是四张图的，index等于4的时候恢复到0，否则index++
       nextFn();
    },2000);
    }
    // 页面一刷新就自动播放；
    autoPlay();
    // 声明当前展示的图片的顺序
    var index = -1;
    var autoTinmer;
   
    // 点击prev next
    next.onclick = function(){
        // 先停止自动播放 先展示完下一张
        clearInterval(autoTinmer);
        // 点击next立即展示下一张
        nextFn();
        //继续自动播放
        autoPlay();
    }
    prev.onclick = function(){
        clearInterval(autoTinmer);
        // 点击prev立即展示上一张
        index = index == 0 ? 4 : --index;
        swipe.style.left = -index * 500 + "px";
        autoPlay();
    }
    // 点击对应顺序按钮
    // 循环遍历所有1-5的button
    for(var j = 0; j < btns.length; j++){
        // 每一个btn绑定点击事件
        btns[j].onclick = function(){
            // 先停止自动播放的定时器
            clearInterval(autoTinmer);
            // 获取当前按钮在btns中的顺序获取到
            // 这里不能用indexOf方法，因为这是一个伪数组，不是一个数组，不能使用数组的方法
            // getAttribute获取为标签自定义html属性的值
            var i = this.getAttribute("data-i");
            // console.log(i);
            // 根据这个顺序设置swipe的left值
            swipe.style.left = - i * 500 + "px";
            // 恢复自动播放的定时器
            autoPlay();
        }
    }
    </script>

the end (●ˇ∀ˇ●)