怎么用js设计一个简易轮播图

短命女 2024-03-31 09:16 9阅读 0赞

### 1.核心思路 ###

其实就是利用css样式中display的隐藏和显示属性，首先让设置第一张图片的类名设置为current，display属性设置为block，只会显示第一张图片；然后将剩下的图片类名设置为pic，display属性设置为none。这样在前端页面中，只会显示第一张图片，其他图片就会被隐藏。在js中利用定时器和循环，判断每次调用定时器的下标值和当前循环变量是否相等，如果相等，那么就将这个图片的class类名变成current，其他图片设置为pic即可

### 2.html页面代码 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <link rel="stylesheet" href="index.css">
    </head>
    <body>
        <div class="banner">
            <ul class="banner_pic" id="banner_pic">
               <li class="current"><img src="images/1.jpg" alt=""></li>
               <li class="pic"><img src="images/2.jpg" alt=""></li>
               <li class="pic"><img src="images/3.jpg" alt=""></li>
               <li class="pic"><img src="images/4.jpg" alt=""></li>
               <li class="pic"><img src="images/5.jpg" alt=""></li>
            </ul>
        </div>
        <script>
            var currentIndex=0
            var list=document.getElementById("banner_pic").getElementsByTagName("li")
            function autoChange(){
          
                //每次调用时，首先将currentIndex值加1
                ++currentIndex
                //如果加加值等于标签长度了，就说明图片已经遍历完了，再重0开始
                if(currentIndex==list.length){
          
                    currentIndex=0
                }
                //每次调用函数时，就会进行遍历，如果判断当前循环i的大小等于index，那么
                for(var i=0;i<list.length;i++){
          
                    if(i==currentIndex){
          
                        list[i].className="current"
                    }else{
          
                        list[i].className="pic"
                    }
                }
            }
            //使用定时器，每隔三秒就调用一下轮播图函数
            setInterval(autoChange,3000)
        </script>
    </body>
    </html>

### 3.css样式 ###

*{
        
        padding: 0;
        margin: 0;
        list-style: none;
    }
    //让图片居中
    .banner{
        
        width: 980px;
        height: 480px;
        margin: 0 auto;
    }
    .banner_pic li img{
        
        width: 980px;
        height: 480px;
    }
    /*将第一张图片进行展示*/
    .banner_pic .current{
        
        display: block;
    }
    /*将除第一张图片进行展示*/
    .banner_pic .pic{
        
        display: none;
    }