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

前言

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


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

一、效果图

基于CSS3、JavaScript实现轮播图翻页,自动播放_第1张图片

二、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。
基于CSS3、JavaScript实现轮播图翻页,自动播放_第2张图片
有人可能会说,盒子宽高=图片宽高,可是如何一行显示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. 图片翻页原理

基于CSS3、JavaScript实现轮播图翻页,自动播放_第3张图片

2.1 移动

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

2.2 过渡

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

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

① 先将第一张图片复制到轮播图末尾
基于CSS3、JavaScript实现轮播图翻页,自动播放_第4张图片

② 最后一张右翻页正常翻页新的最后一页
基于CSS3、JavaScript实现轮播图翻页,自动播放_第5张图片
③ 以过渡时间为0秒翻页到第一页
基于CSS3、JavaScript实现轮播图翻页,自动播放_第6张图片
④从第一页正常翻页到第二页
基于CSS3、JavaScript实现轮播图翻页,自动播放_第7张图片提示:第一张向左翻页同理。

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)

注意事项

  1. 图片移动可只使用同一个函数imgMove,同一个当前位置变量index。当发生向左右翻页或小圆圈按钮翻多页,设置index增量即可。
  2. 小圆圈按钮应与实际图片数量保持相同的数量。
  3. 为小圆圈按钮增添点击事件可以使用事件委托。
// 为小圆圈按钮增加点击事件(事件委托)
// 为小圆圈按钮增加点击事件(事件委托)
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)
    }
})

总结

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

完整代码:点击下载

你可能感兴趣的:(前端,css3,javascript)