左右切换无长滚动轮播图
思路：首先设有全局变量position（确定当前图片是第几张），arr数组：存放图片地址，方向：direction，
及lis小圆点数组，prev，记录小圆点的前一个， moveBool是否进入运动函数等
1、点击事件：点击左边的leftBn，设置direction="right"，position--，在这要确定position不能超出数组长度范围，
超出要重新赋值，点击小圆点把小圆点的当前是lis数组中的第几个赋值给position，然后图片生成
2、图片生成：图片根据当前direction值以及position来确定插入当前图片的前面和后面，如果direction=”right“，
插在当前图片的前面，并把装图片的盒子宽度乘以2倍，设置控制图片运动的moveBool为true，
3、图片运动：根据当前direction值运动，如果值为right，则让装图片的盒子的left值为offset.left+40,即向右运动，
当运动完成后设置相关属性停止进入运动函数并设置其他相关属性
4、自动运动：设置控制自动运动的变量，初值为0，每次进入定时器++，当等于一定值时，给direction赋值，position++，
生成图片，当点击事件发生时，则给这个变量的值设成负值，让其时间更久才能再次生成图片。
5、关于小圆点及其它琐碎事情。每次清空之前prev的属性设置，然后给prev设置当前的li所在的position，再重新设置背景属性。
易错点：插入图片位置，给装图片的大盒子定位及运动。及图片生成和图片运动这一块。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>中级轮播图重构</title>
<style>
*{margin: 0; padding: 0; }
#carousel,#imgCon img{width: 1200px; height: 400px; }
#carousel {position: relative; margin: auto; overflow: hidden; }
#imgCon{width: 1200px; height: 400px; position: absolute; left: 0; font-size: 0; }
#leftBn,#rightBn {position: absolute; top:170px; cursor: pointer; }
#leftBn{left: 20px;}
#rightBn {right: 20px; }
ul{position: absolute; bottom: 20px; list-style: none; margin: auto; }
li {width: 20px; height: 20px; border: 1px solid red; border-radius: 10px;
float: left; margin-left: 8px; cursor: pointer; }
</style>
<script src="../universalMethod.js"></script>
</head>
<body>
<div id="carousel">
<div id="imgCon">
<img src="img/a.jpeg">
</div>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<img src="img/left.png" id="leftBn">
<img src="img/right.png" id="rightBn">
</div>
<script>
var imgCon,leftBn,rightBn,ul,lis,prev
var arr=["img/a.jpeg","img/b.jpeg","img/c.jpeg","img/d.jpeg","img/e.jpeg"]
var position=0
var direction
var autoNum=0
var moveBool=false
const WIDTH=1200
const HEIGHT=400
init()
function init(){
imgCon=document.getElementById("imgCon")
leftBn=document.getElementById("leftBn")
rightBn=document.getElementById("rightBn")
ul=document.getElementsByTagName("ul")[0]
leftBn.addEventListener("click",clickHandler)
rightBn.addEventListener("click",clickHandler)
lis=ul.children
for(var i=0;i<lis.length;i++){
lis[i].index=i
lis[i].addEventListener("click",liClickHandler)
}
ul.style.left=(WIDTH-ul.clientWidth)/2+"px"
liBG()
setInterval(animation,16)
}
function createImg(){
var data1=new Date()
var img=Method.createElem("img",null,{
width:WIDTH+"px",
height:HEIGHT+"px"
})
img.src=arr[position]
imgCon.style.width=WIDTH*2+"px"
if(direction==="left"){
imgCon.appendChild(img)
}
if(direction==="right"){
imgCon.insertBefore(img,imgCon.lastElementChild)
imgCon.style.left=-WIDTH+"px"
}
var data2=new Date()
moveBool=true
console.log(data2-data1)
liBG()
}
function moveImg(){
if(!moveBool) return
if(direction==="left"){
if(imgCon.offsetLeft<=-WIDTH){
imgCon.style.left=0+"px"
imgCon.firstElementChild.remove()
imgCon.style.width=WIDTH+"px"
moveBool=false
return
}
imgCon.style.left=(imgCon.offsetLeft-40)+"px"
}
if(direction==="right"){
if(imgCon.offsetLeft>=0){
imgCon.lastElementChild.remove()
imgCon.style.width=WIDTH+"px"
moveBool=false
return
}
imgCon.style.left=(imgCon.offsetLeft+40)+"px"
}
}
function animation(){
moveImg()
autoMove()
}
function autoMove(){
autoNum++
if(autoNum===240){
autoNum=0
position++
if(position>arr.length-1) position=0
direction="left"
createImg()
}
}
function clickHandler(){
if(moveBool) return
autoNum=-120
if(this===leftBn){
position--
if(position<0) position=arr.length-1
direction="right"
createImg()
return
}
position++
if(position>arr.length-1) position = 0
direction="left"
createImg()
}
function liClickHandler(){
if(moveBool) return
autoNum=-120
if(this.index>position) direction="left"
if(this.index<position) direction="right"
position=this.index
createImg()
}
function liBG(){
if(prev){
prev.style.background="rgba(255,0,0,0)"
}
prev=lis[position]
prev.style.background="rgba(255,0,0,0.5)"
}
</script>
</body>
</html>
原文地址：https://www.cnblogs.com/qinghao-qin/p/10158668.html
时间： 2024-10-01 14:17:36