美文网首页Web 前端开发
利用纯CSS制作轮播图

利用纯CSS制作轮播图

作者: 知识搬运工horace | 来源:发表于2017-08-27 16:00 被阅读0次
图片轮播效果图

做这种轮播图我们先要理解checked标签,label标签。

label:

标签为 input 元素定义标注(标记)。

label 元素不会向用户呈现任何特殊效果。不过,它为鼠标用户改进了可用性。如果您在 label 元素内点击文本,就会触发此控件。就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。

标签的 for 属性应当与相关元素的 id 属性相同。checked:checked 属性规定在页面加载时应该被预先选定的 input 元素。

checked 属性 与 或 配合使用。

checked 属性也可以在页面加载后,通过 JavaScript 代码进行设置。

首先我们先理清他的逻辑关系:

1:我们先建好div盒子用来放图片;

2采用checked标签来做选择事件。

html部分:

<div class="div1"></div>

<div class="div2></div>

这是盒子是用来放背景图片的。

建好div盒子的时,我们需要在CSS样式中将第一个DIV盒子里的图片显现,第二个div盒子给凸显出来。

.div1{

background:url(1.jpg);

background-size:1226px 460px;

opacity:1;

.div2{

background:url(2.jpg);

background-size:1226px 460px;

opacity:0;

这样我们上面整体的div盒子部分代码完成了,这个时候,我们需要做点击操作事件,我采用input来做原点。

<input type="radio" name="x" id="a" checked>

<label for="a" class="i"></label>

<input type="radio" name="x" id="b" checked>

<label for="b" class="i"></label>

写好原点的代码后,我们此时就需要把原点和div盒子给结合起来。

#a:checked~.div1{

opacity:1;

}

#b:checked~.div2{

opacity:1;

}

这是做轮播图的核心代码部分,做好之后,还需要用到position做定位,将原点的位置调整好。

相关文章

  • 利用纯CSS制作轮播图

    做这种轮播图我们先要理解checked标签,label标签。 label: 标签为 input 元素定义标注(标记...

  • 纯css3:radio+label实现轮播图

    预览地址:纯css3:radio+label实现轮播图 轮播图这东西,我相信只要是做前端的,肯定都做过,不过大部分...

  • task30 用jQuery做个轮播吧

    示例:苹果风格的轮播科技感十足的轮播可能是最厉害的轮播组件纯 CSS 轮播 走马灯代码地址走马灯预览地址思考静态图...

  • 纯css实现轮播图

    主体思想 准备相同大小的多个图片 将要展示图片横排放在一个图片容器里面 在图片容器外再加一个展示容器,展示容器大小...

  • 纯CSS实现轮播图

    天天写前端的你,会自己写一个轮播图吗,而且不能用js哦,知道轮播图的原理吗? 今天我们要讲的是如何只用css实现轮...

  • 两种纯CSS轮播图

    忙碌的618过后,抽点时间回顾最近这段时间CSS选择器和CSS动画的应用学习试了试用纯CSS来实现轮播图效果。 自...

  • 三种样式的轮播图

    一、100%比例轮播图 HTML代码 CSS样式 js代码 二、手动箭头轮播图 三、简易轮播图

  • 轮播图

    轮播图01 html css js

  • css实现无限轮播-css(5)

    主要知识点: animation 纯css实现无间隙轮播图效果,鼠标悬停后可暂停 demo 请在chrome下预览...

  • 纯CSS实现轮播图效果

    今天是大年三十,猴年最后一天。为了完成自己在年初定的每周一篇前端周记的目标,又因为之后就要开启疯狂百年模式,所以决...

网友评论

    本文标题:利用纯CSS制作轮播图

    本文链接:https://www.haomeiwen.com/subject/uvoudxtx.html