详解用backgroundImage解决图片轮播切换
(编辑：jimmy 日期: 2024/11/12 浏览：2)
单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)
}
}
源代码
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。