前端-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> 开启定时器调整图片的位置
位置判断
window.onload = function() {
// 获取轮播的容器container
var 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) +offset
var 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=0
left_li.onclick=function(){
if(flag==0){
change(800)
index--;
if(index<0){
index=4
}
highlight()
flag=1
setTimeout(function(){
flag=0
},1000)
}
}
right_li.onclick=function(){
if(flag==0){
change(-800)
index++;
if(index>4){
index=0
}
highlight()
flag=1
setTimeout(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+1
if(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_index
highlight()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)
原文地址：https://blog.csdn.net/m0_75163045/article/details/142444551
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！