学校官网都会有图片轮播，包括自动轮播及手动切换。
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> 开启定时器调整图片的位置
位置判断
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> 加左右切换的按钮
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> 仿连点击
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> 自动轮播
var timer=setInterval(right_li.onclick, 4000)9> 解决手动轮播冲突问题
container.onmouseenter=function(){clearInterval(timer)}container.onmouseleave=function(){timer=setInterval(right_li.onclick, 4000)}10> 生成任意切换的按钮
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> 任意切换
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> 按钮切换
// 定义一个游标，记录当前点点的索引值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> 初始化辅助无缝轮播图片
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)
