本文实例为大家分享了js实现左右轮播图的具体代码,供大家参考,具体内容如下
我的轮播图功能有:自动播放,点击焦点切换和点击左右按钮切换
<>强效果图:
自动轮播
点击焦点切换
点击左右按钮切换
注意:本文用带背景颜色的李标签指代图片,有需要的话可以将图片插入李标签内
<>强思路:
基础布局和css样式
(1)给盛放要轮播的图片的盒子绝对定位
js中的代码
(2)复制第一张图片放在盒子最后,复制最后一张图片放在盒子最前,以保证轮播图左右滑动效果(否则看起来会有一点卡顿)
(3)设置盒子位置,通过移动这个盒子的位置,产生图片移动的效果,用定时器设置轮播效果
(4)设置鼠标划入停播事件,设置按钮点击事件,设置焦点点击事件
(5)解决点击太快定时器混乱问题,解决切屏后定时器混乱问题
<强>一布局,
& lt; !——布局——比;
& lt; section>
& lt; ul>
& lt;李祝辞1 & lt;/li>
李& lt;在2 & lt;/li>
李& lt;在3 & lt;/li>
& lt;/ul>
& lt; ol> & lt;/ol>
& lt; div>
& lt; a href="祝辞,lt; & lt;/a>
& lt; a href="祝辞,gt; & lt;/a>
& lt;/div>
<强>二样式,
* {
保证金:0;
填充:0;
}
ul、
ol,
李{
list-style:没有;
}
一个{
文字修饰:没有;
}
节{
宽度:300 px;
保证金:30 px汽车;
身高:200 px;
边界:5 px固体;
位置:相对;/*溢出:隐藏;*/}
ul {
宽度:300%;
高度:100%;
text-align:中心;
行高:200 px;
字体大小:100 px;
位置:绝对的;
上图:0;
左:0;
}
李{
宽度:300 px;
高度:100%;
浮:左;
}
ol {
宽度:150 px;
高度:20 px;
位置:绝对的;
底部:20 px;
左:50%;
变换:translateX (-50%);
border - radius: 15 px;
显示:flex;
justify-content: space-evenly;
对齐项目:中心;
}
李ol {
宽度:15 px;
高度:15 px;
背景颜色:象牙;
这个特性:50%;
}
.active {
background - color: greenyellow;
}
<强>三原生js
1,获取元素
//1,获取盛放图片的盒子和盛放焦点的盒子
让ul=document.querySelector (“ul”)
让ol=document.querySelector (ol)//获取大盒子和大盒子的宽
让包装=document.querySelector(部分)
让wrap_width=wrap.clientWidth
2,添加焦点
const德意志联邦共和国=document.createDocumentFragment ()
(让我=0;我& lt;ul.children.length;我+ +){
我们专注=document.createElement(李)
frg.appendChild(重点)//焦点初始化
如果(i==0)的焦点。className='主动'
}
ol.appendChild(德意志联邦共和国)
3,复制元素
复制元素,将复制元素放在指定位置
改变盛放图片的盒子大小,改变图片位置,使页面打开时显示第一张图片
让第一次=ul.firstElementChild.cloneNode(真正的)
让去年=ul.lastElementChild.cloneNode(真正的)
ul.appendChild(第一个)
ul。方法(最后,ul.firstElementChild)
ul.style。宽度=ul.children。长度* 100 +‘%’
ul.style。左=-wrap_width +“px”
4,开始轮播
//设置一个图片索引
让指数=1//一会儿会用到这段代码,就直接封装成函数了
播放()
//自动播放函数,每隔两秒切换一次图片
函数自动播放(){
move_time=setInterval(()=比;｛
指数+ +
移动(ul、‘左’,指数* wrap_width, movend)
}, 2000)
}//运动函数,设置图片切换方式//参数避署,元素,类型,元素属性;价值,元素运动结束时属性值;cb()元素运动结束函数
函数移动(避署、类型值,cb) {//获取元素属性初始值
让spe=方法(getComputedStyle(避署)[型])//元素属性改变过程
change_timer=setInterval(()=比;｛
价值比;spe & # 63;spe +=5: spe -=5
避署。风格(类型)=spe +“px”
如果(值比;spe) {
如果(spe祝辞=价值){
clearInterval (change_timer)
cb ()
}
其他}{
如果(spe & lt;=值){
clearInterval (change_timer)
cb ()
}
}
},10)
}//运动结束函数//判断索引临界值,更改索引,更改盒子位置,使图片轮播//让焦点和图片配套
函数movend () {
如果(指数在=ul.children。长度- 1){
指数=1
ul.style。左=指数* wrap_width +“px”
}
如果(指数& lt;=0) {
指数=ol.children。长度- 1
ul.style。左=指数* wrap_width +“px”
}
(让我=0;我& lt;ol.children.length;我+ +){
ol.children[我]。className="
}
ol。孩子(指数- 1)。className='主动'
}
