js原生轮播图

灰太狼 2023-08-17 15:59 96阅读 0赞

1.先画轮播图片样式

2.再画轮播按钮

3.样式完成，写js代码

4.获取所有节点

<!DOCTYPE html>  
<html>  
<head>  
    <title>轮播图</title>  
      
    <style type="text/css">  
        .wrap\{  
            width: 800px;  
            height: 400px;  
            position: relative;  
        \}  
        .list\{  
            width: 800px;  
            height: 400px;  
            list-style: none;  
            position: relative;  
            padding-left: 0px;  
        \}  
        .item\{  
            position: absolute;  
            width: 100%;  
            height: 100%;  
            color: white;  
            font-size:20px;  
            opacity: 0;  
            transition: all .8s;  
            z-index: 2  
        \}  
        /\*nth-child()用于选择子元素,参数是从0开始的\*/  
        .item:nth-child(1)\{  
            background-color: black;  
        \}  
         .item:nth-child(2)\{  
            background-color: red;  
        \}  
         .item:nth-child(3)\{  
            background-color: green;  
        \}  
         .item:nth-child(4)\{  
            background-color: yellow;  
        \}  
         .item:nth-child(5)\{  
            background-color: pink;  
        \}  
        .btn\{  
            width: 50px;  
            height: 100px;  
            position: absolute;  
            top: 150px;  
            z-index: 100;  
        \}  
        \#goPre\{  
            left: 0px;  
        \}  
        \#goNext\{  
            right: 0px;  
        \}  
        .item.active\{  
            z-index: 10;  
        \}  
        .pointList\{  
            padding-left: 0px;  
            list-style: none;  
            position: absolute;  
            right: 20px;  
            bottom: 20px;  
            z-index: 1000;  
        \}  
        .point\{  
            width: 10px;  
            height: 10px;  
            background-color: rgba(0,0,0,0.4);  
            border-radius: 100%;  
            float: left;  
            margin-right: 14px;  
            border-style: solid;  
            border-width: 2px;  
            border-color: rgba(255,255,255,0.6);  
             cursor: pointer;  
        \}  
        .point .active\{  
             background-color: rgba(255,255,255,0.8);  
        \}  
    </style>  
</head>  
<body>  
    <div class="wrap">  
        <ul class="list">  
            <li class="item active">0</li>  
            <li class="item">1</li>  
            <li class="item">2</li>  
            <li class="item">3</li>  
            <li class="item">4</li>  
        </ul>  
        <ul class="pointList">  
            <li class="point" data-index='0'></li>  
             <li class="point" data-index='1'></li>  
              <li class="point" data-index='2'></li>  
               <li class="point" data-index='3'></li>  
                <li class="point" data-index='4'></li>  
        </ul>  
        <button type="button" class="btn" id="goPre"><</button>  
        <button type="button" class="btn" id="goNext">></button>

</div>  
    
</body>  
  <script type="text/javascript">  
          
        // 获取所有class为item的节点  
        var items = document.getElementsByClassName('item');  
        // 获取id为goPre的节点  
        var goPreBtn = document.getElementById('goPre');  
        // 获取id为goNext的节点  
        var goNextBtn = document.getElementById('goNext');

var points = document.getElementsByClassName('point');

var index = 0; //表示第几张图片在展示 --> 第几张图片有active这个类名  
        // 第几个点在展示

// 清除active  
        var clearActive = function()\{   
           for(var i = 0;i < items.length;i++)\{  
                items\[i\].className = 'item';  
            \}    
            for(var i = 0;i < points.length;i++)\{  
                points\[i\].className = 'point';  
            \}   
        \}

// 把想要的加上active,其余的都是item,把想要的留下，不想要的都删掉  
        var goIndex = function()\{  
            clearActive();  
            items\[index\].className = 'item active';  
            points\[index\].className = 'point active';  
              
        \}

var goNext = function()\{  
              
            if(index < 4)\{  
               index ++;  
            \}else\{  
               index = 0  
            \}  
             goIndex();  
        \}

goNextBtn.addEventListener('click',function()\{  
            goNext();  
        \});

goPreBtn.addEventListener('click',function()\{  
            goPre();  
        \});

for(let i= 0; i <points.length;i++)\{  
             points\[i\].addEventListener('click',function()\{  
            var pointIndex = this.getAttribute('data-index');  
            index = pointIndex;  
            goIndex();  
        \});  
         \}  
    </script>  
</html>