在轮播图中，我们可以通过鼠标在特定位置上的滑动来实现元素背景的改变。通常在制作轮播图时，我们首先想到的是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. 关于使用mybatis插件自动生成代码

    1.安装 mybatis 插件: 在 eclipse 中 点击 help-->Install New Software...--> Add --> local  选择插件中eclip ...

  2. 玩转Win32开发（2）：完整的开发流程

          上一篇中我给各位说了一般人认为C++中较为难的东西——指针.其实对于C++,难点当然不局限在指针这玩意儿上,还有一些有趣的概念,如模板类.虚基类.纯虚函数等,这些都是概念性的东西,几乎每一 ...

  3. POJ 1386 有向图欧拉通路

    题意:给你一些字符串,这些字符串可以首位相接(末位置如果和另一个字符串的首位置相同的话就可以相连) .然后问你是否可以全部连起来. 思路:就是取出每个字符串的首尾位置,然后求出出度和入度,根据有向欧拉 ...

  4. ASP.NET常用编程代码(二)

    1.绑定在DataList中的DropDownList private void dlistOrder_EditCommand(object source, System.Web.UI.WebCont ...

  5. Multipatch对象

    Multipatch对象是 TriangleStrip 和TriangleFan, Trangle,Ring对象的集合 TriangleStrip TriangleFan Trangle

  6. linux添加JAVA环境变量

    root用户: 1.修改文件vim /etc/profile 添加以下信息: export JAVA_HOME=/home/jdk1..0_79 (这里需要添加自己的JDK安装目录) export C ...

  7. 初学Java ssh之Spring 第一篇

    之前虽然毕业前实习的工作是使用的C# .NET语言,但是,毕业后还是果断应聘Java.虽然自己对Java的理解不如C#深入,只是对基础知识比较熟悉,但还是义无返顾了··· 虽然应聘经历比较坎坷,但最终 ...

  8. 查看Linux相关信息

    1."uname -a ",可显示电脑以及操作系统的相关信息. 2."cat /proc/version",说明正在运行的内核版本. 3."cat / ...

  9. java学习笔记 (2) —— Struts2类型转换、数据验证重要知识点

    1.*Action.conversion-properties 如(point=com.test.Converter.PointListConverter) 具体操作类的配置文件 2.*Action. ...

  10. Python 多线程 队列 示例

    Python3,开一个线程,间隔1秒把一个递增的数字写入队列,再开一个线程,从队列中取出数字并打印到终端 #! /usr/bin/env python3 import time import thre ...