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

最新推荐文章于 2024-03-29 11:19:59 发布

五小悟

最新推荐文章于 2024-03-29 11:19:59 发布

阅读量232

点赞数

分类专栏： web前端文章标签： javascript 前端 css

本文链接：https://blog.csdn.net/Leihaifei/article/details/127950018

版权

web前端专栏收录该内容

2 篇文章 1 订阅

订阅专栏

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;
}