请选择 进入手机版 | 继续访问电脑版

原生JS运动实现轮播图

[复制链接]
轩峰毅飞 发表于 2021-1-2 11:59:25 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
原生JS运动实现轮播图

**根本原理:**通过控制包罗n张图片的ul的left值来实现图片自动运动的效果,此中列表中li元素的个数为n,第一个li和最后一个li里存放的图片应为同一张图片,当图片运动到最后一张时,将ul的left值设为0,即可到达图片无线轮播的效果。
运动函数的实现

函数需传入元素(即需要到场运动的元素)、目的值(以对象的形式出现,如{left: 300})、callback(回调函数)。
  1. //多物体多值运动+回调机制function startMove(dom, attrObj, callback) {    var key = true;    var iSpeed = null,        iCur = null;    clearInterval(dom.timer);    if (key) {        dom.timer = setInterval(function() {        //bStop用来判定是否开始执行回调函数            var bStop = true;            //判定传入目的值中的“键”范例是否为opacity            for (var attr in attrObj) {            //若要改变的样式为opacity,则将元素的opacity扩大100被举行操纵                if (attr === 'opacity') {                    iCur = parseFloat(getStyle(dom, attr)) * 100;                } else {                    iCur = parseInt(getStyle(dom, attr));                }                //运动速度设为目的值减去当前值的一半,即当前状态离目的值越靠近,运动速度越小                iSpeed = (attrObj[attr] - iCur) / 2;                //对速度举行取整                iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);                if (attr === 'opacity') {                    dom.style.opacity = (iCur + iSpeed) / 100;                } else {                    dom.style[attr] = iCur + iSpeed + 'px';                }                if (iCur !== attrObj[attr]) {                    bStop = false;                }            }            //当bStop为true时,元素的所有样式均已到达目的值,清理定时器并执行回调函数            if (bStop) {                clearInterval(dom.timer);                typeof callback == 'function' && callback();            }        }, 30)    }    if (!key) {    }}//用来获取元素实时的样式值function getStyle(elem, prop){    if (window.getComputedStyle){        return window.getComputedStyle(elem, null)[prop];    }}
复制代码
HTML部分

HTML中包罗一个div,用来显示当前要播放的图片,该div中又包罗一个ul(用来存放所有包罗图片的li)、三个div(此中两个充当图片左右切换的按钮,第三个存放图片索引点,通过点击索引也可切换到要检察的图片),代码如下:
  1.    
  2. [list]        
  3. [*]            [img]https://www.jianchenwangluo.com/./image/dog/阿拉斯加.jpeg[/img]        
  4. [*]            [img]https://www.jianchenwangluo.com/./image/dog/比熊.jpeg[/img]        
  5. [*]            [img]https://www.jianchenwangluo.com/./image/dog/边牧.jpeg[/img]        
  6. [*]            [img]https://www.jianchenwangluo.com/./image/dog/柯基.jpeg[/img]        
  7. [*]            [img]https://www.jianchenwangluo.com/./image/dog/阿拉斯加.jpeg[/img]   
  8. [/list]    <
  9.     ">>
  10.                                        
复制代码
CSS代码

此处接纳的为内联样式表
  1.     *{        margin: 0;        padding: 0;        list-style: none;    }    .wrapper{        position: relative;        margin: 100px auto 0;        width: 600px;        height: 360px;        overflow: hidden;    }    .wrapper .sliderPage{        position: absolute;        left: 0;        width: 3000px;        height: 360px;    }    .wrapper .sliderPage li{        width: 600px;        height: 360px;        float: left;    }    .wrapper .sliderPage li img{        width: 100%;        height: 100%;    }    .btn{        position: absolute;        top: 50%;        width: 20px;        height: 20px;        color: #fff;        text-align: center;        line-height: 20px;        background-color: #000;        opacity: 0.2;        cursor: pointer;    }    .leftBtn{        left: 5px;    }    .rightBtn{        right: 5px;    }    .wrapper:hover .btn{        opacity: 0.8;    }    .sliderIndex{        position: absolute;        width: 100%;        bottom: 10px;        cursor: pointer;        text-align: center;    }    span{        width: 8px;        height: 8px;        background-color: #cccccc;        border-radius: 50%;        display: inline-block;        margin-right: 5px;    }    .active{        background-color: orange;    }
复制代码
图片自动运动及点击运动事件绑定

要点:
1、当图片运动到最后一张时(显示图片为第一张图片),将ul的left值设为0即可实现无限轮播;
2、图片每次运动的值为li的宽度;
3、图片的运动需要一定的时间,因此在图片运动过程中应克制产生别的定时器,否则会造成运动尺寸杂乱而导致图片轮播出现问题,这里用lock来举行实现,在ul运动过程中将lock值设为false,运动竣事后又将lock值设为true;
4、通过index值来实现索引显示图片功能,图片轮播过程中,index初始值为0,当图片向右轮播时index值加1,图片向左轮播时,index值减1,index值为0时,若让图片向左轮播,则将index值设为n(li个数)并举行轮播,而当index值为3且图片向右轮播时,在ul运动完成后将index值设为0;
  1. var timer = null;var sliderPage = document.getElementsByTagName(&#39;ul&#39;)[0];var moveWidth = sliderPage.children[0].offsetWidth;var num = sliderPage.children.length - 1;var leftBtn = document.getElementsByClassName(&#39;leftBtn&#39;)[0];var rightBtn = document.getElementsByClassName(&#39;rightBtn&#39;)[0];var lock = true;var index = 0;var indexArray = document.getElementsByClassName(&#39;sliderIndex&#39;)[0].getElementsByTagName(&#39;span&#39;);//索引切换for (var i = 0; i < indexArray.length; i ++){    (function(myindex){        indexArray[myindex].onclick = function(){            lock = false;            clearTimeout(timer);            index = myindex;            changeIndex(index);            startMove(sliderPage, {left: -index * moveWidth}, function(){                lock = true;                timer = setTimeout(autoMove, 3000);            })        }    }(i))}//图片运动过程中改变index点的样式function changeIndex(index){    for (var i = 0; i < indexArray.length; i++){        indexArray[i].className = &#39;&#39;;    }    indexArray[index].className = &#39;active&#39;;}timer = setTimeout(autoMove, 3000);//向左翻leftBtn.onclick = function (){    autoMove(&#39;right->left&#39;);}//向右翻rightBtn.onclick = function (){    autoMove(&#39;left->right&#39;);}//direction//默认轮播方向  &#39;left->right&#39; / undefined//点击left按钮 &#39;right->left&#39;function autoMove(direction){    clearTimeout(timer);    if (lock){        lock = false;        if (!direction || direction === &#39;left->right&#39;){            index++;            startMove(sliderPage, {left: sliderPage.offsetLeft - moveWidth}, function(){                if (sliderPage.offsetLeft === - num * moveWidth){                    index = 0;                    sliderPage.style.left = &#39;0px&#39;;                }                timer = setTimeout(autoMove, 3000);                lock = true;                changeIndex(index);            });        }else if(direction === &#39;right->left&#39;){            if (sliderPage.offsetLeft === 0){                index = num;                sliderPage.style.left = - num * moveWidth + &#39;px&#39;;            }            index--;            startMove(sliderPage, {left: sliderPage.offsetLeft + moveWidth}, function () {                timer = setTimeout(autoMove, 3000);                lock = true;                changeIndex(index);            })        }    }}
复制代码
以上即为通过原生JS运动所实现的图片轮播。

来源:https://blog.csdn.net/Bean_s/article/details/112002232
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则


专注素材教程免费分享
全国免费热线电话

18768367769

周一至周日9:00-23:00

反馈建议

27428564@qq.com 在线QQ咨询

扫描二维码关注我们

Powered by Discuz! X3.4© 2001-2013 Comsenz Inc.( 蜀ICP备2021001884号-1 )