基于CSS3、JavaScript实现轮播图翻页，自动播放

发布时间：2022-08-18 18:16

前言

回顾实现轮播图时，发现淘宝、小米和京东等首页使用的轮播图翻页均是用CSS3 tranlate3D实现的，这与之前使用绝对定位，更改left值或绝对定位，更改index值实现翻页效果的方法不同，于是尝试了一下。

提示：以下是本篇文章正文内容，下面案例可供参考

一、效果图

二、HTML结构

代码如下（示例用4个轮播图片）：

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">
    <link rel="stylesheet" href="css/banner.css">
    <title>Documenttitle>
head>
<body>
    <div class="banner">
        <a href="#" class="btn btn-l"><a>
        <a href="#" class="btn btn-r">>a>

        <ul>
            <li><a href="#"><img src="img/focus.jpg" alt="">a>li>
            <li><a href="#"><img src="img/focus1.jpg" alt="">a>li>
            <li><a href="#"><img src="img/focus2.jpg" alt="">a>li>
            <li><a href="#"><img src="img/focus3.jpg" alt="">a>li>
        ul>
        <ol>
        ol>
    div>
    <script src="js/banner.js">script>
body>
html>

三、主要原理

1. 单图显示原理

盒子宽高固定，只够放一张图。超出部分隐藏overflow:hidden。

有人可能会说，盒子宽高=图片宽高，可是如何一行显示4张图片呢？设置ul的宽度为100%*图片数量，并且设置li标签浮动即可。

1.1 主要代码

.banner {
    position: relative;
    width: 500px;
    height: 300px;
    z-index: 1;
    overflow: hidden;
}
.banner ul {
    width: 500%;
    height: 100%;
    transition: all .3s;
}
.banner ul li{
    float: left;
}

2. 图片翻页原理

2.1 移动

设置translateX（当然可以用translate3D），每点击一次向左或向右翻页按钮，实现一次水平移动，移动距离为图片宽度。

2.2 过渡

设置过渡时间transition，达到过渡效果。

2.3 最后一张图片“右翻页”

① 先将第一张图片复制到轮播图末尾

② 最后一张右翻页正常翻页到新的最后一页

③ 以过渡时间为0秒翻页到第一页

④从第一页正常翻页到第二页
提示：第一张向左翻页同理。

3. 下方小圆圈按钮翻页原理

计算目标translateX值，公式：-（目标位置*图片宽度）。加过渡时间移动即可。

/**
 * 轮播图移动
 * @method imgMove
 * @param {number} index 目标位置
 * @param {number} moveTime 过渡时间
 */
function imgMove(moveTime) {
    var distance = -index * bannerWidth; //计算translateX移动距离
    banner_ul.style = 'transform:translateX(' + distance + 'px);' + 'transition:all ' + moveTime + 's'; //开始移动
    // 排它思想
    for (var i = 0; i < banner_ol.children.length; i++) {
        banner_ol.children[i].className = '';
    }
    // 更改样式
    if (index <= banner_ol.children.length - 1) {
        banner_ol.children[index].className = 'current'
    } else {
        banner_ol.children[0].className = 'current'
    }
}

4. 自动播放原理

使用setInterval函数，每time秒翻页即可（如向右翻页按钮click事件）。

// 自动播放-定时器
setInterval(function () {
    time++;
    if (time == 3) {
        // 点击向右按钮
        btn_r.click();
        time = 0;
    }
}, 1000)

注意事项

图片移动可只使用同一个函数imgMove，同一个当前位置变量index。当发生向左右翻页或小圆圈按钮翻多页，设置index增量即可。
小圆圈按钮应与实际图片数量保持相同的数量。
为小圆圈按钮增添点击事件可以使用事件委托。

// 为小圆圈按钮增加点击事件（事件委托）
// 为小圆圈按钮增加点击事件（事件委托）
banner_ol.addEventListener('click', function (e) {
    // 防止点击事件点到ol其他空白区域
    if (e.target.tagName == 'LI') {
        time = 0;
        // 排它思想
        for (var i = 0; i < banner_ol.children.length; i++) {
            banner_ol.children[i].className = '';
        }
        // 更改样式
        e.target.className = 'current'
        // 获取当前小圆圈按钮data-index
        var btnIndex = e.target.dataset.index;
        index = btnIndex;
        imgMove(0.3)
    }
})

总结

以上就是今天的主要内容，本文仅仅简单介绍了基本原理。具体实现还有很多细节要注意，如样式的选择、定位、布局和排他思想的使用等等。作者水平有限，如有错误烦请批评指正。

完整代码：点击下载