滑屏插件

2019-12-08 21:01:38 作者：互联网

之前需要做一个滑屏插件，现在将这个代码再次改进，使它更易于使用。
代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Slider</title>
        <!--引入文件-->
        <script src="js/slider.js"></script>
        <style>
            #myDiv{
                width:400px;
                height: 400px;
                position:relative;
                top:0px;
                bottom: 0px;
                overflow:hidden;
                background: #333;
            }
            
        </style>
    </head>
    <body>
            <div id="myDiv"></div>
    </body>
    <script>
        //图片地址数组
        let imgArr=['img/2.jpg','img/1.jpg','img/3.jpg','img/4.png','img/6.jpg'];
        
        //底部圆点样式
        let circleStyle='width:10px;height: 10px;border-radius: 10px;background-color: #fff;';
        
        //左右按钮样式
        let btnStyle='background-color:#fff;opacity:0.6;border:0;height:20px';
        
        //传入被插入元素,图片地址
        new Slider(document.querySelector('#myDiv'),imgArr,circleStyle,btnStyle);
        
    </script>
    
</html>

js文件

class Slider{
    constructor(ct,imgs,circleStyle,btnStyle) {
        this.currentPage=0;
        this.pageCount=imgs.length;
        let width=ct.offsetWidth;
        let height=ct.offsetHeight;
        this.width=width;
        this.circleStyle=circleStyle;
        this.btnStyle=btnStyle;
        
        this.innerCt=document.createElement('div');
        this.innerCt.style.cssText='width:'+width*imgs.length+'px;'+'height:100%;padding:0px;margin:0px;overflow:hidden; position: relative;transition:transform 1s ease';
        ct.appendChild(this.innerCt);
        
        let circleCt=document.createElement('div');
        circleCt.style.cssText='position: absolute;bottom:0;left: 30%;padding: 10px 0;overflow:hidden;'
        circleCt.setAttribute('align','center');
        ct.appendChild(circleCt);
        this.circles=[];
        
        imgs.forEach((item,index)=>{
            let ct1=document.createElement('div');
            ct1.style.cssText='width:'+width+'px;'+'height:'+height+'px;'+'float:left;';
            ct1.setAttribute('align','center');
            let img=new Image();
            img.src=item;
            
            img.style.cssText='width:'+width+'px;'+'height:'+height+'px;';
            
            img.onload=()=>{
                img.style.marginTop=(height-img.height)/2+'px';
                    }
            ct1.appendChild(img);
            this.innerCt.appendChild(ct1);
            
            let c=document.createElement('div');
            
            c.style.cssText=this.circleStyle+'display: inline-block;margin-left: 10px;float: left';
            this.circles.push(c);
            circleCt.appendChild(c);
            c.addEventListener('mouseover',()=>{
                this.slideTo(index);
            })
            
        });
        let css='position:absolute;top:50%;padding:0 10px;display: inline-block;float: left;margin-top:-15px;'+this.btnStyle;
        let btnLeft=document.createElement('button')
        btnLeft.innerHTML='<';
        let btnRight=document.createElement('button')
        btnRight.innerHTML='>';
        btnLeft.style.cssText=css;
        btnRight.style.cssText=css;
        btnLeft.style.left='0px';
        btnRight.style.right='0px';
        ct.appendChild(btnLeft);
        ct.appendChild(btnRight);
        btnLeft.addEventListener('click',()=>{
            if(this.currentPage===0)
            {
                return;
            }
            this.slideTo(this.currentPage-1);
    
            
        })
        btnRight.addEventListener('click',()=>{
            if(this.currentPage===this.pageCount-1)
            {
                return;
            }
            
            this.slideTo(this.currentPage+1);
            
        });
        this.slideTo(0);
        
    }
    
    
    
    slideTo(num){
        this.circles[this.currentPage].style.cssText=this.circleStyle+'display: inline-block;margin-left: 10px;float: left';
        this.circles[num].style.backgroundColor='red';
        let left=-num*this.width;
        console.log(left);
        this.innerCt.style.transform='translate('+left+'px,0px)';
        this.currentPage=num;
    }
}

标签：插件,img,style,height,width,let,滑屏,left
来源： https://www.cnblogs.com/ellen-mylife/p/12007180.html