-
2022-02-13 20:25:29
轮播图原理就是图片的移动。所有轮播图片横向排列,在一个窗口中显示一张图片,窗口外的图片隐藏,每一次一排图片就是移动一张图片的距离,切换到下一张图片,即可实现图片轮播。
图片的移动有两种方式:
translate
实现的图片移动position
定位实现图片的偏移
图片的自动播放,那必然用到定时器吧,而且是间隔定时器
setInterval
该案例实现效果:
- 图片自动播放
- 点击中间圆点按钮,实现图片任意切换
- 点击左右箭头按钮,实现图片左右切换
- 图片的切换对应小圆点的样式变化,即每一个小圆点对应一张图片
先来看一下效果图:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CVzTda66-1644755129156)(https://segmentfault.com/img/remote/1460000039947734)]
html
格式:<!-- 引入css样式 --> <link rel="stylesheet" href="./demo.css"> <div class="banner_container"> <!-- 6张图片 --> <ul class="img_box"> <li><img src="图片4" alt=""></li> <li><img src="图片1" alt=""></li> <li><img src="图片2" alt=""></li> <li><img src="图片3" alt=""></li> <li><img src="图片4" alt=""></li> <li><img src="图片1" alt=""></li> </ul> <!-- 中间圆点 --> <ul class="sel_box"> <!-- 自定义属性 --> <li data-index="0"></li> <li data-index="1"></li> <li data-index="2"></li> <li data-index="3"></li> </ul> <!-- 左箭头 --> <div class="left_btn"><</div> <!-- 右箭头 --> <div class="right_btn">></div> </div> <!-- 引入js代码 --> <script src="./demo.js"></script>
大家别被骗了,这里轮播图只实现4张图片的播放,至于另外多出的两张,其实另有用处
第一张图片放置的其实四张轮播图中的最后一张,第6张图片其实是四张轮播图中的第一张,目的很简单,就是为了实现图片无缝轮播,下面用到的地方会说明哈
CSS
样式* { padding: 0; margin: 0; box-sizing: border-box; } .banner_container { position: relative; margin: 100px; width: 400px; height: 250px; /* 超出隐藏 */ overflow: hidden; } ul.img_box { position: absolute; left: 0; top: 0; /* html中的第一张图片不是我们想要显示,第二张才是我们轮播图的第一张图片因此要让这排图片往左移动一张图片的距离 */ transform: translateX(-400px); } .img_box li { float: left; list-style: none; } /* 图片大小 */ .img_box li img { width: 400px; } /* 小圆点 */ .sel_box { position: absolute; bottom: 15px; left: 50%; transform: translateX(-50%); } .sel_box li { list-style: none; /* 转换为行内块元素 -- 一行显示 */ display: inline-block; width: 10px; height: 10px; background-color: pink; margin-right: 3px; border-radius: 5px; transition: all 0.4s; } /* 左箭头 */ .left_btn { position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 25px; height: 30px; background-color: #fff; line-height: 30px; padding-left: 3px; /* 将鼠标样式改为小手 */ cursor: pointer; } .right_btn { position: absolute; top: 50%; left: 375px; transform: translateY(-50%); width: 25px; height: 30px; background-color: #fff; line-height: 30px; padding-left: 5px; cursor: pointer; } /* 当前图片的小图点样式 */ .sel_box .cur { background-color: red!important; transform: scale(1.3); }
这是简单的
css
样式,大家可以根据自己喜好自行编写样式JavaScript
上面的
html
结构 和css
样式大家可以实行设置,轮播图的实现才是我们的重头戏1、获取相关标签变量
let img_box = document.querySelector('.img_box'); let imgs = document.querySelectorAll('img'); let sel_box = document.querySelector('.sel_box') let lis = sel_box.querySelectorAll('li'); let left_btn = document.querySelector('.left_btn'); let right_btn = document.querySelector('.right_btn'); // 记录第几张图片 let index = 0; let timer = null; // 定时器
设置容器以及当前图片小圆点初始样式
// 设置图片容器大小 // imgContainerW:img_box本身宽度,为400 let imgContainerW = img_box.offsetWidth img_box.style.width = imgContainerW * imgs.length + 'px' // 设置容器位置 img_box.style.left = 0 + 'px'; // 设置第一个小图片作为当前按钮 lis[0].className = 'cur'
我们将常用的操作封装成函数,简化代码结构
2、 轮播图切换
function swapImg() { // 修改img_box的定位,往左偏移 index * imgContainerW img_box.style.left = -index * imgContainerW + 'px'; // 排他算法 for (let i = 0; i < lis.length; i++) { lis[i].className = ''; } // 修改小图标的样式 lis[index].className = 'cur' }
3、轮播切换规律
当我们的图片切换到四张轮播图的最后一张,下一张应该是第一张,但是这样直接切回第一张没有了过渡效果,我们想要的是四张轮播图片像是一个圆,一直无缝循环
所以我们就在四张轮播图的再后面放上第一张图片,当四张轮播图切换完后,下一张就切换到新增的这第一张图片,切换完毕,我们再趁机切换到四张图片的第一张,注意这次切换时无过渡效果的,这样图片播放又从第一张图片开始。
这就像魔术一样,只要够快,完全能够掩人耳目,骗过观众智慧的双眼,而这完全可以实现
function swapFormat() { index++; // 进入下一张图片 // 如果是在最后一张图片 if (index >= 4) { // 此处是为了防止频繁点击按钮,index++,导致index超过4,变成5、6、7... // 当index>=4,我们强行让其等于4,类似防抖 index = 4; img_box.style.transition = 'all, linear, 1s'; img_box.style.left = -index * imgContainerW + 'px'; for (let i = 0; i < lis.length; i++) { lis[i].className = ''; } // 修改小图标的样式 lis[0].className = 'cur' // 此处就是我们为实现无缝轮播,做的手脚 // 通过延时定时器,当图片过渡完,立刻马上切换到第一张图片 setTimeout(function() { index = 0; // 第一张图片 img_box.style.transition = ''; // 无过度 swapImg(); }, 1500) // 如果是其它图片,正常过渡切换 } else { img_box.style.transition = 'all, linear, 1.5s'; swapImg(); } }
4、添加间隔定时器
// 添加定时器,调用函数 timer = setInterval(swapFormat, 3000)
5、右箭头
// 点击右箭头,图片移动方式与自动播放一样 right_btn.addEventListener('click', function() { swapFormat(); })
6、左箭头
点击左箭头与右箭头相反,图片往左移动,索引需要减一;同理,我们首张放置的就是四张轮播图片的最后一张,其用处也是在这里,拿它来做个“跳板”,先过渡这张图片再切换到真正的最后一张,无缝轮播
// 点击左箭头 left_btn.addEventListener('click', function() { index--; // 如果要切换到第四章 if (index < 0) { index = -1 img_box.style.transition = 'all, linear, 1.5s'; img_box.style.left = -index * imgContainerW + 'px'; for (let i = 0; i < lis.length; i++) { lis[i].className = ''; } // 修改小图标的样式 lis[3].className = 'cur' // "出老千",迅速切换 setTimeout(function() { index = 3 img_box.style.transition = ''; swapImg(); }, 1000) } else { img_box.style.transition = 'all, linear, 1.5s'; swapImg(); } })
7、清除和开启定时器
// 当鼠标在图片上、左箭头、右箭头时清除定时器,即图片不轮播 img_box.addEventListener('mouseover', function() { clearInterval(timer) }) right_btn.addEventListener('mouseover', function() { clearInterval(timer) }) left_btn.addEventListener('mouseover', function() { clearInterval(timer) }) // 当鼠标离开图片、左箭头、右箭头时开启定时器,即图片继续轮播 img_box.addEventListener('mouseout', function() { timer = setInterval(swapFormat, 3000) }) left_btn.addEventListener('mouseout', function() { timer = setInterval(swapFormat, 3000) }) right_btn.addEventListener('mouseout', function() { timer = setInterval(swapFormat, 3000) })
总结:
- 我们要在全局上声明一个
index
变量来记录目前是第几张图片,这样无论我们在点击左箭头还是右箭头或是小圆点之后,下一步的操作才能接着我们上面的图片进行轮播 - 实现图片无缝轮播救是在轮播图的前面和后面放置“跳板图片”,供我们跳转到正确的图片使用
更多相关内容 -
原生JS实现轮播图(含注释)
2019-02-23 14:52:52本代码主要使用js实现网页前端上常用轮播图,代码中含有清晰注释。 -
原生js实现轮播图淡入淡出&滚动效果
2018-11-20 17:41:51使用原生javascript实现图片轮播淡入淡出和滚动两种效果 -
原生js实现无缝轮播图
2020-10-15 19:13:16主要为大家详细介绍了原生js实现无缝轮播图,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 -
原生js实现轮播图特效
2020-11-21 03:35:47鼠标不经过轮播图,轮播图也会自动播放图片。 6.鼠标经过,轮播图模块, 自动播放停止。 此文章的代码为一个完整的轮播图的实现代码,复制即可运行 实现效果由于大小问题无法上传,可自行观看淘宝或京东首页轮播... -
原生js实现轮播图
2020-12-01 14:44:15本文实例为大家分享了js轮播图的具体实现代码,供大家参考,具体内容如下 CSS: <style> * { margin: 0; padding: 0; list-style: none; text-decoration: none; font-family: "Microsoft YaHei", ... -
原生JS实现图片左右轮播
2020-11-27 08:27:40本效果使用js实现,当图片移动到200像素后回到0像素再向右移动200像素一直左右移动,不需要marquee标签。 完整的HTML代码如下,保存到HTML文档打开可以查看效果: <!DOCTYPE html> <html> <head> &... -
原生 js 实现轮播图
2021-07-05 17:10:04一般而言轮播图都需要使用到动画效果,我这里是原生 js 手写一个动画,基于这个动画效果,在实现我们的轮播图。 封装了一个小插件,我把它命名为:slideshow .js ,源码如下: function animate(elem, options, ...一般而言轮播图都需要使用到动画效果,我这里是原生 js 手写一个动画,基于这个动画效果,在实现我们的轮播图。
封装了一个小插件,我把它命名为:slideshow .js
,源码如下:function animate(elem, options, callback) { if (elem == null){ //说明现在不是那个轮播图页面了 return; } let timer = null; let attribute = options.attribute; let startValue = parseFloat(window.getComputedStyle(elem)[attribute]); let endValue = parseFloat(options.value); let unit = options.value.substr(endValue.toString().length); if (!options.fluency) { options.fluency = 5;//流畅值,该值越小越流畅 } if (startValue == endValue) { if (callback != undefined) { callback.call(); } return; } function createTime() { return (+new Date); } let startTime = createTime(); function logic() { //开始时间 + 持续时间 - 当前时间,结果即为动画的剩余时间,当剩余时间小于0则置0,表示动画结束 let remaining = Math.max(0, startTime + options.duration - createTime()); //remaining/duration即为动画剩余的百分比,用1去减,得到已执行的百分比 let percent = 1 - (remaining / options.duration); let nowValue = (endValue - startValue) * percent + startValue; if (nowValue === 0){ elem.style[attribute] = nowValue; } else { elem.style[attribute] = nowValue + unit; } if (percent === 1) { clearInterval(timer); if (callback != undefined) { callback.call(); } return; } } timer = setInterval(logic, options.fluency); } let slideshow = { autoSlide:true,//是否自动轮播 animating:false,//当前对象是否正在执行动画 defaultWidth:1325,//对应于设计图1920px的宽度 width:1325,//根据当前屏幕宽度,适配的真正的宽度 unit:'px', ulSelector:'.hot ul', slideBoxSelector:'.slide-box', intervals:[],//定时器的集合,当我们离开页面时,需要清除它们 next(){ if(slideshow.animating) return; slideshow.animating = true; let ul = document.querySelector(slideshow.ulSelector); animate(ul, {attribute: 'left', value: -slideshow.width + slideshow.unit, duration:1500},function(){ ul.appendChild(ul.children[0]); ul.style.left = 0; slideshow.animating = false; }); }, prevEvent:function(){ let prevButton = document.getElementsByClassName("prev")[0]; prevButton.onclick = function(){ if(slideshow.animating) return; slideshow.animating = true; let ul = document.querySelector(slideshow.ulSelector); ul.style.left = -slideshow.width + slideshow.unit; ul.insertBefore(ul.children[ul.children.length-1],ul.children[0]); animate(ul,{ attribute: 'left', value: "0" + slideshow.unit, duration:1500},function(){ slideshow.animating = false; }); } }, nextEvent:function(){ let nextButton = document.getElementsByClassName("next")[0]; nextButton.onclick = function(){ slideshow.next(); } }, init:function(){ function run(){ slideshow.autoSlide = true; slideshow.animating = false; slideshow.intervals = []; let ul = document.querySelector(slideshow.ulSelector); if (ul == undefined){ return; } let liArr = ul.getElementsByTagName("li"); if(liArr.length<=1) return; let autoSlideInterval = setInterval(function(){ if(! slideshow.autoSlide) return; slideshow.next(); },8000); slideshow.intervals.push(autoSlideInterval); let slideBox = document.querySelector(slideshow.slideBoxSelector); slideBox.onmouseover = function(){ slideshow.autoSlide = false; } slideBox.onmouseout = function(){ slideshow.autoSlide = true; } slideshow.prevEvent(); slideshow.nextEvent(); } run(); /*如果您的页面使用的是 rem 单位,请解开以下注释,同时注释上一行run();*/ // let initInterval = setInterval(function () { // let remV = parseFloat(document.documentElement.style.fontSize); // if (remV != NaN){ // window.clearInterval(initInterval); // initInterval = null; // } else { // return; // } // if(initInterval != null){ // slideshow.intervals.push(initInterval); // } // slideshow.width = slideshow.defaultWidth/16*remV; // run(); // },100); }, //离开页面时调用 destroy:function () { for(let i = 0;i<slideshow.intervals.length;i++){ window.clearInterval(slideshow.intervals[i]); } } } /*如果您使用的vue,请解开以下注释 */ // export { // slideshow // }
这个插件怎么用呢,首先引入到html页面。
然后进行轮播图的布局。
布局采用的是大家常见的 无缝滚动轮播图。
HTML布局:<div class="slide-box"> <span class="prev"></span> <div class="hot"> <ul> <li style="background-color: gray;"> 轮播图1 </li> <li style="background-color: hotpink;"> 轮播图2 </li> <li style="background-color: #008c8c;"> 轮播图3 </li> </ul> </div> <span class="next"></span> </div>
CSS样式:
css样式是需要根据实际情况调整的
.slide-box { width: 1325px; height: 221px; margin: 66px auto 0; position: relative; } .slide-box .prev, .slide-box .next { display: block; width: 23px; height: 39px; position: absolute; top: 91px; cursor: pointer; } .slide-box .prev { /*background-image: url('../../assets/img/profile/zuo.png'); background-size: 100% 100%;*/ background-color: hotpink; left: -53px; } .slide-box .next { /*background-image: url('../../assets/img/profile/you.png'); background-size: 100% 100%;*/ background-color: blue; right: -53px; } .slide-box .hot { width: 1325px; height: 221px; overflow: hidden; } .slide-box .hot ul { width: 3975px; height: 221px; position: relative; } .slide-box ul li { width: 1325px; height: 221px; float: left; font-size: 80px; list-style: none; }
最后就是调用了,如果你使用的是vue,你可以这样:
import {slideshow} from './slideshow'; export default { data() { return { } }, components: { }, mounted() { slideshow.init(); }, beforeDestroy(){ slideshow.destroy(); }, created() { } } //同时注意解开前面slideshow.js里的相应注释
如果你使用的原生html,直接调用:
window.onload = function () { slideshow.init(); };
看看效果:
-
原生JS实现图片轮播切换效果
2020-10-20 21:13:53主要为大家详细介绍了原生JS实现图片轮播切换效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 -
原生js实现轮播图 详细解释
2021-01-11 19:41:50原生js实现轮播图 每一步都解释很详细 话不多说 上源码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, ...原生js实现轮播图
每一步都解释很详细
话不多说 上源码<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="../js/animate.js"></script> <style> * { padding: 0; margin: 0; } li { list-style: none; } img { vertical-align: top; } .wrapAll { width: 1226px; height: 460px; margin: 0 auto; margin-top: 100px; position: relative; overflow: hidden; } .slideBar { height: 460px; /* width: 4904px; */ width: max-content; position: absolute; left: 0; } .slideBar li { width: 1226px; float: left; } .dotList { position: absolute; right: 50px; bottom: 20px; display: flex; } .dotList li { width: 15px; height: 15px; background-color: #fff; margin: 5px; border-radius: 50%; } .dotList .active { background-color: blue; } .left, .right { width: 40px; height: 80px; background-color: rgba(0, 0, 0, 0.6); position: absolute; z-index: 999; } .left { left: 0; top: 50%; transform: translateY(-50%); /* margin-top:-40px; */ } .right { right: 0; top: 50%; transform: translateY(-50%); } </style> </head> <body> <div class="wrapAll"> <ul class="slideBar"> <li><img src="../images/1.jpg" alt=""></li> <li><img src="../images/2.jpg" alt=""></li> <li><img src="../images/3.jpg" alt=""></li> <li><img src="../images/4.jpg" alt=""></li> <li><img src="../images/1.jpg" alt=""></li> </ul> <ul class="dotList"> <li class="active"></li> <li></li> <li></li> <li></li> </ul> <div class="right"></div> <div class="left"></div> </div> </body> <script> var wrapAll = document.querySelector(".wrapAll"); var slideBar = document.querySelector(".slideBar"); var slideBarList = document.querySelectorAll(".slideBar li"); var liList = document.querySelectorAll(".dotList li"); var left = document.querySelector(".left"); var right = document.querySelector(".right"); var index = 0; //定义一个全局变量 索引 var timer = null; //定义一个全局timer 用来记时 var clientWidth = slideBarList[0].clientWidth; //获取图片的宽度 autoPlay(); for (let i = 0; i < liList.length; i++) { //循环遍历 获取小圆点 let li = liList[i]; li.onclick = function () { // 圆点li的点击事件 index = i; for (var j = 0; j < liList.length; j++) { //先清除所有效果 liList[j].className = ""; } liList[i].className = "active"; //给对应的点击的li赋予效果 animate(slideBar, "left", -clientWidth * index, "ease-out"); //公共样式animate.js 属性 属性值 终点 运动方式 } } left.onclick = function () { //左边点击事件 index--; auto(); } right.onclick = function () { //右边点击事件 index++; auto(); } wrapAll.onmouseenter = function () { //鼠标移入 clearInterval(timer); } wrapAll.onmouseleave = function () { //鼠标移出 autoPlay(); } function autoPlay() { clearInterval(timer); //清除计时器防止连续点击或移动触发的问题 timer = setInterval(function () { index++; auto(); }, 3000) } function auto() { //这么写的目的是防止有用户连续点击向左或者向右 所产生的问题 if (index < 0) { //点击向左运动 如果索引小于0 那么把index变成最后一个索引 index = slideBarList.length - 1; slideBar.style.left = -clientWidth * index + "px"; //此时left值为第五张图片所在 index--; //变成第四张我们所需要的图片 } if (index >= slideBarList.length) { //点击向左运动 如果索引大于slideBarList长度 此时最长的是第五张照片 也就是第一张 slideBar.style.left = 0; //利用视觉差跳回第一张图片 index = 0; //索引为第一张 index++; //索引增加 } for (var j = 0; j < liList.length; j++) { //循环遍历清除li的效果 liList[j].className = ""; } liList[index >= slideBarList.length - 1 ? 0 : index].className = "active"; //给对应的li增添效果 animate(slideBar, "left", -clientWidth * index, "ease-out", function () { if (index >= slideBarList.length - 1) { slideBar.style.left = 0; index = 0; } }) } </script> </html>
animate.js文件
function animate(ele, attr, end, aniType, fn) { // 1000 // var cur = ele.offsetLeft; // 初始值 记录盒子当前的位置(left) var cur = parseFloat(getStyle(ele, attr)); // 初始值 记录盒子当前的位置(left) var end = parseFloat(end); if (attr == "opacity") { // 如果是opacity 取值时 扩大100倍 cur *= 100; end *= 100; } // cur // 1. 点击时 记录盒子的初始位置 (初始值) // 2. 每隔固定的时间,进行累加/累减 (记录每次运动之后位置) var speed = 0; // 问题 公用一个全局timer 多个元素同时运动时 会相互影响 // ele 元素节点 => 本质(对象) => 可以自定义属性 // 解决办法 : 把计时器的编号存到元素自己本身上 clearInterval(ele.timer); ele.timer = setInterval(function () { if (aniType == "linear") { // 匀速运动 linear (normal) speed = end > cur ? 20 : -20; } else if (aniType == "ease-in") { // 加速 ease-in (fast) // end > cur ? speed++ : speed--; speed = end > cur ? speed + 5 : speed - 5; } else if (aniType == "ease-out") { // 缓冲运动 ease-out (slow) // (终点值 - 当前值)/缓冲因子 => 剩余的距离 / 缓冲因子 // 缓冲因子 一般在8-12 // 正向运动 (0-1000 speed正值) // speed = (end - cur) / 10; // speed = Math.ceil(speed); // 0.1111 => 1 // console.log(speed); // 反向运动 (1000-0 speed负值) // speed = (end - cur) / 10; // speed = Math.floor(speed); // -0.11111 => -1 // console.log(speed); speed = (end - cur) / 10; speed = end > cur ? Math.ceil(speed) : Math.floor(speed); } cur += speed; if (attr == "opacity") { // 如果是opacity 赋值时 缩小100倍 ele.style[attr] = cur / 100; } else { ele.style[attr] = cur + "px"; } // 临界值 if (Math.abs(end - cur) < Math.abs(speed)) { // 理想情况 cur == end clearInterval(ele.timer); if (attr == "opacity") { // 如果是opacity 赋值时 缩小100倍 ele.style[attr] = end / 100; } else { ele.style[attr] = end + "px"; } if (fn) { // 本次运动结束 如果传入了函数 就执行 fn(); } } }, attr == "opacity" ? 50 : 10); } function getStyle(ele, attr) { if (window.getComputedStyle) { return window.getComputedStyle(ele)[attr]; } else { return ele.currentStyle[attr]; } }
图片
-
原生js实现轮播图的示例代码
2020-10-20 09:23:51本篇文章主要介绍了原生js实现轮播图的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 -
利用原生JS实现轮播图效果
2021-12-06 11:06:52主要实现的是PC端的轮播,主要实现了以下功能: 自动循环轮播 鼠标进入停止轮播,鼠标移出开始自动轮播 点击上一张/下一张 点击轮播图底部的圆点实现图片的切换 思路:...主要实现的是PC端的轮播(移动端的轮播应该还要实现拖拽功能),主要实现了以下功能:
- 自动循环轮播
- 鼠标进入停止轮播,鼠标移出开始自动轮播
- 点击上一张或者下一张实现图片的切换
- 点击轮播图底部的圆点实现图片的切换
思路:
- 自动轮播封装了一个autoSwiper函数;
- 鼠标进入/移出封装了handleMouseEvent函数;
- 点击上一张/下一张封装了handleClickEvent函数;
- 点击轮播图底部的圆点实现图片的切换封装了handleClickIcon函数
这样封装的好处就是代码看起来更清晰,思路更明确,不会感觉一团糟的感觉。要实现以上功能,这个函数之间联系也十分紧密,比如autoSwiper函数可以正常实现,但是当执行了handleClickIcon函数后,可能会导致autoSwiper报错,因此十分谨慎的处理函数之间的公共变量。与这几个函数联系紧密的主要是swiperWidth(所有图片的宽度),startPosition(swiper当前的位置),swiperleft(swiper的left值);
现在具体介绍下具体的实现:
首先是HTML结构,有一点要十分注意,ul必须使用绝对定位(postion:absolute),后续的操作都是通过doc.style.left来改变其位置的:
<div class="swiper"> <div class="container"> <div class="swiper-wrapper"> <!-- 图片 --> <ul class="swiper-wrapper-box"> <li class="swiper-item banner-1"></li> <li class="swiper-item banner-2"></li> <li class="swiper-item banner-3"></li> </ul> </div> <!-- 左右箭头 --> <div class="arrow"> <div class="arrow-l"></div> <div class="arrow-r"></div> </div> <!-- 圆点 --> <div class="icon-box"> <ul class="icon-box-wrapper"> <li class="icon-item" data-index="1"></li> <li class="icon-item" data-index="2"></li> <li class="icon-item" data-index="3"></li> </ul> </div> </div> </div>
然后重点介绍下swiper.js(所有的业务逻辑都在这里):
刚开始要把需要用到的DOM元素获取到:
// 获取元素 var swiperWrapper = document.querySelector('.swiper-wrapper-box') var swiperItemList = document.querySelectorAll('.swiper-item ') var iconItemList = document.querySelectorAll('.icon-item') var swiper = document.querySelector('.swiper') // 转为数字组 var iconArrayList = Array.from(iconItemList)
接着要进行初始化操作:
// 初始化设置 var startPosition = 0 // 轮播图刚开始的位置为0 swiperWrapper.style.left = startPosition + 'px' var swiperleft = 0 // 定义轮播图初始wei位置为0 var unitWidth = 600 // 定义轮播图每次滚动的距离 var swiperWidth = unitWidth * (swiperItemList.length) // 整个轮播图的宽度 iconArrayList[0].classList.add('active') // 设置初始的激活icon为第一个 var index = 0 // 设置icon初始下标index为0 var intervelTime = 1000 // 设置轮播间隔时间 var isLoop = false // 是否为循环轮播
上面的准备工作做好后就可以开始功能的实现了,先来实现自动轮播的功能。这里必须要用到setInterval了:
// 实现自动轮播 var timer = setInterval(autoSwiper, intervelTime); // 自动轮播 function autoSwiper () { // 每次执行前将所有的active样式设置为空 iconArrayList.forEach(function (item) { item.classList.remove('active') }) // 判断是否循环轮播,是则从第二张开始 if (isLoop) { startPosition = unitWidth index = 1 isLoop = false } if (startPosition <= swiperWidth - unitWidth && index < iconArrayList.length) { swiperWrapper.style.left = -startPosition + 'px' // 获取swiper的left值 swiperleft = -parseInt(swiperWrapper.style.left) // 根据条件激活对应样式 if (startPosition == swiperleft) { iconArrayList[index].classList.add('active') } startPosition += unitWidth index++ } else { // 实现循环滚动 swiperWrapper.style.left = 0 + 'px' iconArrayList[0].classList.add('active') startPosition = 0 index = 0 isLoop = true } }
这个函数其实就做了三件事:
- 每次轮播前都必须把所有圆点激活样式清空;
- 自动轮播。自动轮播其实很好理解,难点在循环轮播;
- 循环轮播。判断是否轮播的依据为postion的值,当postion不符合条件时进行循环轮播,但是直接这样会出现个小Bug,就是轮播到第一张,再到第二张时候,间隔时间变长了,变为2s了,这是因为它执行了两次,因此我设置了一个中间变量isLoop,当isLoop为true时直接让它从第二张开始轮播。
接着是鼠标进入和移出的实现,这个功能主要用的是事件委托:
// 鼠标进入停止轮播/移出开始轮播 swiper.addEventListener('mouseover', handleMouseEvent) swiper.addEventListener('mouseout', handleMouseEvent) // 处理鼠标进入/移出事件 function handleMouseEvent (e) { var className = e.target.className if (e.type === 'mouseover') { if (className === 'arrow-l') { clearInterval(timer) } else if (className === 'arrow-r') { clearInterval(timer) } else if (e.target.classList.contains('swiper-item')) { clearInterval(timer) } else if (e.target.classList.contains('icon-item')) { clearInterval(timer) } } else { if (className === 'arrow-l') { timer = setInterval(autoSwiper, intervelTime) } else if (className === 'arrow-r') { timer = setInterval(autoSwiper, intervelTime) } else if (e.target.classList.contains('swiper-item')) { timer = setInterval(autoSwiper, intervelTime) } else if (e.target.classList.contains('icon-item')) { timer = setInterval(autoSwiper, intervelTime) } } }
然后是点击上一张/下一张。这里也要注意每次点击的时候要清除圆点的激活样式,还有循环轮播的问题。这里就是!!!特别要注意startPosition 的正负,这个值还会影响函数autoSwiper。
// 点击上一张/下一张 swiper.addEventListener('click', handleClickEvent) // 处理点击事件 function handleClickEvent (e) { // 获取类名 var className = e.target.className // 获取swiper的left值 swiperleft = -parseInt(swiperWrapper.style.left) if (className === 'arrow-l') { // 点击上一张 // 每次执行前将所有的active样式设置为空 iconArrayList.forEach(function (item) { item.classList.remove('active') }) startPosition = swiperleft - unitWidth index = startPosition / unitWidth if (startPosition >= 0) { swiperWrapper.style.left = -startPosition + 'px' iconArrayList[index].classList.add('active') } else { // 循环轮播 index = iconItemList.length - 1 swiperWrapper.style.left = - unitWidth * index + 'px' iconArrayList[index].classList.add('active') startPosition = swiperWidth } } else if (className === 'arrow-r') { // 点击下一张 // 每次执行前将所有的active样式设置为空 iconArrayList.forEach(function (item) { item.classList.remove('active') }) startPosition = -swiperleft - unitWidth index = Math.abs(startPosition) / unitWidth if (startPosition >= unitWidth - swiperWidth && startPosition <= 0) { swiperWrapper.style.left = startPosition + 'px' iconArrayList[index].classList.add('active') startPosition = Math.abs(startPosition) if (startPosition === unitWidth - swiperWidth) { startPosition = swiperWidth // 解决点击到最后一张,自动轮播到第一张报错的问题 } } else { // 循环轮播 index = 0 swiperWrapper.style.left = 0 + 'px' iconArrayList[index].classList.add('active') startPosition = 0 } } }
最后就是点击圆点切换图片 :
// 点击icon切换轮播图 swiper.addEventListener('click', handleClickIcon) // 处理点击icon切换轮播图事件 function handleClickIcon (e) { // 获取类名 var className = e.target.className if (className.substring(0, 9) === 'icon-item') { index = e.target.dataset.index - 1 // 每次执行前将所有的active样式设置为空 iconArrayList.forEach(function (item) { item.classList.remove('active') }) iconArrayList[index].classList.add('active') startPosition = index * unitWidth swiperWrapper.style.left = -startPosition + 'px' } }
-
原生JS实现的轮播图功能详解
2020-10-18 07:06:10主要介绍了原生JS实现的轮播图功能,结合实例形式分析了javascript实现轮播图的原理、操作技巧与相关注意事项,需要的朋友可以参考下 -
VUE中用原生js实现轮播图效果
2018-12-29 15:52:10JS部分: export default { name: 'Home', data () { return { productList: [ { ProductName: 'ET-NBAC-I', Description: 'ET-NBAC-I三相不平衡智能调控系统是一种智能实时调控装置,...', picSrc: ... -
原生JS实现无缝滚动轮播图
2019-03-11 19:23:45原生JS实现无缝滚动轮播图,使用相对定位进行无缝滚动,五张图的轮播只需五张图 -
原生JS实现轮播图效果
2020-10-17 21:30:31主要为大家详细介绍了原生JS实现轮播图效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 -
JS-Swiper:使用原生JS实现的无缝轮播图
2021-05-29 17:46:29原生JS无缝轮播图 ,如果无法打开预览,原因是部分运营商DNS污染(域名指往不正确的IP地址),可以通过 修改hosts文件 / 修改DNS服务器 / 代理 的方式访问 HTML部分 最外层是一个固定宽度且带有overflow: hidden;... -
原生js实现图片轮播特效
2020-11-23 02:38:48本文特意为原生js实现图片轮播特效代码做了下总结,分享给大家供大家参考,欢迎大家学习。 运行效果图: 具体代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <... -
原生js实现轮播图(左右活动+淡入淡出)详解.zip
2020-04-10 21:05:28功能:通过修改创建对象时的参数,可实现左右滑动轮播图或者淡入淡出轮播图 两种模式的区别主要体现在两种模式的不同布局与样式,具体详解请看代码注释。 此轮播图的前提是已经写好了html结构,结构上可适当增加图片... -
原生JS 实现轮播图效果
2022-05-13 23:58:53根据传入的图片数量在页面的底部呈现轮播图的图片数量和当前为第几张图片,点击相应的圆圈则可以跳转至其他图片;左右两个按钮同样可以实现图片的切换,如果当前为第一张或者最后一张图片,点击左移或者右移按钮即可... -
使用原生js实现轮播图效果
2021-01-12 23:53:27这几天在逛网站的时候,发现很多网站都有轮播图这个效果,所以我就仿照小米的官网用原生js写了一个轮播图效果,希望大家喜欢。下面我简单跟大家说一下我实现该效果的过程,如果有什么错误的地方,欢迎大家说出来,以... -
原生js实现轮播图的两种方法
2021-12-22 17:15:43原生js实现幻灯片效果(直接跳转法) 1.分析需求: 幻灯片的效果就是在一个可视区域里面,若干个图片进行交替出现,像在下面的图中,可视区域中的图是轮流出现的。 那么如何来实现这个效果呢,我百度了... -
原生 JS 实现轮播图
2021-09-08 09:52:02原生 JS 实现轮播图页面布局原理代码 页面布局 设置一个父容器作为遮罩,子容器包含了要播放的图片 子容器为flex布局使元素水平排列 子容器中的图片元素flex-shrink:0确保元素不被压缩 通过改变子容器的left实现轮播... -
原生js实现图片层叠轮播切换效果
2020-11-24 02:47:54本文实例介绍了js焦点图片层叠轮播切换滚动效果,分享给大家供大家参考,具体内容如下 效果图: 功能描述: 自定义图片尺寸; 每隔一段时间自动滚动图片; 每次动画执行的时候改变图片的位置,宽高以及其它... -
原生js实现点击轮播和自动轮播代码
2018-05-30 16:59:14利用javasScript实现图片轮播,具有1.自动播放(鼠标进入显示区域时停止播放) 2.左右焦点切换 3.底下小按钮切换 等功能