封装轮播图

在HTMLDivElement上封装方法createTurnPage()；功能;使得传入的图片按照某一宽高空气内轮播；

如arr=['img1.jpg','img2.jpg','img3.jpg','img4.jpg'];

div.createTurnPage(arr,700,300);可以让arr里的图片在width = 700 px ;height = 300 px的框里轮播；

 

1.build.js --->在div内创建所需的完善的html结构：

function buildHtml(obj,targetWidth, targetHeight){
    obj.className = 'wrapper';
    obj.style.width = targetWidth + 'px';
    obj.style.height = targetHeight + 'px';
    var ul = document.createElement("ul");
    obj.appendChild(ul);
    ul.className = "sliderPage";
    var len = arr.length;
    for(var i = 0;i <= len; i++){
        var li = document.createElement('li');
        var img =document.createElement('img');
        img.style.width = '100%';
        img.style.height = '100%';
        if(i == len){
            img.src = arr[0];
        }
        else img.src= arr[i];
        li.appendChild(img);
        li.style.width = targetWidth + 'px';
        li.style.height = targetHeight + 'px';
        ul.appendChild(li);
        ul.style.width = targetWidth * (len+1) + 'px';
        ul.style.height = targetHeight + 'px';
    }
    var div1 = document.createElement('div');
    div1.className = 'btn leftBtn';
    obj.appendChild(div1);
    div1.innerHTML='<';
    var div2 = document.createElement('div');
    div2.className='btn rightBtn';
    obj.appendChild(div2);
    div2.innerHTML='>';
    var div3 = document.createElement('div');
    div3.className = 'sliderIndex';
    
    for(var i = 0;i < len; i++){
        var span = document.createElement('span');                
        if(i == 0){
            span.className = 'active';
        }
        div3.appendChild(span);
    }
    obj.appendChild(div3);
}

2.css样式：

 

*{
    padding:0px;
    margin: 0px;
    list-style: none;
}
.wrapper{
    position:relative;
    margin: 0px auto 0px;
    overflow:hidden;
}
 .wrapper .sliderPage{
    position: absolute;
    left: 0px;
    top: 0px;
    
} 
.wrapper .sliderPage li{
    float: left;
}
.wrapper .btn{
    position: absolute;
    top: 50%;
    margin-top: -20px;
    color: #fff;
    background-color:#000;
    text-align: center;
    line-height: 40px;
    width: 40px;
    height: 40px;  
    opacity: 0.1;
    cursor: pointer;          
}
.wrapper .btn:hover{
    opacity: 0.5;
}
.wrapper .leftBtn{
    left:15px;
}
.wrapper .rightBtn{
    right: 15px; 
}
.wrapper .sliderIndex{
    position: absolute;
    width:100%;
    bottom: 15px;
    text-align: center;
    cursor: pointer;
}
.wrapper .sliderIndex span{
    display: inline-block;
    width: 12px;
    height:12px;
    background-color:#fff;
    border-radius: 50%;
    margin-right: 10px;
} 
.wrapper .sliderIndex .active{
    background-color:#f40;
}

3.封装渐进移动方法：

        //封装获得非行间样式的属性
        function getStyle (obj, attr){//求得某对象中某属性的值
            if(obj.currentStyle){
                return obj.currentStyle[attr];
            }else {
                return window.getComputedStyle(obj, false)[attr];
            }
        }
        //封装把某对象obj的属性渐进为目标属性(json里)的方法
        function startMove(obj, json, callback){
            clearInterval(obj, obj.timer);
            var isSpeed,sur
            obj.timer=setInterval(function(){
                var bStop = true;
                for(var attr in json){  //遍历所有属性              
                    if(attr == 'opacity'){                 
                        sur = parseFloat(getStyle(obj, attr)) * 100;//得到当前的透明度并*100
                    }else{
                        sur = parseInt(getStyle(obj, attr));
                    }
                    isSpeed = (json[attr] - sur) / 7;
                    isSpeed = isSpeed > 0 ? Math.ceil(isSpeed) : Math.floor(isSpeed);
                    if(attr == 'opacity'){
                        obj.style.opacity = (sur + isSpeed) / 100;//设置新的透明度
                    }else {
                        obj.style[attr] = sur + isSpeed + 'px';
                    }
                    if(Math.floor(Math.abs(json[attr]-sur))!=0){
                        bStop = false;                        
                    }                 
                }
                if(bStop){
                    clearInterval(obj.timer);
                    typeof callback == 'function' ? callback() : '';
                }
            },30)
        }

 4.轮播实现：

  
    HTMLDivElement.prototype.createTurnPage = function(arr,targetWidth,targetHeight){

    buildHtml(div ,targetWidth ,targetHeight);
    var timer = null;
    var sliderPage = document.getElementsByClassName('sliderPage')[0];                         
    var moveWidth = sliderPage.children[0].offsetWidth;//每次需要移动的距离
    var num = sliderPage.children.length-1;//图片种类数
    var leftBtn = document.getElementsByClassName('leftBtn')[0];
    var rightBtn = document.getElementsByClassName('rightBtn')[0];
    var allSpan = document.getElementsByClassName('sliderIndex')[0].getElementsByTagName('span');
    var lock = true;
    var index = 0;
    leftBtn.onclick = function(){
        autoMove ('right->left');
    }
    rightBtn.onclick = function(){
        autoMove('left->right');
    }
    for(var i = 0;i < allSpan.length; i++){
        (function(myIndex){
            allSpan[i].onclick = function(){
                if(lock){
                    lock = false;
                    clearTimeout(timer);
                    index = myIndex;
                    startMove(sliderPage, {left: - index * moveWidth},function(){
                        lock = true;
                        timer = setTimeout(autoMove, 1500);
                        changeIndex(index);
                    })
                }            
            }
        })(i)
    }

    function autoMove(directive){
        if(lock){
            lock = false;
            clearTimeout(timer) ;           
            if(!directive || directive =='left->right'){
                index ++;              
                startMove(sliderPage,{left:sliderPage.offsetLeft - moveWidth},function(){
                    if(sliderPage.offsetLeft == - num*moveWidth){//每播完整显示最后一张图，瞬间让ul复位
                        sliderPage.style.left = '0px';
                        index = 0;
                    }
                    timer = setTimeout (autoMove,1500);
                    lock = true;
                    changeIndex(index);
                });
            }else if(directive == 'right->left'){
                if(sliderPage.offsetLeft == 0){
                    sliderPage.style.left = - num * moveWidth + 'px';
                    index = num;
                }
                index --;
                startMove(sliderPage, {left:sliderPage.offsetLeft + moveWidth},function(){                   
                    timer = setTimeout(autoMove,1500);    
                    lock = true; 
                    changeIndex(index);           
                }) 
            }
        }           
    }
    function changeIndex(_index){
        for(var i = 0; i < allSpan.length; i ++){
            allSpan[i].className = '';
        }
        allSpan[_index].className = 'active';
    }
    timer = setTimeout(autoMove,1500);
}

5.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>轮播模型</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>
    <div></div>
    <script src="./move.js"></script>
    <script src="./build.js"></script> 
    <script src="./turnPage.js"></script>
    <script> 
      div = document.getElementsByTagName('div')[0];
        var arr=["images/img1.jpg","images/img2.jpg","images/img3.jpg","images/img4.jpg","./images/img2.jpg"];  
        div.createTurnPage(arr,700,300);
    </script>
</body>
</html>