手撕js轮播,其实不难

ungame

已于 2022-04-16 06:20:59 修改

阅读量1.1k

点赞数

文章标签： javascript

于 2022-04-08 12:33:27 首次发布

本文链接：https://blog.youkuaiyun.com/A081127/article/details/124030433

版权

学了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>