详解用backgroundImage解决图片轮播切换
发布时间:2019-08-07 15:29:07 作者:西安小哥 我要评论
这篇文章主要介绍了详解用backgroundImage解决图片轮播切换,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
单dom节点实现轮播
利用backgroundImage可以添加多张图片,以及位置偏移实现轮播效果
- 创建一个div;并用backgroundImage给div附图片
- 利用backgroundPosition调节位置
- 利用css3 transition调节过渡
- 即可替代简单的图片切换
/** * 播放图片 */ function playImage(src) { if (animaitionFinshed) return; if (!_imageEl) { _imageEl = document.createElement('div') _imageEl.className = `swiper_container`; _imageEl.style.backgroundImage = `url(${src.url})`; _imageEl.setAttribute("data-img", src.url); elContainer.appendChild(_imageEl); } else { animaitionFinshed = true; let width = elContainer.clientWidth, height = elContainer.clientHeight; let preImage = _imageEl.getAttribute("data-img"); _imageEl.style.backgroundImage = `url(${preImage}),url(${src.url}) `; _imageEl.style.backgroundPositionX = `center,${width + 20}px`; setTimeout(() => { _imageEl.style.transition = "all 0.8s ease"; _imageEl.style.backgroundPositionX = `-${width + 20}px,center`; }, 0); setTimeout(() => { _imageEl.style.transition = "none"; _imageEl.style.backgroundImage = `url(${src.url}) `; _imageEl.style.backgroundPositionX = `center`; _imageEl.setAttribute("data-img", src.url) animaitionFinshed = false; }, 800) } }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
相关文章
- 今天我们学习如何使用CSS创建一个炫酷的图片轮播组件。感兴趣的朋友跟随小编一起看看吧2019-05-24
- 本篇文章主要介绍了纯css3实现轮播图效果实例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧2017-05-04
- 图片轮播效果在各大网站都能用到,本文给大家分享通过纯css3制作轮播效果图的思路,感兴趣的朋友一起看看吧2016-08-25
最新评论