ps轮播图怎么实现(轮播图实现原理)

ps轮播图怎么实现(轮播图实现原理)

轮播图现在有很多现成的组件,网上也有很多的教程来教大家写一个轮播图,这里我们用最简单的方式去实现一个轮播图。

首先我们写出我们需要的页面元素,很简单,一个div嵌套着两个div+一个图片。

  <div class="box">
        <!-- 左侧按钮 --> <div class="box-left" onclick="left()"></div> <!-- 右侧按钮 --> <div class="box-right" onclick="right()"></div> <!-- 轮播图 --> <img id="swiper" class="swiper-img" src="image/1.jpg" alt=""> </div>

然后我们写一下这几个样式

.box {
    width: 100%;
    height: 100%;
    padding-top: 10%;
    display: flex;
    align-content: flex-start;
    align-items: center;
    justify-content: center;
}
   /* 采用绝对定位,在当前页面定位切换按钮的位置 */
.box-left {
    position: absolute;
    width: 50px;
    height: 200px;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    background-color: rgb(13, 167, 202);
 
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.box-right {
    position: absolute;
    width: 50px;
    height: 200px;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    background-color: rgb(13, 167, 202);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
.swiper-img {
    width: 100%;
    height: 100%;
}

最后我们再写下切换用的两个函数

//获取轮播图元素
        var el = document.getElementById('swiper');
        //待切换轮播图路径,组合成数组
        var image = ['image/1.jpg', 'image/2.jpg', 'image/3.jpg', 'image/4.jpg']
            //当前轮播图数组下标
        var i = 0;

        function left() {
            //默认赋值第一个路径
            el.src = image[i];
            //路径下标+1,切换路径
            i++;
            //路径下标超出数组长度,赋值为0
            if (i == image.length) {
                i = 0;
            }
        }

        function right() {
            //默认赋值第一个路径
            el.src = image[i];
            //路径下标-1,切换路径
            i--;
            //路径下标太低,赋值为数组长度-1
            if (i == -1) {
                i = image.length - 1;
            }
        }

JS函数已经尽量多的添加了注释,应该非常好理解。以后无论有多少张图片,都只需要把图片路径加到图片数组里就可以了。想自动切换就加个定时器。

(0)
上一篇 2023年12月28日 下午1:26
下一篇 2023年12月28日 下午1:27

相关推荐