使用css实现轮播效果

最新推荐文章于 2024-06-26 20:04:17 发布

halftion

最新推荐文章于 2024-06-26 20:04:17 发布

阅读量6k

点赞数 11

分类专栏：网站相关文章标签： HTML css 前端

本文链接：https://blog.csdn.net/qq_41061352/article/details/79244886

版权

网站相关专栏收录该内容

8 篇文章 1 订阅

订阅专栏

使用css制作简单的轮播效果，参考了以下代码：css实现的轮播和点击切换(无js版)

之前写过一个点击切换的教程，这里附上链接：使用css实现点击切换效果

与点击切换一样，首先先制作一个容器，用来容纳所显示的内容：

HTML代码：

<html>
<head>
    <meta charset="utf-8">   
    <link href="css/test.css" rel="stylesheet" type="text/css" media="all" />
</head>
<body>
<div class="contain">
    <ul>
        <li class="one">one</li>
        <li class="two">two</li>
        <li class="three">three</li>
    </ul>
</div>
</div>
</body>
</html>

同点击切换一样，根据需要设置ul的长度，这里先制作三个切换窗口，因此将ul的宽度设置为容器宽度的300%，li即为每次切换时显示的子元素，宽度设置为显示容器的100%；为了将多出来的部分隐藏起来，此时就要给父元素（即显示窗口）设置overflow:hidden;属性

CSS代码：

.contain{
    position: relative;
    margin:auto;
    width: 600px;
    height: 200px;
    text-align: center;
    font-family: Arial;
    color: #FFF;
    overflow: hidden;
}

.contain ul{
    margin:10px 0;
    padding:0;
    width: 1800px;
}

.contain li{
    float: left;
    width: 600px;
    height: 200px;
    list-style: none;
    line-height: 200px;
    font-size: 36px;
}

.one{
    background: #9fa8ef;
}

.two{
    background: #ef9fb1;
}

.three{
    background: #9fefc3;
}

由于我们将ul设置成了一个宽度为父容器300%长条，此时，就可以通过修改margin-left属性值将其左移，以此实现切换效果，接下来，创建一个动画：

CSS代码：

@keyframes marginLeft{
    0%{margin-left: 0;}
    28.5%{margin-left: 0;}
    33.3%{margin-left: -600px;}
    62%{margin-left: -600px;}
    66.7%{margin-left: -1200px;}
    95.2%{margin-left: -1200px;}
    100%{margin-left: 0;}
}

令ul标签使用这个动画，这里将动画的长度设置为10.5s，无限次播放

HTML代码：

<html>
<head>
    <meta charset="utf-8">   
    <link href="css/test.css" rel="stylesheet" type="text/css" media="all" />
</head>
<body>
<div class="contain">
    <ul class="slide-auto">
        <li class="one">one</li>
        <li class="two">two</li>
        <li class="three">three</li>
    </ul>
</div>
</div>
</body>
</html>

CSS代码：

.contain .slide-auto{        
    animation:marginLeft 10.5s infinite;
}

设置0.5秒的平滑过渡

CSS代码：

.contain ul{transition:all 0.5s;}

这样，轮播效果就做好了，demo页面：

https://www.shijiewubaiqiang.top/old/test/test-1.html

halftion

关注

11
点赞
踩
38

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录