jQuery做轮播图

马克社区

发布于 2022-04-15 16:00:13

1.3K0

发布于 2022-04-15 16:00:13

文章被收录于专栏：高端IT高端IT

这是我自己做的一个简单的轮播图，效果图如下：

我觉得轮播图中最主要的是要理解到图片为什么会滑动，是怎么控制的。上面这个我自己做的，是搭好的一个结构，在无序列表中插入需要的图片。然后在插入图片的后面添加一个空的无序列表，作为轮播图中下方的小点。

<div class="box">
            <ul class="imageList">
                <li><img src="img/轮播1.jpg"/></li>
                <li><img src="img/轮播2.jpg"/></li>
                <li><img src="img/轮播3.jpg"/></li>
                <li><img src="img/轮播4.jpg"/></li>
            </ul>
            
            <ul class="num">
                
            </ul>
        </div>

然后就是css中书写样式了，首先肯定得把无序列表中的li从从上至下排列变为水平方向排列，也就是给li添加一个float属性；然后有一点需要注意，轮播图外面的大盒子必须设置为图片的大小，超出的隐藏，这样可以刚刚好显示出一张图片。然后装图片的ul的宽度必须大于或者等于所有图片总宽度。同样，这里也需要运用一个定位的知识，子绝父相。给class为box的盒子设置相对定位，装图片的ul设置绝对定位。这里，尽管轮播图下面几个点没有，但是我们要把样式先写好，然后后面通过JavaScript添加。

主要样式如下：

.box{
    width: 500px;
    height: 300px;
    background-color: lightgrey;
    margin-top: 30%;
    overflow: hidden;
    position: relative;
    
}
.imageList img{
    width: 500px;
    height: 300px;
}
.imageList{
    width: 2500px;
    list-style: none;
    float: left;
    position: absolute;
    
}
.imageList li{
    float: left;
}
 
.box .num{
    position: absolute;
    width: 100%;
    bottom: 10px;
    left: 0;
    text-align: center;
 
}
.box .num li{
    width: 10px;
    height: 10px;
    background-color:white;
    border-radius: 50%;
    display: inline-block;
    margin: 0px 3px;
    cursor: pointer;
}
.box .num li.on{
    background-col

更多内容请见原文，文章转载自：https://blog.csdn.net/weixin_44519496/article/details/118599024

本文系转载，前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

前端性能监控