在轮播图中，我们可以通过鼠标在特定位置上的滑动来实现元素背景的改变。通常在制作轮播图时，我们首先想到的是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. oracle触发器实例

    8.1 触发器类型 8.1.1 DML触发器 8.1.2 替代触发器 8.1.3 系统触发器 8.2 创建触发器 8.2.1 触发器触发次序 8.2.2 创建DML触发器 8.2.3 创建替代(INS ...

  2. 关于在xp（sp3 专业版）下安装sql2005开发版图解

    今天我在xp上安装sql2005,搞了一上午也没有搞好,最终自己还是搞好,也装了,也卸载了!这里就总结一下,让以后用sql2005的朋友能有个参考!我也是自己在GOOGLE上搜索的! 转自:http: ...

  3. Java基础知识强化56：经典排序之快速排序（QuickSort）

    1. 快速排序的原理: 快速排序(Quicksort)是对冒泡排序的一种改进. 快速排序由C. A. R. Hoare在1962年提出.它的基本思想是:通过一趟排序将要排序的数据分割成独立的两部分,其 ...

  4. Linux命令初步了解

    知识点: 1.虚拟控制台: 在系统启动时直接进入字符工作方式后,系统提供了多个(默认为6个)虚拟控制台.每个虚拟控制台可以相互独立使用,互不影响. 可以使用Alt+F1~Alt+F6进行多个虚拟控制台 ...

  5. 服务器重启后Oracle监听服务没有自动启动的解决方案

    最近一直在被这样一个问题烦恼,就是服务器断电重启后,Oracle监听服务没有正常自动启动(监听服务已经设置为自启动). 具体是这样的,监听服务设置为开机自启动,Oracle数据库服务设置为开机延时启动 ...

  6. 动态代理写connection连接池Demo

    public class JdbcUtil2 { //声明连接池<放到LinkedList中,操作其中对象的速度快 只需要改变连接> private static LinkedList&l ...

  7. 初次窥见智能指针auto_ptr和shared_ptr

    #include <memory>//shared_ptr要用的头文件 using namespace std; class A //测试auto_ptr和shared_ptr的delet ...

  8. mybatis入门，基本案例和xml讲解

    mybatis入门 先举一个入门案例 1)创建一个mybatis-day01这么一个javaweb工程或java工程 2)导入mybatis和mysql/oracle的jar包到/WEB-INF/li ...

  9. C++ 知识点1

    typedef的陷阱 严格来说typedef并不是定义别名,而是定义类型,比如typedef int a;按照大部分书本说来,就是把a看做int,这种说法初学看来是正确的,也易于理解,但是遇到type ...

  10. JavaScript 高级程序设计 第5章引用类型 笔记

    第五章 引用类型 一.object类型 1.创建方法: 1.使用new 操作符创建 var person=new object() Person.name=”Nicholasa” Porson.age ...