【原生】----轮播图---纯js

轮播图---纯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: 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: 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",{
                    width: "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];
        }
    }
})();

来源：https://www.cnblogs.com/yuanjili666/p/11350267.html

标签

轮播