利用 CSS3 实现的无缝轮播功能代码
发布时间:2017-09-25 09:20:08 作者:佚名 我要评论
本文通过实例代码给大家介绍了基于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实现无缝轮播 , 平时多踩坑,然后通过自己研究解决,慢慢的自然而然的就不会犯这种问题了,前端的路漫漫,让我们继续加油!!!!!
相关文章
- 这是一款jquery和css3响应式卡片图文列表轮播布局。基于owl-carousel图片滚动插件,通过bootstrap制作响应式卡片布局,组成炫酷的图文卡片轮播特效。感兴趣的朋友前来下载2019-05-15
- 这篇文章主要介绍了CSS3简易切割轮播图的实现代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学2020-12-09
- 轮播图,网页上经常能看得见,画面比较精美,下面是纯CSS3的轮播图的一种,感兴趣的朋友一起看看吧2019-11-11
- 本文给大家分享CSS3实现列表无限滚动/轮播效果,实现思路大概是将当前列表滚动至最后一项的末尾,然后瞬间切换回第一项,怎么实现无限轮播效果,下面小编给大家带来了实现2021-06-22
最新评论