【CSS3】选择器-纯css实现轮播

CSS选择器

  • 基本选择器
  1. 通配符选择器:*;
  2. 元素选择器:元素标签;
  3. class选择器:相当于身份证上的名称;
  4. id选择器:相当于身份证号(唯一性);
  • 多元素组合选择器
  1. 多元素选择器 E,F  选择所有E元素或者F元素;
  2. 后代选择器 E F  选择所有属于E元素后代的F元素,即E元素的下n级元素F;
  3. 子元素选择器 E > F 选择所有E元素的子元素F,即E元素的下一级元素F;
  4. 毗邻选择器 E + F 选择所有紧随E元素的同级元素F,即跟在E后面的第一个兄弟元素;
  • 属性选择器
  1. [att] 选择所有具有att属性的元素;
  2. [att=val] 选择所有att属性等于val的元素;
  3. [att~=val] 选择所有att属性包含val或者等于val的元素,val为一个单独的词;
  4. [att|=val] 选择所有att属性为val或者val-开头的元素;
  5. [att1][att2=val] 选择所有拥有att1属性同时具有att2等于val的元素;
  6. [att*=val] 选择所有att属性包含val的元素,val可以为一个词中的一部分;
  7. [att^=val] 选择所有att属性以val开头的元素,val可为一个词中的一部分;
  8. [att$=val] 选择所有att属性以val结束的,val可以为一个词中的一部分;
  • 伪类
  1. 伪类选择器:link , :visited , :hover , :active;(可查看上一随笔:伪元素与伪类)
  2. 伪元素选择器:before , :after;
  3. E:target 当a标签获取焦点href=""所对应的E元素锚点;
  4. E:disabled 表示不可点击的表单控件;
  5. E:enabled 表示可点击的表单控件;
  6. E:checked 表示已选中的checkbox或radio;
  7. E:first-line 表示E元素集合中的第一行;
  8. E:first-letter 表示E元素中的第一个字符;
  9. E::selection 表示E元素在用户选中文字时;
  10. E:not(selector) 选择非selector选择器的每个元素;
  11. E~F 表示E元素后的所有兄弟F元素。
  • 结构性伪类
  1. E:nth-child(n) 表示E父级的所有子元素集合中的第n个子节点(2n(even)匹配偶数行,2n-1(odd)匹配奇数行);
  2. E:nth-last-child(n) 表示E父级所有子元素(从后向前)集合中的第n个子节点;
  3. E:nth-of-type(n) 表示E父级的子元素E的集合中第n个节点(区分标签类型);
  4. E:nth-last-of-type(n) 表示E父级的子元素E(从后向前)集合中的第n个子节点(区分标签类型);
  5. E:empty 表示E元素中没有子节点(不能有空格、回车),子节点包含文本节点;

采用伪类实现轮播:

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>伪类选择器--轮播</title>
        <style>
            body,ul{margin: 0; padding: 0;}
            ul{list-style: none;}
            img{border:0;vertical-align: middle;}
            .banner{
                position: relative;
                width:375px;
                height: 300px;
                margin: 0 auto;
                border: 1px solid red;
            }
            .banner input{
                display: none;
            }
            .banner .btn{
                position: absolute;
                bottom: 0px;
                left: 50%;
                margin-left: -100px;
                width: 200px;
                text-align: center;
            }
            .btn label{
                display: inline-block;
                width: 25px;
                height: 25px;
                background-color: #ddd;
                border-radius: 50%;
                text-align: center;
                line-height: 30px;
            }
            .banner .img{
                position: relative;
                width: 275px;
                height: 275px;
                margin: 0 auto;
            }
            .img li{
                position: absolute;
                top: 0;
                left: 0;
            }
            .img li img{
                display: none;
            }
            .img li:nth-child(1) img{
                display: block;
            }
            .banner input:nth-child(1):checked ~ .btn label:nth-child(1){
                background-color: red;
                color: #fff;
            }
            .banner input:nth-child(1):checked ~ .img li:nth-child(1) img{
                display: block;
            }
            .banner input:nth-child(3):checked ~ .btn label:nth-child(3){
                background-color: red;
                color: #fff;
            }
            .banner input:nth-child(3):checked ~ .img li:nth-child(3) img{
                display: block;
            }
            .banner input:nth-child(4):checked ~ .btn label:nth-child(4){
                background-color: red;
                color: #fff;
            }
            .banner input:nth-child(4):checked ~ .img li:nth-child(4) img{
                display: block;
            }
            .banner input:nth-child(5):checked ~ .btn label:nth-child(5){
                background-color: red;
                color: #fff;
            }
            .banner input:nth-child(5):checked ~ .img li:nth-child(5) img{
                display: block;
            }
            .banner input:nth-child(2):checked ~ .btn label:nth-child(2){
                background-color: red;
                color: #fff;
            }
            .banner input:nth-child(2):checked ~ .img li:nth-child(2) img{
                display: block;
            }
        </style>
    </head>
    <body>
        <div class="banner">
            <input type="radio" id="radio1" name="radio">
            <input type="radio" id="radio2" name="radio">
            <input type="radio" id="radio3" name="radio">
            <input type="radio" id="radio4" name="radio">
            <input type="radio" id="radio5" name="radio">
            <div class="btn">
                <label for="radio1" class="btn1">1</label>
                <label for="radio2" class="btn2">2</label>
                <label for="radio3" class="btn3">3</label>
                <label for="radio4" class="btn4">4</label>
                <label for="radio5" class="btn5">5</label>
            </div>
            <ul class="img">
                <li class="img1"><img src="images/6.jpg" alt="img"></li>
                <li class="img2"><img src="images/7.jpg" alt="img"></li>
                <li class="img3"><img src="images/5.jpg" alt="img"></li>
                <li class="img4"><img src="images/7.jpg" alt="img"></li>
                <li class="img5"><img src="images/6.jpg" alt="img"></li>
            </ul>
        </div>
    </body>
</html>

效果:

原理:使用input的checked属性来触发img的切换效果(初始默认设置第一个显示,其他隐藏),同时利用label与input的关联性来实现点击事件。注意:input元素组name属性需设置为相同的名称才为单选按钮组!

时间: 2024-10-11 15:52:43

【CSS3】选择器-纯css实现轮播的相关文章

纯CSS焦点轮播效果-功能可扩展

纯CSS3实现模拟焦点轮播效果,支持JQ等扩展各项功能.废话少说,直接贴代码. 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1"> 5 <meta name="format-detection" cont

纯css实现轮播图

轮播图的实现原理其实是比较简单的 举个例子 <div class="main"> <div class="div-main"></div> </div> main的宽度是100px div-main的宽度是500px 我们用js控制div-main往左或往右移动,这样就实现了轮播,简单把 好了,先介绍个 css3的api animation: myfirst 5s linear 2s infinite alternat

HTML5 CSS3专题 纯CSS打造相册效果

转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/30993277 今天偶然发现电脑里面还有这样的一个例子,感觉效果还不错,不记得啥时候下载的了,也好久没上w3cfuns了,怀念学习前台的日子,给大家分享下. 效果图: 效果是不是还是很不错的,最主要的是没有使用一行js,这才是亮点. 先看html文件: <body> <div id="gallery"> <h1>纯CSS3相册效果&l

使用css实现轮播图

使用css3实现图片轮播 前言:实现图片轮播的方式有很多种 ,例如js ,css 等等. 本文主要讲述使用纯css3实现轮播图 工具介绍: 使用的编辑器: Hbuilder 进入正题 html代码: <div id="slide_show"> <div id="photos"> <!-- 作者:JavaBuild 时间:2018-10-21 描述:轮播图 --> <img id="first_slide_photo

用 CSS 做轮播图

对于用 css 实现一个轮播图的缘由,是那时候刚开始接触前端,完全还不懂 js.但是有一个项目(就是一个用来应付面试的作品)需要做一个轮播的效果,当时第一反应就是用 css3 自定义动画 -webkit-animation.做出来的效果自己觉得还可以,唯一的不足就是鼠标点击切换 banner 图和指定到某个图.如果项目中不需要切换变换图片的需求,用 css3 做,何尝不是一种办法.不多说,先上代码: html 代码如下: <div class="test"> <a h

基于css制作轮播图的部分效果

在轮播图中,我们可以通过鼠标在特定位置上的滑动来实现元素背景的改变.通常在制作轮播图时,我们首先想到的是js中的交互.可是,如果我们无法使用js,只能单纯的靠css又该如何实现这一效果呢?下面,本人将向大家介绍一种最近实验出来的一种方法. 在介绍这种方法之前,本人觉得对于css中的某些伪类选择器有必要进行进一步的分析. hover这个伪类选择器表示的是当鼠标移动到元素上时元素的反应.这一特性与js中的mousemove事件十分的相近,那么其是不是可以被近视地看做该事件呢?下面我们来做一个例子:

CSS实现轮播效果

还没有学习如何用JS实现轮播图效果,所以就用CSS做了一个假的~ 氮素!目前只调出三个图实现轮播,图越多代码就越复杂,后面就没调了,才不是因为我懒_(:з」∠)_ 代码如下↓↓↓ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <styl

Jquery图片轮播和CSS图片轮播

学习Jquery以后,很多时候觉得比写源生代码要简单一点.我们用JQuery做了一个图片轮播的动画,感觉比写CSS要简单一些.下面我来具体讲一下是怎么用JQuery来写. <body> <div class="img_div"> <img class="img1" src="../image/img1.jpg" /> <img class="img2" src="../ima

CSS3——animation的基础(轮播图)

作为前端刚入门的小菜鸟,只想记录一下每天的小收获 对于animation动画 1.实现动画效果的组成: (1)通过类似Flash的关键帧来声明一个动画 (2)在animation属性中调用关键帧声明的动画 2.animation是一个复合属性包括很多的子属性: animation-name:用来指定一个关键帧动画的名称,这个动画名必须对应一个@keyframes 规则.CSS 加载时会应用animation-name 指定的动画,从而执行动画. animation-duration 用来设置动画