利用 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新增颜色表示方式分享
Apr 15 HTML / CSS
深入浅析css3 中display box使用方法
Nov 25 HTML / CSS
关于css中margin的值和垂直外边距重叠问题
Oct 27 HTML / CSS
详解H5本地储存Web Storage
Jul 03 HTML / CSS
HTML5中的新元素介绍
Oct 17 HTML / CSS
HTML5 MiranaVideo播放器 (代码开源)
Jun 11 HTML / CSS
html5 兼容IE6结构的实现代码
May 14 HTML / CSS
在html5的Canvas上绘制椭圆的几种方法总结
Jan 07 HTML / CSS
简单的HTML5初步入门教程
Sep 29 HTML / CSS
HTML5有哪些新特征
Dec 01 HTML / CSS
关于解决iframe标签嵌套问题的解决方法
Mar 04 HTML / CSS
CSS3鼠标悬浮过渡缩放效果
Apr 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的autoload自动加载机制使用说明
2010/12/28 PHP
使用php验证复选框有效性的示例
2013/11/13 PHP
PHP如何解决微信文章图片防盗链
2020/12/09 PHP
javascript IE中的DOM ready应用技巧
2008/07/23 Javascript
javascript中使用css需要注意的地方小结
2010/09/01 Javascript
基于JQuery的Select选择框的华丽变身
2011/08/23 Javascript
jquery 提交值不为空的元素示例代码
2013/05/10 Javascript
jquery下拉select控件操作方法分享(jquery操作select)
2014/03/25 Javascript
JavaScript使用pop方法移除数组最后一个元素用法实例
2015/04/06 Javascript
JavaScript动态创建form表单并提交的实现方法
2015/12/10 Javascript
js实现分割上传大文件
2016/03/09 Javascript
angular+ionic返回上一页并刷新页面
2017/08/08 Javascript
不到200行 JavaScript 代码实现富文本编辑器的方法
2018/01/03 Javascript
JavaScript设计模式之代理模式简单实例教程
2018/07/03 Javascript
bootstrap动态调用select下拉框的实例代码
2018/08/09 Javascript
通过JS运行机制的角度说说作用域
2019/03/12 Javascript
AjaxFileUpload.js实现异步上传文件功能
2019/04/19 Javascript
vue element-ui el-date-picker限制选择时间为当天之前的代码
2019/11/07 Javascript
手把手带你搭建一个node cli的方法示例
2020/08/07 Javascript
vue中使用腾讯云Im的示例
2020/10/23 Javascript
Python装饰器使用实例:验证参数合法性
2015/06/24 Python
python获取局域网占带宽最大3个ip的方法
2015/07/09 Python
Python常用的爬虫技巧总结
2016/03/28 Python
Python注释详解
2016/06/01 Python
Python爬虫爬取美剧网站的实现代码
2016/09/03 Python
Python进阶_关于命名空间与作用域(详解)
2017/05/29 Python
TensorFlow利用saver保存和提取参数的实例
2018/07/26 Python
详解Python3中的迭代器和生成器及其区别
2018/10/09 Python
浅析python3字符串格式化format()函数的简单用法
2018/12/07 Python
python3利用Axes3D库画3D模型图
2020/03/25 Python
Python3+PyCharm+Django+Django REST framework配置与简单开发教程
2021/02/16 Python
澳大利亚礼品篮网站:Macarthur Baskets
2019/10/14 全球购物
送餐员岗位职责范本
2014/02/21 职场文书
2015年四年级班主任工作总结
2015/10/22 职场文书
2016廉洁从政心得体会
2016/01/19 职场文书
详解Mysq MVCC多版本的并发控制
2022/04/29 MySQL