利用 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 相关文章推荐
一款利用html5和css3实现的3D立方体旋转效果教程
Apr 26 HTML / CSS
利用CSS3实现动态的二级三级菜单效果实例源码
Jan 04 HTML / CSS
推荐10个CSS3 制作的创意下拉菜单效果
Feb 11 HTML / CSS
一款纯css3实现的漂亮的404页面的实例教程
Nov 27 HTML / CSS
浅谈CSS3中的变形功能-transform功能
Dec 27 HTML / CSS
纯html5+css3下拉导航菜单实现代码
Mar 18 HTML / CSS
html5使用canvas绘制一张图片
Dec 15 HTML / CSS
详解HTML5中div和section以及article的区别
Jul 14 HTML / CSS
推荐10个HTML5响应式框架
Feb 25 HTML / CSS
html5调用app分享功能示例(WebViewJavascriptBridge)
Mar 21 HTML / CSS
Html5原生拖拽相关事件简介以及基础实现
Nov 19 HTML / CSS
html+css实现分层金字塔的实例
Jun 02 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
main.php
2006/12/09 PHP
php简单静态页生成过程
2008/03/27 PHP
CentOS 6.2使用yum安装LAMP以及phpMyadmin详解
2013/06/17 PHP
php实现生成带二维码图片并强制下载功能
2018/02/24 PHP
PHP SPL 被遗落的宝石【SPL应用浅析】
2018/04/20 PHP
laravel-admin 管理平台获取当前登陆用户信息的例子
2019/10/08 PHP
基于Jquery实现表格动态分页实现代码
2011/06/21 Javascript
THREE.JS入门教程(6)创建自己的全景图实现步骤
2013/01/25 Javascript
利用jQuery的deferred对象实现异步按顺序加载JS文件
2013/03/17 Javascript
jquery js 获取时间差、时间格式具体代码
2013/06/05 Javascript
jQuery在html有效在jsp无效的原因及解决方法
2013/08/02 Javascript
IE8中动态创建script标签onload无效的解决方法
2014/12/22 Javascript
JavaScript生成随机字符串的方法
2015/03/19 Javascript
数据分析软件之FineReport教程:[5]参数界面JS(全)
2015/08/13 Javascript
jquery模拟实现鼠标指针停止运动事件
2016/01/12 Javascript
浅谈js中用$(#ID)来作为选择器的问题(id重复的时候)
2017/02/14 Javascript
vue.js删除动态绑定的radio的指定项
2017/06/02 Javascript
JavaScript中正则表达式判断匹配规则及常用方法
2017/08/03 Javascript
使用nodeJS中的fs模块对文件及目录进行读写,删除,追加,等操作详解
2020/02/06 NodeJs
云服务器部署Node.js项目的方法步骤(小白系列)
2020/03/23 Javascript
uniapp实现横向滚动选择日期
2020/10/21 Javascript
ant design vue导航菜单与路由配置操作
2020/10/28 Javascript
python删除列表内容
2015/08/04 Python
python strip() 函数和 split() 函数的详解及实例
2017/02/03 Python
python单线程下实现多个socket并发过程详解
2019/07/27 Python
python已协程方式处理任务实现过程
2019/12/27 Python
Python利用Pillow(PIL)库实现验证码图片的全过程
2020/10/04 Python
通过实例解析python and和or使用方法
2020/11/14 Python
python自动从arxiv下载paper的示例代码
2020/12/05 Python
美国高品质个性化珠宝销售网站:Jewlr
2018/05/03 全球购物
中学生演讲稿
2014/04/26 职场文书
企业党员岗位承诺书
2015/04/27 职场文书
清明扫墓感想
2015/08/11 职场文书
Spring Security中用JWT退出登录时遇到的坑
2021/10/16 Java/Android
解决MySQL添加新用户-ERROR 1045 (28000)的问题
2022/03/03 MySQL
vue中this.$http.post()跨域和请求参数丢失的解决
2022/04/08 Vue.js