轮播图---纯js
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/Utils.js"></script>
</head>
<body>
<script>
var bnList,imgList,imgCon,dot,direction,pre;
var pos=0,
speed=30,
time=240,
playBool=false,
autoBool=false;
var srcList=["left.png","right.png","a.jpeg","b.jpeg","c.jpeg","d.jpeg","e.jpeg"];
const WIDTH=1290;
const HEIGHT=430;
init();
function init() {
setInterval(animation,16);
Utils.loadImg(srcList,finishImg);
}
function finishImg(list) {
imgList=list;
bnList=imgList.splice(0,2);
imgList.forEach(function (t) {
t.style.width=WIDTH+"px";
t.style.height=HEIGHT+"px";
});
var carousel=Utils.ce("div",{
WIDTH+"px",
height:HEIGHT+"px",
margin: "auto",
position: "relative",
overflow: "hidden"
});
createImgCon(carousel);
createDot(carousel);
createBn(carousel);
document.body.appendChild(carousel);
carousel.addEventListener("mouseenter",mouseHandler);
carousel.addEventListener("mouseleave",mouseHandler);
dot.style.left=(WIDTH-dot.offsetWidth)/2+"px";
dotChange();
}
function mouseHandler(e) {
if(e.type==="mouseenter"){
autoBool=false;
}else if(e.type==="mouseleave"){
time=240;
autoBool=true;
}
}
function createImgCon(parent) {
imgCon=Utils.ce("div",{
WIDTH*2+"px",
height: HEIGHT+"px",
position: "absolute",
left:0,
top:0,
fontSize: 0
});
imgCon.appendChild(imgList[0]);
parent.appendChild(imgCon);
}
function createDot(parent) {
dot=Utils.ce("ul",{
margin: 0,
padding: 0,
listStyle: "none",
position: "absolute",
bottom: "10px"
});
for(var i=0;i<imgList.length;i++){
var li=Utils.ce("li",{
"15px",
height: "15px",
backgroundColor: "rgba(255,0,0,0)",
border: "2px solid rgba(255,0,0,0.5)",
float: "left",
marginLeft: i===0 ? 0 : "10px",
borderRadius: "10px"
});
dot.appendChild(li);
}
dot.addEventListener("click",dotClickHandler);
parent.appendChild(dot);
}
function createBn(parent) {
for(var i=0;i<bnList.length;i++){
Object.assign(bnList[i].style,{
position: "absolute",
left:i===0 ? "20px" : "none",
right:i===1 ? "20px" : "none",
top:(HEIGHT-bnList[i].height)/2+"px"
});
bnList[i].addEventListener("click",bnClickHandler);
parent.appendChild(bnList[i]);
}
}
function bnClickHandler(e) {
if(playBool) return;
if(this===bnList[0]){
direction="right";
pos--;
if(pos<0) pos=imgList.length-1;
}else{
direction="left";
pos++;
if(pos>imgList.length-1)pos=0;
}
addNextImg();
}
function dotClickHandler(e) {
if(playBool) return;
if(e.target.nodeName!=="LI") return;
var index=Array.from(this.children).indexOf(e.target);
if(index===pos)return;
if(index>pos){
direction="left";
}else{
direction="right";
}
pos=index;
addNextImg();
}
function addNextImg() {
if(direction==="left"){
imgCon.appendChild(imgList[pos]);
imgCon.style.left="0px";
}else{
imgCon.insertBefore(imgList[pos],imgCon.firstElementChild);
imgCon.style.left=-WIDTH+"px";
}
dotChange();
playBool=true;
}
function dotChange() {
if(pre){
pre.style.backgroundColor="rgba(255,0,0,0)";
}
pre=dot.children[pos];
pre.style.backgroundColor="rgba(255,0,0,0.5)";
}
function animation() {
carouselPlay();
autoPlay();
}
function carouselPlay() {
if(!playBool) return;
if(direction==="left"){
if(imgCon.offsetLeft<=-WIDTH){
playBool=false;
imgCon.firstElementChild.remove();
imgCon.style.left="0px";
return;
}
imgCon.style.left=imgCon.offsetLeft-speed+"px";
}else{
if(imgCon.offsetLeft>=0){
playBool=false;
imgCon.lastElementChild.remove();
imgCon.style.left="0px";
return;
}
imgCon.style.left=imgCon.offsetLeft+speed+"px";
}
}
function autoPlay() {
if(!autoBool) return;
time--;
if(time>0) return;
time=240;
var evt=new MouseEvent("click");
bnList[1].dispatchEvent(evt);
}
</script>
</body>
</html>
封装的方法，
Utils.js
var Utils=(function () { return { ce:function (type,style) { var elem=document.createElement(type); Object.assign(elem.style,style); return elem; }, loadImg:function (imgSrcList,callBack) { var img=new Image(); img.addEventListener("load",this.loadHandler); img.list=[]; img.num=0; img.fn=callBack; img.arr=imgSrcList; img.self=this; img.src="./img/"+imgSrcList[0]; }, loadHandler:function (e) { this.list.push(this.cloneNode(false)); this.num++; if(this.num>this.arr.length-1){ if(!this.fn){ var evt=new Event("imgLoadFinish"); evt.list=this.list; document.dispatchEvent(evt); return; } this.fn(this.list); this.removeEventListener("load",this.self.loadHandler); return; } this.src="./img/"+this.arr[this.num]; } } })();