详解用backgroundImage解决图片轮播切换
css
来源：互联网搜集
作者：秩名
发布时间：2019-08-08 08:53:35
人浏览
摘要
本篇文章介绍用backgroundImage解决图片轮播切换 单dom节点实现轮播 利用backgroundImage可以添加多张图片，以及位置偏移实现轮播效果 创建一个div；并用backgroundImage给div附图片 利用backgroundPosition调节位置 利用css3 transition调节过渡 即可替代简
本篇文章介绍用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)
}
}
|
源代码-[-/a>
|
版权声明 : 本文内容来源于互联网或用户自行发布贡献，该文观点仅代表原作者本人。本站仅提供信息存储空间服务和不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权， 违法违规的内容， 请发送邮件至2530232025#qq.cn(#换@)举报，一经查实，本站将立刻删除。
原文链接 : https://www.jb51.net/css/686976.html
