乐趣区

关于轮播图:原生JS实现轮播图

jiezi

轮播图原理就是图片的挪动。所有轮播图片横向排列，在一个窗口中显示一张图片，窗口外的图片暗藏，每一次一排图片就是挪动一张图片的间隔，切换到下一张图片，即可实现图片轮播。

图片的挪动有两种形式：

  1. translate 实现的图片挪动
  2. position定位实现图片的偏移

图片的自动播放，那必然用到定时器吧，而且是距离定时器 setInterval

该案例实现成果：

  • 图片自动播放
  • 点击两头圆点按钮，实现图片任意切换
  • 点击左右箭头按钮，实现图片左右切换
  • 图片的切换对应小圆点的款式变动，即每一个小圆点对应一张图片

先来看一下效果图：

html格局：

<!-- 引入 css 款式 -->
<link rel="stylesheet" href="./demo.css">

<div class="banner_container">
    <!-- 6 张图片 -->
    <ul class="img_box">
        <li><img src="图片 4" alt=""></li>
        <li><img src="图片 1" alt=""></li>
        <li><img src="图片 2" alt=""></li>
        <li><img src="图片 3" alt=""></li>
        <li><img src="图片 4" alt=""></li>
        <li><img src="图片 1" alt=""></li>
    </ul>

    <!-- 两头圆点 -->
    <ul class="sel_box">
        <!-- 自定义属性 -->
        <li data-index="0"></li>
        <li data-index="1"></li>
        <li data-index="2"></li>
        <li data-index="3"></li>
    </ul>

    <!-- 左箭头 -->
    <div class="left_btn">&lt;</div>
    <!-- 右箭头 -->
    <div class="right_btn">&gt;</div>
</div>

<!-- 引入 js 代码 -->
<script src="./demo.js"></script>

大家别被骗了，这里轮播图只实现 4 张图片的播放，至于另外多出的两张，其实另有用途

第一张图片搁置的其实四张轮播图中的最初一张，第 6 张图片其实是四张轮播图中的第一张，目标很简略，就是为了实现图片无缝轮播，上面用到的中央会阐明哈

CSS款式

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

.banner_container {
    position: relative;
    margin: 100px;
    width: 400px;
    height: 250px;
    /* 超出暗藏 */
    overflow: hidden;  
}

ul.img_box {
    position: absolute;
    left: 0;
    top: 0;
    /* html 中的第一张图片不是咱们想要显示，第二张才是咱们轮播图的第一张图片因而要让这排图片往左挪动一张图片的间隔 */
    transform: translateX(-400px);
}

.img_box li {
    float: left;
    list-style: none;
}

/* 图片大小 */
.img_box li img {width: 400px;}

/* 小圆点 */
.sel_box {
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
}

.sel_box li {
    list-style: none;
    /* 转换为行内块元素 -- 一行显示 */
    display: inline-block;
    width: 10px;
    height: 10px;
    background-color: pink;
    margin-right: 3px;
    border-radius: 5px;
    transition: all 0.4s;
}

/* 左箭头 */
.left_btn {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 25px;
    height: 30px;
    background-color: #fff;
    line-height: 30px;
    padding-left: 3px;
    /* 将鼠标款式改为小手 */
    cursor: pointer;
}

.right_btn {
    position: absolute;
    top: 50%;
    left: 375px;
    transform: translateY(-50%);
    width: 25px;
    height: 30px;
    background-color: #fff;
    line-height: 30px;
    padding-left: 5px;
    cursor: pointer;
}


/* 以后图片的小图点款式 */
.sel_box .cur {
    background-color: red!important;
    transform: scale(1.3);
}

这是简略的 css 款式，大家能够依据本人爱好自行编写款式

JavaScript

下面的 html 构造 和 css 款式大家能够履行设置，轮播图的实现才是咱们的重头戏

1、获取相干标签变量

let img_box = document.querySelector('.img_box');
let imgs = document.querySelectorAll('img');
let sel_box = document.querySelector('.sel_box')
let lis = sel_box.querySelectorAll('li');
let left_btn = document.querySelector('.left_btn');
let right_btn = document.querySelector('.right_btn');
// 记录第几张图片
let index = 0;  
let timer = null;  // 定时器

设置容器以及以后图片小圆点初始款式

// 设置图片容器大小
// imgContainerW：img_box 自身宽度，为 400
let imgContainerW = img_box.offsetWidth
img_box.style.width = imgContainerW * imgs.length + 'px'
// 设置容器地位
img_box.style.left = 0 + 'px';

// 设置第一个小图片作为以后按钮
lis[0].className = 'cur'

咱们将罕用的操作封装成函数，简化代码构造

2、轮播图切换

function swapImg() {
    // 批改 img_box 的定位，往左偏移 index * imgContainerW
    img_box.style.left = -index * imgContainerW + 'px';
    // 排他算法
    for (let i = 0; i < lis.length; i++) {lis[i].className = '';
    }
    // 批改小图标的款式
    lis[index].className = 'cur'
}

3、轮播切换法则

当咱们的图片切换到四张轮播图的最初一张，下一张应该是第一张，然而这样间接切回第一张没有了过渡成果，咱们想要的是四张轮播图片像是一个圆，始终无缝循环

所以咱们就在四张轮播图的再前面放上第一张图片，当四张轮播图切换完后，下一张就切换到新增的这第一张图片，切换结束，咱们再 趁机切换到四张图片的第一张，留神这次切换时无过渡成果的，这样图片播放又从第一张图片开始。

这就像魔术一样，只有够快，齐全可能狡兔三窟，骗过观众智慧的双眼，而这齐全能够实现

function swapFormat() {
    index++;  // 进入下一张图片
    // 如果是在最初一张图片
    if (index >= 4) {
        // 此处是为了避免频繁点击按钮，index++，导致 index 超过 4，变成 5、6、7...
        // 当 index>=4，咱们强行让其等于 4, 相似防抖
        index = 4;  
        img_box.style.transition = 'all, linear, 1s';
        img_box.style.left = -index * imgContainerW + 'px';
        for (let i = 0; i < lis.length; i++) {lis[i].className = '';
        }
        // 批改小图标的款式
        lis[0].className = 'cur'
    
        // 此处就是咱们为实现无缝轮播，做的手脚 
        // 通过延时定时器，当图片过渡完，立即马上切换到第一张图片
        setTimeout(function() {
            index = 0;  // 第一张图片
            img_box.style.transition = '';  // 无适度
            swapImg();}, 1500)
    
        // 如果是其它图片，失常过渡切换
    } else {
        img_box.style.transition = 'all, linear, 1.5s';
        swapImg();}
}

4、增加距离定时器

// 增加定时器，调用函数
timer = setInterval(swapFormat, 3000)

5、右箭头

// 点击右箭头，图片挪动形式与自动播放一样
right_btn.addEventListener('click', function() {swapFormat();
})

6、左箭头

点击左箭头与右箭头相同，图片往左挪动，索引须要减一；同理，咱们首张搁置的就是四张轮播图片的最初一张，其用途也是在这里，拿它来做个“跳板”，先过渡这张图片再切换到真正的最初一张，无缝轮播

// 点击左箭头
left_btn.addEventListener('click', function() {
    index--;
    // 如果要切换到第四章
    if (index < 0) {
        index = -1
        img_box.style.transition = 'all, linear, 1.5s';
        img_box.style.left = -index * imgContainerW + 'px';
        for (let i = 0; i < lis.length; i++) {lis[i].className = '';
        }
        // 批改小图标的款式
        lis[3].className = 'cur'
    
        // "出老千", 迅速切换
        setTimeout(function() {
            index = 3
            img_box.style.transition = '';
            swapImg();}, 1000)
    
    } else {
        img_box.style.transition = 'all, linear, 1.5s';
        swapImg();}
})

7、革除和开启定时器

// 当鼠标在图片上、左箭头、右箭头时革除定时器，即图片不轮播
img_box.addEventListener('mouseover', function() {clearInterval(timer)
})

right_btn.addEventListener('mouseover', function() {clearInterval(timer)
})

left_btn.addEventListener('mouseover', function() {clearInterval(timer)
})

// 当鼠标来到图片、左箭头、右箭头时开启定时器，即图片持续轮播
img_box.addEventListener('mouseout', function() {timer = setInterval(swapFormat, 3000)
})

left_btn.addEventListener('mouseout', function() {timer = setInterval(swapFormat, 3000)
})

right_btn.addEventListener('mouseout', function() {timer = setInterval(swapFormat, 3000)
})

总结：

  1. 咱们要在全局上申明一个 index 变量来记录目前是第几张图片，这样无论咱们在点击左箭头还是右箭头或是小圆点之后，下一步的操作能力接着咱们下面的图片进行轮播
  2. 实现图片无缝轮播救是在轮播图的后面和前面搁置“跳板图片”，供咱们跳转到正确的图片应用
退出移动版