在轮播图中，我们可以通过鼠标在特定位置上的滑动来实现元素背景的改变。通常在制作轮播图时，我们首先想到的是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. 互联网程序设计c++

    地址:ftp.sist.stdu.edu.cn用户名:lzh_hlw20133密码:lzhstdftp端口:2014

  2. js比较两个日期大小

    //比较两个日期大小 function dateCompare(startDate,endDate){ var aStart=startDate.split('-'); //转成成数组,分别为年,月, ...

  3. ios 常用字符串NSString的操作

    //将NSData转化为NSString        NSString* str = [[NSString alloc] initWithData:response encoding:NSUTF8S ...

  4. 10、Cocos2dx 3.0游戏开发找小三之容器篇：Vector、Map、Value

    重开发人员的劳动成果.转载的时候请务必注明出处:http://blog.csdn.net/haomengzhu/article/details/27705613 容器 3.0版本号之前Cocos2d- ...

  5. 从不同层面看cocos2d-x

    一  框架层面 二  Lua层面 三  工具层面 四  android打包 一 框架层     总体来说,cocos2dX提供的一个简便的框架,包括了渲染,动画,事件分发,网络还有UI,物理引擎等几大 ...

  6. structured sparsity model

    Data representation往往基于如下最小化问题:         (1) 其中X是观测到的数据的特征矩阵,D是字典,Z是字典上的描述.约束项和使得字典dictionary和描述code具 ...

  7. poj 3181 Dollar Dayz (整数划分问题－－－递归＋ＤＰ)

    题目:http://poj.org/problem?id=3181 思路:将整数N划分为一系列正整数之和,最大不超过K.称为整数N的K划分. 递归:直接看代码: 动态规划:dp［i］［j］:＝将整数i ...

  8. com.intellij.javaee.oss.admin.jmx.JmxAdminException: com.intellij.execution.ExecutionException idea 导出war 报错

    com.intellij.javaee.oss.admin.jmx.JmxAdminException: com.intellij.execution.ExecutionException 部署到in ...

  9. Drawable与Bitmap 自定义

    Drawable简介 Drawable是Android平下通用的图形对象,它可以装载常用格式的图像,比如GIF.PNG.JPG,当然也支持BMP.相比于View,我们并不需要去考虑如何measure. ...

  10. EF中使用SqlQuery进行参数化查询时抛出异常

    EF中使用带参数的SqlQuery进行查询时,抛出"另一个 sqlparametercollection 中已包含 sqlparameter"异常. 这是由于SqlParamert ...