在轮播图中，我们可以通过鼠标在特定位置上的滑动来实现元素背景的改变。通常在制作轮播图时，我们首先想到的是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. uvalive 4851 Restaurant（扫描法）

    题意:有一个M*M的网格,坐标[0...M-1,0...M-1] 网格里面有两个y坐标同样的宾馆A和B.以及n个餐厅,宾馆AB里面各有一个餐厅,编号1,2,其它餐厅编号3-n.如今你打算新开一家餐厅. ...

  2. Git使用之基于SSH的Gitserver的client配置(下篇)

    1.  软件安装 Git-1.9.2-preview20140411 TortoiseGit-1.8.8.0-64bit.msi 1.1 安装msysgit 很easy,基本就是一路下一步,有几个地方 ...

  3. LOADRUNNER8.1卸载

    卸载LOADRUNNER8.1后,不能正常又一次安装的问题. Loadrunner 8.1 安装1.下载Loadrunner8.1 (官方英文版) 2.安装Loadrunner8.1 3.破解:htt ...

  4. canvas-画蜗牛

    <!doctype html><html lang="en"> <head> <meta charset="UTF-8" ...

  5. SearchBox( 搜索框) 组件

    一． 加载方式//class 加载方式<input id="ss" class="easyui-searchbox" style="width: ...

  6. MacOS U盘安装

    通过Mac上的App Store下载安装程序 插入U盘 启动终端 输入命令  sudo /Applications/Install\ OS\ X\ El\ Capitan.app/Contents/R ...

  7. HTML5框架、背景和实体、XHTML的使用规范

    HTML5框架 cols :竖排 rows:横排,frameset frame已弃用  iframe仍保留使用.用法: Target属性: HTML5实体 XHTML的使用规范

  8. (转)js 正则表达式之test函数讲解

    该方法的返回值是布尔值,通过该值可以匹配字符串中是否存在于正则表达式相匹配的结果,如果有匹配内容,返回ture,如果没有匹配内容返回false,该方法常用于判断用户输入数据的合法性,比如检验Email ...

  9. ORACLE创建OEM是老爱报的错误【weber出品】

    还是采用静默安装,手工建库完成后.在安装的OEM的时候一直报这个错误.这里稍微记载以下解决方案: Database connection through listener failed. Fix th ...

  10. iOS_SN_UITableView的优化

    1.提前计算并缓存好高度(布局),因为heightForRowAtIndexPath:是调用最频繁的方法. 2.异步绘制,遇到复杂界面,遇到性能瓶颈时,可能就是突破口. 3.滑动时按需加载,这个在大量 ...