- 学了vue2也实现了一些小demo,但是也不能不巩固下js,就写了个轮播
- 刚开始学时很难，现在自己实现，就会觉得没有那么难
- 布局是基本的就不详细说了，主要是要把图片全部放到一个位置层叠起来，因为我用的opacity来实现显示
-
步骤如下，详细看代码
-
先把图片的全部li设置opacity为0隐藏，第一张图片opacity为1显示一
-
定义下一张图片函数
- 全局定义了a初始值为0
- 函数里设置a++,加之前 //图片索引+之前先把之前的图片隐藏相应的圆点颜色也先变成白
- 加之前还要判断是否超过最后一张，是的话让a等于第一张
- 加之后 //图片索引+之后先把的图片显示相应的圆点颜色也先变成红
- 加上对应的节流操作
-
间隔一段时间自动出现下一张图片
- 用定时器，定时器里放刚才定义的函数调用
-
点击切换下一张图片
- 点击事件函数里设置a减减,减之前 //图片索引减之前先把之前的图片隐藏相应的圆点颜色也先变成白
- 减之前还要判断是否少于0，是的话让a等于最后一张
- 减之后 //图片索引+之后先把的图片显示相应的圆点颜色也先变成红
-
点击切换上一张图片
- 点击事件里放置调用上面定义的下一张函数
-
移入图片时停止图片自动播放
- 移入事件时设置停止定时器操作即可
-
移出时自动播放
- 移出事件里用定时器，定时器里放刚才定义的函数调用
-
图片有相片对应的圆点数，点第几个出来第几张图片
- 定义一个for循环i 长度等于圆点数也图片数
- 给圆点元素设置点击事件其索引是i,的点击事件
- 事件里改变上面定义的a的值等于i,使点击那个圆点索引对应的就是那张图片的索引
- 在设置多一个for循环j 长度也是圆点数量
- 里层for循环j里面重置圆点的颜色都为白和图片都隐藏
- for循环j外层下一行代码就可以设置圆点元素索引为a的颜色为红色 图片元素索引为a的图片显示
- 相应的逻辑代码都在下面
<body>
<div id="di">
<ul id="uls">
<li class="frist"><a href=""><img src="./assets/1.jpg" alt=""></a></li>
<li><a href=""><img src="./assets/2.jpg" alt=""></a></li>
<li><a href=""><img src="./assets/3.jpg" alt=""></a></li>
<li><a href=""><img src="./assets/4.jpg" alt=""></a></li>
<li><a href=""><img src="./assets/5.jpg" alt=""></a></li>
<li><a href=""><img src="./assets/6.jpg" alt=""></a></li>
</ul>
<ol>
<li id="lt"> <</li>
<li id="gt"> ></li>
</ol>
<div id="didi">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</div>
<script>
let uls=document.getElementById('uls')
let lt=document.getElementById('lt')
let gt=document.getElementById('gt')
let di=document.getElementById('di')
let lis=document.querySelectorAll('ul li')
let didi=document.querySelectorAll('#didi li')
//定义节流锁
let lock=true;
//定义切换图片索引数
let a=0；
//定义定时开关
let timer1;
// 定义下一张图片函数和节流
function mose(){
if(!lock) return;
lock=false
//图片索引+之前先把之前的图片隐藏相应的圆点颜色也先变成白
lis[a].style.opacity=0
didi[a].style.backgroundColor="#fff"
a++
if(a==6){
a=0
}
//图片索引+之后先把图片显示相应的圆点颜色也先变成红
lis[a].style.opacity=1
didi[a].style.backgroundColor="red"
setTimeout(()=>{
lock=true;
},500)
}
自动切换图片
timer1=setInterval(()=>{
mose()
},2000)
//移入图片时停止播放
di.addEventListener('mouseenter',()=>{
clearInterval(timer1)
})
//离开图片时播放
di.addEventListener('mouseleave',()=>{
setInterval(()=>{
mose()
},2000)
})
// 点击上一张切换
lt.addEventListener('click',()=>{
if(!lock) return;
lock=false
lis[a].style.opacity=0
didi[a].style.backgroundColor="#fff"
a--
if(a==-1){
a=5
}
lis[a].style.opacity=1
didi[a].style.backgroundColor="red"
setTimeout(()=>{
lock=true;
},500)
})
// 点击下一张图片切换
gt.addEventListener('click', mose
)
// 点击圆点切换到对应的图片
for (let i=0; i<didi.length; i++){
didi[i].addEventListener('click',function(){
a=i
for (let j=0; j<didi.length; j++){
lis[j].style.opacity=0
didi[j].style.backgroundColor="#fff"
}
lis[a].style.opacity=1
didi[a].style.backgroundColor="red"
})
}
</script>
</body>
</html>
251
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
