輪播圖---左右切換無長滾動效果輪播圖-中級難度版
阿新 • • 發佈：2018-12-21
左右切換無長滾動輪播圖
思路：首先設有全域性變數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>