纯css实现轮播和点击切换效果(无JS)

前端 思享 287浏览
摘要:
接下来,根据需要设置ul的长度。这里,首先制作三个切换窗口,因此ul的宽度被设置为容器宽度的300%,li是每次切换时显示的子元素,宽度被设置为所显示容器的100%。所有多余的部分都被隐藏起来,这样我们就可以通过修改ul的margin-left属性的值来实现简单的切换效果。接下来写三个单选框进行切换,因为要实现点击后切换的效果。此时将lable指向对应输入标签的id,使用伪class: checked实现选择切换的效果。

使用css制作简单的点击切换效果,参考了以下教程:css实现的轮播和点击切换(无js版)

首先先制作一个容器,用来容纳所显示的内容:

接下来,根据需要设置ul的长度,这里先制作三个切换窗口,因此将ul的宽度设置为容器宽度的300%,li即为每次切换时显示的子元素,宽度设置为显示容器的100%;

多出来的部分也被显示出来了,此时就要给显示窗口设置overflow:hidden;属性,将多出来的部分隐藏起来

多出来的部分全部被隐藏起来了,这样,我们就可以通过修改ul的margin-left属性值实现简单的切换效果。

接下来写三个单选框用于切换,因为需要实现点击之后才进行切换的效果,此时将lable指向相应的input标签的id并使用伪类:checked来实现选择切换的效果。

效果如下:

纯css实现轮播和点击切换效果(无JS)

最后,再给ul标签添加transition:all 0.5s;属性,设置0.5秒的平滑过渡 css代码:

.contain ul{transition:all 0.5s;}

这样,就可以实现页面的平滑切换了。

备注:一些步骤代码重复了,所以只放上最终的html和css。逐步分解的代码请移至原文查看

代码

html

<html></html>
<head>
    <meta charset="utf-8">   
    <link href="./test.css" rel="stylesheet" type="text/css" media="all">
</head>
<body>
<div class="contain">
    <input type="radio" name="sildeInput" value="0" id="Input1" hidden>
    <label class="label1" for="Input1">1</label>
    <input type="radio" name="sildeInput" value="1" id="Input2" hidden>
    <label class="label2" for="Input2">2</label>
    <input type="radio" name="sildeInput" value="1" id="Input3" hidden>
    <label class="label3" for="Input3">3</label>
    <ul>
        <li class="sildeInput-1">one-点击切换</li>
        <li class="sildeInput-2">two-点击切换</li>
        <li class="sildeInput-3">three-点击切换</li>
    </ul>
</div>
</body>
</html>

css

.contain{
        position: relative;
        margin:auto;
        width: 600px;
        height: 200px;
        text-align: center;
        font-family: Arial;
        color: #FFF;
    }
.contain{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;
}
.sildeInput-1{
    background: #9fa8ef;
}

.sildeInput-2{
    background: #ef9fb1;
}

 .sildeInput-3{
    background: #9fefc3;
}

.label1{
    position: absolute;
    bottom: 10px;
    left: 0px;
    width: 20px;
    height: 20px;
    margin: 0 10px;
    line-height: 20px;
    color: #FFF;
    background: #000;
    cursor: pointer;
}/*用于调整单选框的属性以及位置*/
.label2{
    position: absolute;
    bottom: 10px;
    left: 30px;
    width: 20px;
    height: 20px;
    margin: 0 10px;
    line-height: 20px;
    color: #FFF;
    background: #000;
    cursor: pointer;
}/*用于调整单选框的属性以及位置*/
.label3{
    position: absolute;
    bottom: 10px;
    left: 60px;
    width: 20px;
    height: 20px;
    margin: 0 10px;
    line-height: 20px;
    color: #FFF;
    background: #000;
    cursor: pointer;
}/*用于调整单选框的属性以及位置*/
#Input1:checked~ul{ margin-left: 0;}/*第一张点击切换*/
#Input1:checked~.label1{ background: #535353;}/*点击后改变单选框颜色*/
#Input2:checked~ul{ margin-left: -600px;}/*第二张点击切换*/
#Input2:checked~.label2{ background: #535353;}/*点击后改变单选框颜色*/
#Input3:checked~ul{ margin-left: -1200px;}/*第三张点击切换*/
#Input3:checked~.label3{ background: #535353;}/*点击后改变单选框颜色*/

.contain ul{transition:all 0.5s;}

推荐阅读

右侧固定宽度,左侧自适应两栏布局

最近修改了一个主题。原始主题的左侧是侧边栏,右侧是内容体。在代码中,侧栏代码放在主要内容之前。我的习惯是主要内容在左边,主要内容在前面,侧边栏在右边。于是我在网上搜了一下,找到了两种实现方式。一般来说,一种方法是使用cal()。我用的是这个,第二个是......

js实现内容超出一定高度后折叠 点击展开收起

200px以外的部分内容被隐藏,底部显示蒙版图层和查看全文按钮。类似的效果请见csdn的博客内容页。#渐变{宽度:100%;高度:50px位置:绝对;底部:0;左:0;背景:-moz-linear-gradient;背景:-WebKit-gradie......

css3怎么实现文字闪烁效果

如果不需要渐变闪烁效果,我们可以在关键帧动画中定义50%和50.1%的不透明度值。...