用backgroundImage解决图片轮播切换

isLishude 发布于2019-08-30 15:44 / 2820人阅读

摘要：单节点实现轮播利用可以添加多张图片，以及位置偏移实现轮播效果创建一个并用给附图片利用调节位置利用调节过渡即可替代简单的图片切换播放图片源代码

单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)
        }
    }

源代码

云服务器 GPU云服务器五图轮播切换 html轮播切换代码图片轮播图片android轮播

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/116212.html

vue组件之轮播图实现

摘要：预览地址图片的轮播假设需要轮播三张图片，以前的思路就如图所示，添加两个节点。通过索引的切换实现组件的无缝轮播。这样子父组件就可以通过钩子和来实时通知子组件，从而控制内容的展示。这个判断只需让子组件来做就行了。预览地址图片的轮播 showImg(https://segmentfault.com/img/remote/1460000018606875?w=1440&h=900); 假设...

xuweijian 2019-08-23 16:13 评论0 收藏0
手把手教你用原生JavaScript造轮子（2）——轮播图（更新：ES6版本）

摘要：绑定轮播事件然后是鼠标移入移出事件的绑定鼠标移入移出事件移入时停止轮播播放的定时器，移出后自动开始下一张的播放。通过上一篇文章的学习，我们基本掌握了一个轮子的封装和开发流程。那么这次将带大家开发一个更有难度的项目——轮播图，希望能进一步加深大家对于面向对象插件开发的理解和认识。 So, Lets begin! 目前项目使用 ES5及UMD 规范封装，所以在前端暂时只支持标签的引入方式...

jasperyang 2019-08-23 10:57 评论0 收藏0
JS实现轮播图思路整理

摘要：结构层表现层实现原理通过改变图片的偏移量来实现图片的切换实现步骤通过获取页面需要操作的元素获取轮播图父容器获取图片列表获取图片切换圆点按钮获取向左切换箭头获取向右切换箭头实现左 html结构层 ...

Anonymous1 2019-08-29 11:07 评论0 收藏0
JS实现轮播图思路整理

摘要：结构层表现层实现原理通过改变图片的偏移量来实现图片的切换实现步骤通过获取页面需要操作的元素获取轮播图父容器获取图片列表获取图片切换圆点按钮获取向左切换箭头获取向右切换箭头实现左 html结构层 ...

Meathill 2019-08-21 14:16 评论0 收藏0
JS实现轮播图思路整理

摘要：结构层表现层实现原理通过改变图片的偏移量来实现图片的切换实现步骤通过获取页面需要操作的元素获取轮播图父容器获取图片列表获取图片切换圆点按钮获取向左切换箭头获取向右切换箭头实现左 html结构层 ...

keithyau 2019-08-01 15:35 评论0 收藏0