原生JS轮播图 - 爱码网

新手入门小案例2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        #wrap {
            width: 1680px;
            height: 560px;
            overflow: hidden;
            position: relative;
            margin: auto;
        }
        
        #imgWrap {
            width: 8400px;
            height: 560px;
            font-size: 0;
            position: absolute;
            left: 0;
            transition: 1s;
        }
        
        #imgWrap img {
            width: 1680px;
            height: 560px;
        }
        
        #left, #right {
            width: 50px;
            height: 70px;
            background-color: #000;
            color: #fff;
            position: absolute;
            top: 50%;
            margin-top: -35px;
            font-size: 30px;
            text-align: center;
            line-height: 70px;
            cursor: pointer;
            opacity: 0.5;
        }
        
        #left {
            margin-left: 10px;
            left: 0;
        }
        
        #right {
            margin-right: 10px;
            right: 0;
        }
        
        ul {
            position: absolute;
            bottom: 10px;
            left: 735px;
        }
        
        li {
            list-style-type: none;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            float: left;
            margin-left: 10px;
            border: 1px solid red;
            cursor: pointer;
        }
    </style>
</head>
<body>
<div id="wrap">
    <div id="imgWrap">
        <img src="images/banner1.jpeg" alt="">
        <img src="images/banner2.jpeg" alt="">
        <img src="images/banner3.jpeg" alt="">
        <img src="images/banner4.jpeg" alt="">
        <img src="images/banner5.jpeg" alt="">
    </div>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <div id="left">&lt;</div>
    <div id="right">&gt;</div>
</div>
<script>
    //定义变量
    var imgWrap,leftBtn,rightBtn,preLi,liLists;
    var position=0;
    init();
    function init() {
        //获取元素
        imgWrap=document.getElementById("imgWrap");
        leftBtn=document.getElementById("left");
        rightBtn=document.getElementById("right");
        
        leftBtn.addEventListener("click",clickHandler);
        rightBtn.addEventListener("click",clickHandler);
        //获取每个li元素,转为数组
        liLists=Array.from(document.getElementsByTagName("li"));
        //为每一个Li添加事件
        for(var i=0;i<liLists.length;i++){
            liLists[i].addEventListener("click",liClickHandler);
        }
        move();
    
    }
    function liClickHandler(e) {
        //position 等于 此时 这个li的下标
        position=liLists.indexOf(this);
        //执行移动函数
        move();
    }
    function clickHandler(e) {
        if(this===leftBtn){
            position--;
            if(position<0){
                position=4;
            }
            move();
            return;
        }
        position++;
        if(position>4){
            position=0;
        }
        move();
    }
    
    function move() {
        imgWrap.style.left=-1680*position+"px";
        if(preLi){
            preLi.style.backgroundColor = "rgba(255,0,0,0)";
        }
        //如果不存在 就 把第一个设为preLi  默认
        preLi = liLists[position];
        // preLi.style.background = "rgba(255,0,0,0.3)";
        preLi.style.backgroundColor="rgba(255,0,0,0.3)";
    }
</script>
</body>
</html>
原生JS轮播图