利用 CSS3 实现的无缝轮播功能代码


Posted in HTML / CSS onSeptember 25, 2017

无缝轮播的原理图

利用 CSS3 实现的无缝轮播功能代码

1 . html的架构 :

<div class="layout">
    <div class="jd_banner">
        <ul class="clearfix">
            <li><a href="#"><img src="images/l1.jpg"></a></li>
            <li><a href="#"><img src="images/l2.jpg"></a></li>
            <li><a href="#"><img src="images/l3.jpg"></a></li>
            <li><a href="#"><img src="images/l4.jpg"></a></li>
            <li><a href="#"><img src="images/l5.jpg"></a></li>
            <li><a href="#"><img src="images/l6.jpg"></a></li>
            <li><a href="#"><img src="images/l7.jpg"></a></li>
            <li><a href="#"><img src="images/l8.jpg"></a></li>
            <li><a href="#"><img src="images/l1.jpg"></a></li>
        </ul>
    </div>
</div>

JavaScript:

/*轮播图*/
function banner() {
    var banner = document.querySelector('.banner');
    /*获取设备宽度*/
    var offsetWidth = banner.offsetWidth;
    /*图片容器*/
    var imageBox = banner.querySelector('ul:first-child');
    /*给图片容器添加过渡动画属性*/
    function addTransition() {
        imageBox.style.transition = 'all 0.5s';
        imageBox.style.webkitTransition = 'all 0.5s';
    }
    /*清除图片容器添加过渡动画属性*/
    function removeTransition() {
        imageBox.style.transition = 'none';
        imageBox.style.webkitTransition = 'none';
    }
    /*设置X轴定位*/
    function setTranslateX(offsetX) {
        imageBox.style.transform = 'translateX(' + offsetX + 'px)';
        imageBox.style.webkitTransform = 'translateX(' + offsetX + 'px)';
    }
    // 定义当前索引
    var index = 1;
    // 自动轮播
    var timer = setInterval(function () {
        index++;
        addTransition();
        setTranslateX(-index * offsetWidth);
        //同步设置css
        //底层异步操作
    }, 2000);
    transVar.transitionEnd(imageBox, function () { //监听每一次动画的结束
        if (index >= 9) { // 当轮播到第9张的时候,无缝切换到第1张图片
            index = 1;
            // 清除过渡
            removeTransition();
            //无动画效果的定位到第一张图片
            setTranslateX(-index * offsetWidth);
        } 
    });
  }

JavaScript : 监听动画结束事件

window.transVar = {};   //定义一个window的全局对象
//监听css3过渡动画的结束事件
transVar.transitionEnd = function(obj,callback){
    if (typeof  obj == 'object'){
        obj.addEventListener('webkitTransitionEnd',function(){  // 兼容写法
            callback && callback();  // && 运算符 , 如果callback函数存在,则调用callback()函数
        })
        obj.addEventListener('transitionEnd',function(){
            callback && callback();
        })
    }
}

小结 : 在利用CSS3实现无缝轮播时,一开始一直在纠结怎样做到无缝切换到第一张, 当初有一个比较单纯的想法

想着在轮播的过程中,直接判断是否到了第9张图片,然后调用removeTransition();取消过渡 , 然后改变index=1,让它无缝切换到第1张, 正当我信心满满以为完成了,却结果却给了我一巴掌!!!!!!

var timer = setInterval(function () {
        index++;
        addTransition();
        setTranslateX(-index * offsetWidth);
        if (index >= 9) {   // 当轮播到第9张时,不调用监听动画事件,直接取消过渡状态
            removeTransition();
            index = 1;
            setTranslateX(-index * offsetWidth);
        } 
    }, 2000);

那么….原因到底是为什么呢 ?

因为 CSS3的过渡是异步事件, 那时候的我恍然大悟,才意识到了自己的年少无知.

那么既然是异步事件, 我们就需要利用监听事件,来监听每一次过渡状态结束的时候,

然后再判断当前的下标是否到了最后一张,

再无动画状态的切换到第1张.

这就是完整是利用CSS3实现无缝轮播 , 平时多踩坑,然后通过自己研究解决,慢慢的自然而然的就不会犯这种问题了,前端的路漫漫,让我们继续加油!!!!!

HTML / CSS 相关文章推荐
css3 box-shadow阴影(外阴影与外发光)图示讲解
Aug 11 HTML / CSS
css3个性化字体_动力节点Java学院整理
Jul 12 HTML / CSS
用CSS3将你的设计带入下个高度
Aug 08 HTML / CSS
CSS3 Flexbox中flex-shrink属性的用法示例介绍
Dec 30 HTML / CSS
使用css3实现超炫的loading加载动画效果
May 07 HTML / CSS
纯CSS3发光分享按钮的实现教程
Sep 06 HTML / CSS
CSS3按钮鼠标悬浮实现光圈效果源码
Sep 11 HTML / CSS
详解通过变换矩阵实现canvas的缩放功能
Jan 14 HTML / CSS
html5 Canvas画图教程(7)—canvas里画曲线之quadraticCurveTo方法
Jan 09 HTML / CSS
使用html5 canvas创建太空游戏的示例
May 08 HTML / CSS
用HTML5制作一个简单的弹力球游戏
May 12 HTML / CSS
使用Html5实现异步上传文件,支持跨域,带有上传进度条
Sep 17 HTML / CSS
CSS3中伪元素::before和::after的用法示例
Sep 18 #HTML / CSS
css3 pointer-events 介绍详解
Sep 18 #HTML / CSS
详解CSS3选择器:nth-child和:nth-of-type之间的差异
Sep 18 #HTML / CSS
HTML5+CSS3 实现灵动的动画 TAB 切换效果(DEMO)
Sep 15 #HTML / CSS
CSS3 Calc实现滚动条出现页面不跳动问题
Sep 14 #HTML / CSS
基于CSS3 animation动画属性实现轮播图效果
Sep 12 #HTML / CSS
用css3写出气球样式的示例代码
Sep 11 #HTML / CSS
You might like
在PHP上显示JFreechart画的统计图方法
2013/11/03 PHP
php结合正则批量抓取网页中邮箱地址
2015/05/19 PHP
PHP微信PC二维码登陆的实现思路
2017/07/13 PHP
Redis在Laravel项目中的应用实例详解
2017/08/11 PHP
PHP常量及变量区别原理详解
2020/08/14 PHP
TNC vs RR BO3 第一场 2.14
2021/03/10 DOTA
复制本贴标题和地址的js代码
2008/07/01 Javascript
jQuery中append()方法用法实例
2014/12/25 Javascript
JavaScript学习笔记之检测客户端类型是(引擎、浏览器、平台、操作系统、移动设备)
2015/12/03 Javascript
JS数组操作(数组增加、删除、翻转、转字符串、取索引、截取(切片)slice、剪接splice、数组合并)
2016/05/20 Javascript
js和C# 时间日期格式转换的简单实例
2016/05/28 Javascript
基于JavaScript实现添加到购物车效果附源码下载
2016/08/22 Javascript
JavaScript易错知识点整理
2016/12/05 Javascript
Jquery实现跨域异步上传文件总结
2017/02/03 Javascript
微信小程序日历效果
2018/12/29 Javascript
vue实现微信二次分享以及自定义分享的示例
2019/03/20 Javascript
解决vue 表格table列求和的问题
2019/11/06 Javascript
ES6箭头函数和扩展实例分析
2020/05/23 Javascript
vue路由结构可设一层方便动态添加路由操作
2020/08/31 Javascript
Python使用CMD模块更优雅的运行脚本
2015/05/11 Python
一步步解析Python斗牛游戏的概率
2016/02/12 Python
浅析Python中MySQLdb的事务处理功能
2016/09/21 Python
详谈在flask中使用jsonify和json.dumps的区别
2018/03/26 Python
Django 实现图片上传和显示过程详解
2019/07/18 Python
django ModelForm修改显示缩略图 imagefield类型的实例
2019/07/28 Python
在Python中使用MySQL--PyMySQL的基本使用方法
2019/11/19 Python
Hertz荷兰:荷兰和全球租车
2018/01/07 全球购物
现代家居用品及礼品:LBC Modern
2018/06/24 全球购物
火箭队口号
2014/06/18 职场文书
主题团日活动总结
2014/06/25 职场文书
国际政治学专业推荐信
2014/09/26 职场文书
合理化建议书
2015/02/04 职场文书
廉政承诺书2015
2015/04/28 职场文书
试用1103暨1103、1101同门大比武 [ DAIWEI ]
2022/04/05 无线电
SQL Server中搜索特定的对象
2022/05/25 SQL Server
搭建zabbix监控以及邮件报警的超级详细教学
2022/07/15 Servers