前端-js：轮播图

学校官网都会有图片轮播，包括自动轮播及手动切换。

1. 原理：

在有限的区域内展示图片。

整个图片部分是一个胶卷，当哪个图片在窗口位置展示哪个图片。

自动轮播：每隔一段时间调相对位置。

2. 实现

$1. 放5张图片

<div class="container"><ul class="img_box"><!-- tu3 --><li><img src="img/轮播1.png" alt=""></li><li><img src="img/轮播2.png" alt=""></li><li><img src="img/轮播3.png" alt=""></li><li><img src="img/轮播4.png" alt=""></li><li><img src="img/轮播5.png" alt=""></li><!-- tu1 --></ul><!-- <ul class=""></ul> --></div>

$2. css加样式

1>先把图片调小

 * {padding: 0;margin: 0;/* background-color:rgb(43, 43, 43) ; */}img {width: 100px;}

2> 调内容部分大小

超出的部分隐藏掉（只显示窗口展示的）

.container {width: 800px;height: 350px;background: red;margin: 100px auto ;overflow: hidden;position: relative;/* background-color: rgb(43,43,43); */}

3> 调胶卷

调整图片相对窗口的位置（position:absolute）负数图片往左走

 .container .img_box {width: 5600px;height: 350px;background: pink;display: flex;position: absolute;left: -800px;/* transition: left 1s linear; */}

4> 每个图片的样式

.container .img_box li {width: 800px;height: 350px;background: yellow;list-style: none;}

图片全部展示

.container .img_box li img {width: 100%;height: 100%;/* object-fit: cover; */}

5> 开启定时器调整图片的位置

位置判断

javascript">window.onload = function() {// 获取轮播的容器containervar container=document.querySelector(".container")var img_box = document.querySelector(".container .img_box")img_box.style.left = "-800px"// 轮播核心代码var change = function(offset) {// var newoffset = parseInt(img_box.style.left) +offset// if (newoffset < -3200) {//     img_box.style.left = "0px"// } else if(newoffset>0){//     img_box.style.left = "-3200px"// }else {//     img_box.style.left = newoffset + "px"// }// 获取图片切换的目标位置var newoffset = parseInt(img_box.style.left) +offsetvar speed=offset/50// 慢慢切换var move=function(){img_box.style.left = parseInt(img_box.style.left)+speed + "px"if(parseInt(img_box.style.left)!=newoffset){setTimeout(move,10)}else{if(parseInt(img_box.style.left)==-4800){img_box.style.left="-800px"}else if(parseInt(img_box.style.left)==0){img_box.style.left="-4800px"}}}move()}

6> 加左右切换的按钮

javascript">var ul=document.createElement("ul")ul.className="btns"var left_li=document.createElement("li")left_li.innerText="<"var right_li=document.createElement("li")right_li.innerText=">"ul.appendChild(left_li)ul.appendChild(right_li)container.appendChild(ul)console.log(ul)

7> 仿连点击

javascript">var flag=0left_li.onclick=function(){if(flag==0){change(800)index--;if(index<0){index=4}highlight()flag=1setTimeout(function(){flag=0},1000)}}right_li.onclick=function(){if(flag==0){change(-800)index++;if(index>4){index=0}highlight()flag=1setTimeout(function(){flag=0},1000)}}

8> 自动轮播

javascript"> var timer=setInterval(right_li.onclick, 4000)

9> 解决手动轮播冲突问题

javascript">container.onmouseenter=function(){clearInterval(timer)}container.onmouseleave=function(){timer=setInterval(right_li.onclick, 4000)}

10> 生成任意切换的按钮

javascript">var dot_ul=document.createElement("ul")dot_ul.className="dots"var img_box_li=document.querySelectorAll(".img_box li")console.log(img_box_li)for(var i=0;i<img_box_li.length;i++){var li=document.createElement("li")console.log(li)li.innerText=i+1if(i==0){li.className="current"}dot_ul.append(li)}container.append(dot_ul)console.log(dot_ul)

11> 任意切换

javascript">var dot_ul_li= document.querySelectorAll(".dots li")//    console.log(dot_ul_li)for(var j=0;j<dot_ul_li.length;j++){dot_ul_li[j].onclick=function(){// alert(1)// 图片切换var new_index=this.innerText-1// alert(index)change((index-new_index)*800)index=new_indexhighlight()

12> 按钮切换

javascript">//    定义一个游标，记录当前点点的索引值var index=0// 按钮样式切换代码var highlight=function(){// 样式切换for(var k=0;k<dot_ul_li.length;k++){if(k==index){dot_ul_li[k].className="current"}else{dot_ul_li[k].className=""}}}

13> 初始化辅助无缝轮播图片

javascript">var last_li=img_box.firstElementChild.cloneNode(true)var  first_li=img_box.lastElementChild.cloneNode(true)img_box.insertBefore(first_li,img_box.firstElementChild)img_box.appendChild(last_li)