在轮播图中，我们可以通过鼠标在特定位置上的滑动来实现元素背景的改变。通常在制作轮播图时，我们首先想到的是js中的交互。可是，如果我们无法使用js，只能单纯的靠css又该如何实现这一效果呢？下面，本人将向大家介绍一种最近实验出来的一种方法。

在介绍这种方法之前，本人觉得对于css中的某些伪类选择器有必要进行进一步的分析。

hover这个伪类选择器表示的是当鼠标移动到元素上时元素的反应。这一特性与js中的mousemove事件十分的相近，那么其是不是可以被近视地看做该事件呢？下面我们来做一个例子：

 <style>

.wrap{margin:0 auto;width:200px;height:200px;background:red;}

.button{width:50px;height:50px;background:green;}

.wrap:hover{background:yellow;}

</style>

<div class="wrap">

<div class="button"></div>

</div>

　　在这个例子中，我们将鼠标移向wrap盒子里的button盒子中时，里面的盒子背景没有改变，外面的盒子背景颜色变为了黄色。这是因为我们只在外面的盒子上设置了hover的样式，而里面的盒子没有设置，故而改变样式的只能是外面的盒子。那么，是否可以由此推断出css中的hover选择器也有js中事件的冒泡特性（在父元素和子元素上通是添加相同的事件，当触发子元素的该事件时，父元素也会触发该事件。）呢？要想解决这一问题，关键之处是当鼠标移动到绿色盒子中时，是先触发了子元素的hover再触发父元素的hover还是直接触发了父元素的hover。如果是前者，在页面中，子元素的位置不在父元素之中时，上述的效果仍会产生，如果不是，上述的效果不会发生。这时，我们只需要将子元素的位置移动到父元素之外即可，此时，子元素的css样式变为了

.button{

　　width:50px;

　　height:50px;

　　background:green;

　　position:absolute;

　　top:250px;

}

　　

这里我们采用了绝对定位，将子元素移动到了父元素之外。此时，当我们再将鼠标移动到子元素中时，父元素的背景发生了改变。由此可以看出，css中的hover选择器的确如js中的事件那样具有冒泡特性。

知道了这点，我们再解决轮播效果接简单多了。我们只需要在父元素中设置宽高，并隐藏超出部分（overflow：hidden；），然后再在子元素中设置背景图片，最后在子元素中再添加子元素以作背景切换的按钮，并将其定位即可达到想要的效果。这里，本人做了一个小例子：

<!doctype html>

<html lang="en">

 <head>

  <meta charset="UTF-8">

  <title>index</title>

  <style>

  /*清除默认间距*/

  *{

margin:0;padding:0;

  }

  /*外层布局*/

.container{

width:600px;

height:300px;

margin:0 auto;

background:url(img/0.png) no-repeat left top;

background-size:100% 100%;

position:relative;

overflow:hidden;

}

ul{

list-style-type:none;

width:1800px;

height:300px;

}

ul li{

width:600px;

height:300px;

float:left;

}

/*按钮设置*/

.container ul li div{

width:30px;

height:30px;

background:red;

line-height:30px;

font-size:20px;

text-align:center;

border-radius:15px;

color:blue;

position:absolute;

z-index:5;

}

/*按钮定位，相对于外层容器*/

.first div{top:256px;left:500px;}

.second div{top:256px;left:533px;}

.third div{top:256px;left:565px;}

/*内层li背景设置*/

.first{

background:url(img/0.png) no-repeat left top;

background-size:100% 100%;

}

.second{

background:url(img/1.jpg) no-repeat left top;

background-size:100% 100%;

}

.third{

background:url(img/2.jpg) no-repeat left top;

background-size:100% 100%;

}

/*鼠标移入时，li向左平移*//*基于html的冒泡捕获，当点击li内的元素时，默认也点击了li元素*/

.second:hover{

transform:translate(-600px,0);

}

.third:hover{

transform:translate(-1200px,0);

}

  </style>

 </head>

 <body>

   <div class="container">

<ul>

<li class="first"><div class="btn">1</div></li>

<li class="second"><div class="btn">2</div></li>

<li class="third"><div class="btn">3</div></li>

</ul>
  </div>

 </body>

</html>

在上述例子中，我们移动鼠标，当其处于不同的按钮上时，背景图片发生了改变。

基于css制作轮播图的部分效果的更多相关文章

  1. 使用css制作轮播图

    <!--HTML代码--> <!DOCTYPE html> <html lang="en"><head> <meta char ...

  2. 基于zepto使用swipe.js制作轮播图demo

    在移动web开发中,由于手机界面较小,为了能展示更多的图片经常使用轮播图并且还需要考虑到手机流量的问题,通过请教他人以及百度,个人感觉swipe.js比较好用 它是一个纯javascript工具,不需 ...

  3. 用 CSS 做轮播图

    对于用 css 实现一个轮播图的缘由,是那时候刚开始接触前端,完全还不懂 js.但是有一个项目(就是一个用来应付面试的作品)需要做一个轮播的效果,当时第一反应就是用 css3 自定义动画 -webki ...

  4. 基于skitter的轮播图炫酷效果，幻灯片的体验

    概述 包含各种炫酷的轮播切换效果,插件小巧,与其他插件无冲突,可用于移动端和PC端 详细 代码下载:http://www.demodashi.com/demo/11939.html 你还在用原生的js ...

  5. 纯CSS实现轮播图效果，你不知道的CSS3黑科技

    前言 轮播图已经是一个很常见的东西,尤其是在各大App的首页顶部栏,经常会轮番显示不同的图片. 一提到轮播图如何实现时,很多人的第一反应就是使用Javascript的定时器,当然这种方法是可以实现的. ...

  6. 拓展-教你手把手用纯CSS写轮播图

    先看成品图[示例网址:][1] [1]: https://huruji.github.io/css-imitate-js/slider/index.html一.随便说几句####css3动画效果的强大 ...

  7. 使用css实现轮播图

    使用css3实现图片轮播 前言:实现图片轮播的方式有很多种 ,例如js ,css 等等. 本文主要讲述使用纯css3实现轮播图 工具介绍: 使用的编辑器: Hbuilder 进入正题 html代码: ...

  8. 纯css实现轮播图

    轮播图的实现原理其实是比较简单的 举个例子 <div class="main"> <div class="div-main"></ ...

  9. 基于BootStrap的轮播图

    准备 先设计一个承载轮播图的区域:四周向外阴影.扁平圆角: 1 #myShuffArea{ 2 width: 50%; 3 height: 300px; 4 border: solid 1px gai ...

随机推荐

  1. UVA 10651 Pebble Solitaire(bfs + 哈希判重(记忆化搜索?))

    Problem A Pebble Solitaire Input: standard input Output: standard output Time Limit: 1 second Pebble ...

  2. Linux系统中C&Cpp程序开发（一）

    之前一直在Windows系统下进行程序的设计,近期开始学习使用Linux系统,因而打算将程序开发也转移到Linux系统下.今天先简单介绍一下该系统下的C程序开发步骤. 首先要预先安装vim和gcc工具 ...

  3. Windows Bridge for iOS: Let’s open this up

    (原文翻译过来的,原文链接http://blogs.windows.com/buildingapps/2015/08/06/windows-bridge-for-ios-lets-open-this- ...

  4. Oracle除去换行符的方法

    Oracle除去换行符的方法   很多数据存进数据库后,可能需要将整条数据取出,并用特殊 符号分割,而且整条数据必须是处于一行,如此,如果数据出现 换行的情况,那么读取时就有问题.     这个时候就 ...

  5. 启动外部exe程序

    Process myProcess = new Process();myProcess.StartInfo.FileName = pathName;myProcess.Start();其中的pathN ...

  6. 东软实训2-在jsp中使用javaBean

    在JSP中可以像使用普通类一样访问JavaBean,在脚本元素中实例化类的对象,调用对象的方法.JSP提供了3个动作元素,和来访问JavaBean. 1.1 动作用于初始化JavaBean,或者定位一 ...

  7. DOM不同的结点类型

    1)node类型 nodeName(what node) and nodeValue(always null) node父子之间可以用childNodes来表示 firstChild,childNod ...

  8. 机器学习理论与实战（十）K均值聚类和二分K均值聚类

    接下来就要说下无监督机器学习方法,所谓无监督机器学习前面也说过,就是没有标签的情况,对样本数据进行聚类分析.关联性分析等.主要包括K均值聚类(K-means clustering)和关联分析,这两大类 ...

  9. MySQL 分区表 partition线上修改分区字段，后续进一步学习partition (1)

    公司线上在用partition,有一个表的分区字段错了,需要重建,结果发现没有办法像修改主键字段或者修改索引字段那样直接一条sql搞定.而是需要建临时表,有down time,所以去仔细看了文档,研究 ...

  10. Backbone的RESTFUL API 解释

    RESTFUL API 从服务器获取模型:collection.fetch();//发送GET请求 地址为collection.url; 存取模型至服务器: model.save();//发送PUT请 ...