HTML 简易、易懂版轮播图有图有真相 JavaScript实现

最新推荐文章于 2023-10-04 14:11:52 发布

Poker_旭

最新推荐文章于 2023-10-04 14:11:52 发布

阅读量6.6k

点赞数 22

分类专栏： HTML前端笔记文章标签： html css javascript

本文链接：https://blog.csdn.net/m0_46694056/article/details/107674380

版权

HTML前端笔记专栏收录该内容

1 篇文章 1 订阅

订阅专栏

HTML 简易、易懂版轮播图 JavaScript实现

😂最终效果如下😂
在这里插入图片描述

一、整体布局
HTML代码：

        <ul>
            <li class="lb"><img src="imgs/1.jpg" alt="#"/></li>
            <li class="lb"><img src="imgs/2.jpg" alt="#"/></li>
            <li class="lb"><img src="imgs/3.jpg" alt="#"/></li>
         </ul>

*说明：代码很简单，就是一个无序列表，然后无序列表里面有三个li标签，每个li标签就有一个图片

二、CSS款式装修
简单设置CSS样式：

        ul{
            border: 2px solid black;
            width: 400px;
            height: 300px;
        }
        li,img{
            width: 100%;
            height: 100%;
        }

*说明：这里我们随便给ul标签设置一下宽高度，并且给ul标签加个外框，即：ul{ border: 2px solid black; }显得更加形象化，同时把li标签和图片大小宽高都设置成100%，就可以让li铺满整个ul，img铺满整个li，注意：li前面那个小黑点也属于li标签的一部分

运行效果
在这里插入图片描述
为了让布局显得更加优雅，我们做以下几点：
1、改变body的背景颜色为：body{ background-color: violet; }
2、把li标签前面的小黑点去掉：ul{ list-style-type: none; }
3、加了1、2后运行结果如下：
这是会发现，即使把li标签的小黑点去掉了，但是该小黑点的所处的位置依然还在，还是会把图片挤偏过去，存在有一定的间隙，所以我们再把它的内间距设为0px，即：ul{ padding:0px; }，效果如下：
在这里插入图片描述
4、😊有了以上三条肯定还是不够，我们想要的成效是一个地方循环播放多个图片，所以大概思路就是，将作为父亲元素的ul标签的定位设置成相对定位，即：ul{ position: relative; }同时将作为子元素的三个li标签的布局设置成绝对定位，即：li{ position: absolute; }，这样两者就形成了混合式定位(mix relative and absolute)，这样子所有的子元素就会把父亲元素当成整个屏幕，也就是说你去设置子元素的top和left的大小的时候，这几个子元素就是相对于父亲元素来说，而再也不是相对于整个屏幕来说了O(∩_∩)O~~😄

5、根据4所说的，按照道理来说我们应该把li标签的top和left都设置成0px，使其所有的子元素li标签距离父亲元素ul标签的上、左边沿都为0，即：li{top:0px; left:0px;}，可是之前我已经把子元素li标签的宽高都设置成了100%，所以加不加这两个都是正好铺满整个ul标签。当然我们还是要把ul标签水平居个中哈，这样才更加好看，即：ul{ margin: auto; }运行效果如下😊
在这里插入图片描述 6、😡晕头枯燥，最后一步。我们先把所有li标签的透明度都设置成0，即：li{ opacity: 0; }，将其隐藏，原因待会儿再说😁，效果如下

三、JavaScript轮播效果实现
1、废话少说，放码过来😋
*整体思路：当整个页面加载完，依次将各个li标签显示出来

window.onload = function(){
    var arr = document.getElementsByClassName("lb");
    var i = 0;
    arr[0].style.opacity = 1;
    setInterval(function(){
        if(i>2){
            i=0;
            for(var j=0;j<arr.length;j++){
                arr[j].style.opacity = 0;
            }
        }
        arr[i].style.opacity = 1;
        i++;
    },2000);

}

解释说明：
1、var arr = document.getElementsByClassName('lb')的意思是得到HTML文件里面的所有类名为’lb’，即：class='lb'的元素，可以把函数名拆成get Element By ClassName(‘lb’)，即：获取–>元素–>通过–>类名为’lb’😄。获取之后肯定有三个元素，这三个元素就是那三个li标签，并且从上到下顺序存放在arr数组里面，分别为arr[0]、arr[1]、arr[2]但这个arr数组是个伪数组，并不是真正的数组，只能用使用.lenth这个方法。

2、var i = 0；就是定义一个整型变量i，作为arr数组的下标

3、arr[0].style.opacity = 1;这个的意思是要事先把第一个li标签里面的style里面的opacity属性等于1，说白了就是把第一个li标签显示出来😂，如果没有这句的话，当加载完页面后，那个ul标签块处会啥都没有，就一个框框😱，非常地影响美观😡，所以要加，你可以不加试试看效果

4、setInterval(参数1，参数2)函数的使用，这个函数的功能就是按照一定周期地去执行某个函数。既然是按照一定周期，就说明肯定要有个周期时间，比如我这里的周期就是2000毫秒，即2秒；其次一定周期地去执行某个函数，某个函数，某个函数，那就说明这“某个函数”就是你自己定义函数，阐明你要干什么。

😘比如我这里的“某个函数“的意思就是说先判断i是否大于2，此时发现i=0不是大于2，好，不走if段，将arr[0]显示出来，并且i++。
👇
再次从头循环，发现i=1，还是小于等于2，不走if段，将arr[1]显示出来，并且i++。
👇
再次从头循环，发现i=2，还是小于等于2，还是不走if段，将arr[2]显示出来，并且i++。
👇
再次从头循环，发现i=3，大于2了，就将i归0，并且把arr[0]、arr[1]、arr[2]全部都隐藏
👇然后再来，把arr[0]又显示出来，如此循环下去

😭完整代码
HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/test.css" type="text/css"><link>
    <script type="text/javascript" src="JS/test.js" charset="UTF-8"></script> 
</head>
<body>
     <ul>
        <li class="lb"><img src="imgs/1.jpg" alt="#"/></li>
        <li class="lb"><img src="imgs/2.jpg" alt="#"/></li>
        <li class="lb"><img src="imgs/3.jpg" alt="#"/></li>
    </ul> 
</body>
</html>

CSS

body{
    background-color:violet
}
ul{
    border: 2px solid black;
    width: 400px;
    height: 300px;
    list-style-type: none;
    padding: 0px;
    margin: auto;
    position: relative;
}
li,img{
    width: 100%;
    height: 100%;
}
li{
    position: absolute;
    opacity: 0;
    transition: 1s;
}

JS

window.onload = function(){
    var arr = document.getElementsByClassName("lb");
    var i = 0;
    arr[0].style.opacity = 1;
    setInterval(function(){
        if(i>2){
            i=0;
            for(var j=0;j<arr.length;j++){
                arr[j].style.opacity = 0;
            }
        }
        arr[i].style.opacity = 1;
        i++;
    },2000);
}

*注意：我在css的li标签那里加了transition: 1s;是为了图片切换得更加大众审美，让其更加丝滑~~🤣，不会显得那么生硬。

Poker_旭

关注

22
点赞
踩
83

收藏

觉得还不错? 一键收藏
7
评论
HTML 简易、易懂版轮播图有图有真相 JavaScript实现

HTML 简易版轮播图 JavaScript实现一、整体布局HTML代码： <ul> <li class="lb"><img src="imgs/1.jpg" alt="#"/></li> <li class="lb"><img src="imgs/2.jpg" alt="#"/></li> <li class="lb">
复制链接

扫一扫