Js原生轮播图

<!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>
    <style type="text/css">
    *{
        margin: 0;
        padding:0;
    }
    #outer{
        margin: 50px auto;
        width: 500px;
        height: 340px;
        background-color: pink;
        padding: 10px;
        position: relative;
        overflow: hidden;
    }
    #imgList{
        list-style: none; /* 去掉列表黑点 */
        position: absolute;
        left: 0;
    }
    #imgList li{
        float: left; /* 左右排列 */
        margin: 0px 10px;
    }
    #nav{
        position: absolute;
        bottom: 20px;
        /* （520 - 25*5）/2 
        设置a居中
        */

       /*  left: 198px; */
    }
    #nav a{
        float: left;
        height: 15px;
        width: 15px;
        border-radius: 50%;
        background-color: lightblue;
        margin: 0 10px;
        opacity: 0.5;
        filter: alpha(opacity = 50);
    }
    </style>
</head>
<body>
    <div id="outer">
        <ul id="imgList">
            <li>
                <img src="./fengjing1.jpg">
            </li>
            <li>
                <img src="./fengjing2.jpg">
            </li>
            <li>
                <img src="./fengjing3.jpg">
            </li>
            <li>
                <img src="./fengjing4.jpg">
            </li>
            <li>
                <img src="./fengjing5.jpg">
            </li>
            <li>
                <img src="./fengjing1.jpg">
            </li>
        </ul>
        <div id="nav">
                <a href="#">1</a>
                <a href="#">2</a>
                <a href="#">3</a>
                <a href="#">4</a>
                <a href="#">5</a>
        </div>
    </div>
</body>
<script>
var imgList = document.getElementById('imgList');
var lis = document.getElementsByTagName('li');
imgList.style.width = lis.length * 520 + "px";//判断设置轮播图宽度

var nav = document.getElementById('nav');
var outer = document.getElementById('outer');
nav.style.left = (outer.offsetWidth - nav.offsetWidth)/2 + "px";//设置点击切换按钮居中

var alis = document.getElementsByTagName('a');
var index = 0;
alis[index].style.backgroundColor = 'black';//设置默认选中的样式

for(var i = 0;i<alis.length;i++){
    alis[i].num = i;//存储每个a的下标
    alis[i].onclick = function(){
        clearInterval(timer);
       // alert(this.num);
       index = this.num;
       setA(index)//设置a标签样式
       move(imgList,'left',-520*index,20,function(){//设置点击切换动画
        autoplay();
       });
    }
}
var index = 0;
var timer;
autoplay();
function autoplay(){//轮播图自播放
 timer = setInterval(() => {
    index++;
    index %= lis.length;
    move(imgList,'left',-520*index,30,function(){//设置点击切换动画
        setA(index);
});
}, 2000);
}
function setA(){
    if(index == lis.length-1){
        index = 0;
        imgList.style.left = 0 + "px";
    }
    for(var i = 0;i<alis.length;i++){
            alis[i].style.backgroundColor = "";//内联样式背景取消，回复默认style标签里的样式。
    }
    alis[index].style.backgroundColor = "black";
    }
    //
 function move(obj,attr,target,speed,callback){
        clearInterval(obj.timer);//关闭上一个定时器，防止点击多次创建多个
        var current = parseInt(getStyle(obj,attr));//当前位置
        if(current > target){ //判断移动方向
            speed = -speed;
        }
        //alert(olddis);
        ///设置定时器
        obj.timer = setInterval(() => {
            var olddis = parseInt(getStyle(obj,attr));
            var newdis = olddis + speed;//
            if((newdis < target && speed < 0) || (newdis > target && speed > 0)) //到边界
            {
                newdis = target;
            }
            obj.style[attr] = newdis + "px";//设置div的新的左边距
            if(newdis === target){
                clearInterval(obj.timer);
                callback && callback();
            }
          
            
        }, 30);
     }
     function getStyle(obj,name){
         return window.getComputedStyle?getComputedStyle(obj,null)[name]:obj.currentStyle[name];
    }
</script>
</html>
猜你喜欢
