幽灵资源网 Design By www.bzswh.com
本文实例为大家分享了JS实现无缝轮播图的具体代码,供大家参考,具体内容如下
运动插件
function animove(obj,distance,speed,callback) { //调用的变量 目标距离 速度 回调函数 clearInterval(obj.timer); obj.timer = setInterval(function () { let step = (distance - obj.offsetLeft) / 10; step = step > 0 "htmlcode">* { margin: 0; padding: 0; } ul,li { list-style: none; } .box { width: 1226px; height: 460px; margin: 100px auto; position: relative; overflow: hidden; } .pic-box { width: 4904px; position: absolute; } .pic-box > li { float: left; } .point { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); } .point > li { float: left; width: 8px; height: 8px; border: 1px solid blueviolet; margin: 0 4px; border-radius: 50%; } .point > .active { background-color: orange; } .left-btn, .right-btn { width: 50px; height: 40px; background-color: rgba(0,0,0,.5); text-align: center; line-height: 40px; font-size: 20px; color: white; position: absolute; top: 50%; transform: translateY(-50%); } .left-btn { left: 0; } .right-btn { right: 0; }HTML代码
<div class="box"> <ul class="pic-box"> <li> <img src="/UploadFiles/2021-04-02/lb.webp">js代码
let picbox = document.querySelector('.pic-box'); let pic = document.querySelectorAll('.pic-box > li'); //由于获取的不是动态的 所以之后的克隆 并不会使这个变量发生改变 let point = document.querySelector('.point'); let leftbtn = document.querySelector('.left-btn'); let rightbtn = document.querySelector('.right-btn'); let carouselindex = 0; //通过for循环 生成小圆点 并将圆点添加到ul里 for (let i = 0; i < pic.length; i ++) { let pointli = document.createElement('li'); pointli.classList.add(i); point.appendChild(pointli); } //给第一个小圆点默认添加active point.children[0].classList.add('active'); //克隆第一个图片 深度 let kelon = picbox.children[0].cloneNode(true); picbox.appendChild(kelon); //将图片添加到最后位置 //获取所以圆点 let pointli = document.getElementsByClassName('point')[0].getElementsByTagName('li'); //轮播方法 function carousel(index) { let distance = (-index * pic[0].offsetWidth); //计算行走的距离 图片的index值乘以图片的大小 animove(picbox,distance,10); //调用运动函数 for (let i = 0; i < pointli.length; i ++) { //for循环移除每个小点的选中状态 pointli[i].classList.remove('active'); } if (index != pic.length) { //如果不等于pic的长度 就执行 pointli[index].classList.add('active'); } else { //如果索引值为3 说明此时图片为克隆的图 而圆点的最大索引值为2 将第一个圆点设置为active即可正常显示圆点状态 point.children[0].classList.add('active'); } } Array.prototype.forEach.call(pointli,function (item,index) { //给每个圆点添加点击事件 item.addEventListener('click',function () { carouselindex = index; //将点击的索引值赋值给轮播索引全局变量 carousel(carouselindex); }) }); rightbtn.addEventListener('click',function () { //右边点击事件 carouselindex ++; //每次点击全局轮播索引增加 if (carouselindex > pic.length) { //如果索引大于图片数量 由于数量大小获取的是静态的 所以长度不会因为克隆变化而变化 picbox.style.left = "0px"; //如果大于索引说明此时要离开克隆的那张图 此时迅速将left值设置为0 carouselindex = 1; //然后将索引设置为1 } carousel(carouselindex); //这时候就在left为0的位置 过渡到索引1的位置 实现无缝轮播的效果 }); leftbtn.addEventListener('click',function () { //左边点击事件 carouselindex --; //减减 if (carouselindex < 0) { //如果索引值小于0 carouselindex = 2; //将索引值设置为2 picbox.style.left = "-3678px"; //将位置迅速变换为第四张图的位置(克隆的图) } carousel(carouselindex); //由克隆的图过渡到索引为2的图(第三张图) })精彩专题分享:jQuery图片轮播 JavaScript图片轮播 Bootstrap图片轮播
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
标签:
js,轮播图
幽灵资源网 Design By www.bzswh.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
幽灵资源网 Design By www.bzswh.com
暂无评论...