JS-ケース-全jsラウンドチャート

画像プリロードパッケージ

//Utils.js
 
//        
var Utils=(function () {
    return {
        //SSS
        loadImg:function (srcList,callBack) {//          
            var img=new Image();
            img.num=0;//   num 0    
            img.imgList=[];//    
            img.srcList=srcList;
            img.callBack=callBack;//    
            img.addEventListener("load",this.loadHandler);//  load
            img.src="./img/"+srcList[img.num];//      
        },
        loadHandler:function (e) {
        	//this   img
        	/*cloneNode                  。
        	 *            true，                  。
        	  （      ，  false），        。*/
            this.imgList.push(this.cloneNode(false));// img     imgList  
            this.num++;
            if(this.num>=this.srcList.length){//   >=srcList  (      )   
                this.callBack(this.imgList);//         
                return;
            }
            //         ,    src,    load      ,     this.loadHandler
            this.src="./img/"+this.srcList[this.num];
        }
    }
})();

mainコードセクション

    
    
    



    
        //     , JS
        /*
        *   1\      -->    ,    ,   
        *   2\    ,          ,     
        *   3\     ,           ,     
        *   4\                 
        *   5\              ,          
        * */
        var bnList,imgList,imgCon,ul,pre;//                             
        var position=0,//     
            direction="left",//  
            playBoolean=false,//  playBoolean     
            autoBoolean=false,//  autoBoolean     
            speed=20,//  
            time=240;//        
        const WIDTH=1200,//           
            HEIGHT=400;

    init();//      
    function init() {//      
        Utils.loadImg(["left.png","right.png","a.jpeg","b.jpeg","c.jpeg","d.jpeg","e.jpeg"],createCarousel);
        //  Utils  loadImg  ，              createCarousel   
    }
    function createCarousel(list) {//       
        bnList=list.splice(0,2);//         list   ，   bnList   
        imgList=list;//         imgList 
        imgList.forEach(function (t) {//    ，   img      
            t.style.width=WIDTH+"px";
            t.style.height=HEIGHT+"px";
        });
        var carousel=ce("div",{//    ce  div     
            width:WIDTH+"px",
            height:HEIGHT+"px",
            position:"relative",
            margin:"auto",
            overflow:"hidden",
            backgroundColor:"rgba(255,0,0,0.3)"
        });//carousel    div  ，       ，    ，    
        createImgCon(carousel);//    createImgCon carousel          ，  carousel    
        createBn(carousel);//    createBn carousel       ，  carousel    
        createDot(carousel);//    createDot carousel         ，  carousel    
        document.body.appendChild(carousel);// body   carousel div（  ）
        carousel.addEventListener("mouseenter",mouseHandler);// carousel div        
        carousel.addEventListener("mouseleave",mouseHandler);// carousel div        
        ul.style.left=(WIDTH-ul.offsetWidth)/2+"px";
        //           
        changeDot();//                 changeDot
        setInterval(animation,16);//        
    }
    function mouseHandler(e) {//    ，         
        if(e.type==="mouseenter"){//          
            autoBoolean=false;
            time=240;//  time  
        }else if(e.type==="mouseleave"){//           
            autoBoolean=true;
        }
    }
    function createImgCon(parent) {//       div
        imgCon=ce("div",{//  ce      div      
            width:WIDTH+"px",
            heigt:HEIGHT+"px",
            position:"absolute",
            left:"0px"
        });
        imgCon.appendChild(imgList[position]);//    imgCon div     
        parent.appendChild(imgCon);// imgCon div       
    }

    function createDot(parent) {//         
          ul=ce("ul",{//  ce   ul     
          listStyle:"none",
            position:"absolute",
            bottom:"20px",
            margin:"0px",
            padding:"0px"
        });
        imgList.forEach(function (t,index) {//  imgList         li
            var li=ce("li",{//  li，    
                float:"left",
                width:"18px",
                height:"18px",
                borderRadius:"9px",
                border:"1px solid rgba(255,0,0,0.8)",
                marginLeft:index===0 ? "0px" : "10px"
            });
            ul.appendChild(li);// ul   li
        });
        ul.addEventListener("click",dotClickHandler);// ul              
        parent.appendChild(ul);//       ul
    }
    function createBn(parent) {//      
        bnList.forEach(function (t,index) {//    bnList      
            Object.assign(t.style,{
                position:"absolute",
                left:index===0 ? "20px":"none",
                right:index===1 ? "20px":"none",
                top:(HEIGHT-t.height)/2+"px"
            });
            t.addEventListener("click",bnClickHandler);//          
            parent.appendChild(t);//              
        });
    }

    function bnClickHandler(e) {//          
        if (playBoolean)return;//  playBoolean  true  
        if (bnList.indexOf(this)===0){//      
            position--;//    --
            direction="right";//      
            if (position<0)position=imgList.length-1;//    0    ，position         
        }else {//      
            position++;//    ++
            direction="left";//      
            if (position>imgList.length-1) position=0;//     1    ，position        
        }
        createNextImg();//         
    }
    function dotClickHandler(e) {//          
        if(playBoolean) return;//  playBoolean  true  
        if(e.target.nodeName!=="LI")return;//     li   
        var arr=Array.from(this.children);//this ul
        var index=arr.indexOf(e.target);//index     li       
        if (index===position)return;//             ，   
        if(index>position){//         
            direction="left";//    
        }else {//         
            direction="right";//    
        }
        position=index;//position      li  
        createNextImg();//         
    }

    function createNextImg() {//       
        imgCon.style.width=WIDTH*2+"px";//         2（      ）
        if (direction==="left"){//        
            imgCon.appendChild(imgList[position]);//            
        }else if (direction==="right"){//        
            imgCon.insertBefore(imgList[position],imgCon.firstElementChild);//             
            imgCon.style.left=-WIDTH+"px";//                   
        }
        playBoolean=true;//        true
        changeDot();//             
    }

    function changeDot() {//           
        if(pre){
            pre.style.backgroundColor="rgba(255,0,0,0)";//  
        }
        pre=ul.children[position];//          li
        pre.style.backgroundColor="rgba(255,0,0,0.5)";//   li   
    }
    function animation() {
        imgPlay();//      
        autoPlay();//      
    }
    function imgPlay() {
        if (!playBoolean)return;// false   
        if (direction==="right"){//    
            imgCon.style.left=imgCon.offsetLeft+speed+"px";//   speed     
            if (imgCon.offsetLeft>=0){//         
                imgCon.style.left="0px";
                playBoolean=false;
                imgCon.lastElementChild.remove();//       
                imgCon.style.width=WIDTH+"px";//         
            }
        }else if(direction==="left"){//    
                imgCon.style.left=imgCon.offsetLeft-speed+"px";//   speed     
                if (imgCon.offsetLeft<=-WIDTH){//                  
                playBoolean=false;
                imgCon.firstElementChild.remove();//       
                imgCon.style.left="0px";//         
                imgCon.style.width=WIDTH+"px";//         
                }
        }

    }
    function autoPlay() {//    
        if (!autoBoolean)return;// false   
        time--;//  
        if(time>0)return;//    0   
        time=240;//        
        var evt=new MouseEvent("click");//      
        bnList[1].dispatchEvent(evt);//        bnList[1] click  
    }
   function ce(type,style) {//           （      ，   css  ）
        var elem=document.createElement(type);
        Object.assign(elem.style,style);
       /*Object.assign        （source）        ，
                  （target）。             ，
                     ，          。*/
        return elem;
   }