前戏：

XXXX年XX月XX日，经理交给我一个站点新闻资讯网页开发的活儿。我一个java程序猿，怎么完毕得了网页设计这样高端的活儿呢！

之前尽管有学过一点HTML。CSS的知识。可是在实际的使用中，把页面整的好看非常困难，最后信心没了，就再也不想去做涉及网页开发的事儿了。一心学习java。假设在小公司做java web开发，专门做后台的开发时非常少的。一般还得弄前台页面（PS:做这些前台也非常easy，要么用一些前端框架，要么就是把曾经的项目拷过来再改动下页面）。拿到网页开发这个活儿。我顿时愣了，只是好在不用我去设计页面。仅仅要把美工做好的模板拿过来再进行一下排版就OK了。仅仅写代码当然难不住作为程序猿的我啦！

于是啪啦啪啦的去写代码了。突然发现。咦。这是个什么玩意？每隔一段时间就会显示下一张新闻图片。问了下美工，他说这是一个叫“轮播”的东东，仅仅认为这个东西好奇妙，美工说你去网上找一下做轮播效果的代码，然后改改即可啦~百度了一下，发现搜索到的结果特别多，并且大部分都是用jquery写的，于是随便找到一个效果拿过去用了，效果确实令人惬意。

拿过来改下确实能解决事儿，可是我已经对无脑的复制粘贴感到厌烦了，这终究不是个办法，我不仅要知道他确实能实现这样的效果，并且也要了解它究竟是如何工作的（据我观察。公司的一些程序猿的一些代码都是复制粘贴过来的。你去看里面的一些代码就会认为非常凌乱，有时代码出问题了，你去问他，他竟然不知道！当然我这里不是为了黑大伙。只不过复制代码不会对我们技术的提升有不论什么效果）。于是依据自己的一些理解，提供了这篇jquery轮播效果的解说。假设文中有什么疏漏。还奢望不吝赐教。

正文：

首先看一下效果：

轮播效果分析：

轮播效果大致能够分为3个部分：轮播图片（图片或者是包括容器），控制轮播图显示的button（向左、向右button，索引button(比如上面效果图的顶部的数字button)），每隔一段时间轮流显示轮播图片。
轮播图的显示：要显示的轮播图显示。不须要显示的轮播图隐藏；通常将这些轮播图片以定位的方式重叠在一起，每次显示一张轮播图片。
控制button：鼠标点击或者移到索引button上面时，显示相应索引位置的轮播图。向上、向下button负责控制显示上一张、下一张轮播图片。
其他：一般索引button有激活状态和未激活状态共2种状态；鼠标移到轮播图片上面时应该停止自己主动轮播，鼠标离开时開始自己主动轮播。

轮播效果实现笔记：

jquery提供了丰富的选择器以及用来挑选元素的方法，这极大的简化了我们的开发，比如$(".slider-item").filter(".slider-item-selected")选择了当前处于激活状态的索引button。
两张轮播图的切换显示效果是通过jquery的fadeOut()和fadeIn()方法来实现的，详细的使用參照jquery的api。
CSS透明背景的实现： background: rgba(0, 0, 0, 0.2);filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#33000000,endColorstr=#33000000); （能够參看以下的參看资料），兼容大部分主流浏览器包含IE。为什么不使用opacity呢？由于opacity会使文字也透明（子元素也会透明）。
HTML骨架非常重要，你写的html的结果应该是良好的。

代码部分：

-----------------------------------------------------------------------------------

HTML:

<pre name="code" class="html"><div class="slider">

	<ul class="slider-main">

		<li class="slider-panel">

			<a href="http://blog.csdn.net/ricciozhang" target="_blank"><img alt="关注RiccioZhang的博客" title="关注RiccioZhang的博客" src="images/1.jpg"></a>

		</li>

		<li class="slider-panel">

			<a href="http://blog.csdn.net/ricciozhang" target="_blank"><img alt="关注RiccioZhang的博客" title="关注RiccioZhang的博客" src="images/2.jpg"></a>

		</li>

		<li class="slider-panel">

			<a href="http://blog.csdn.net/ricciozhang" target="_blank"><img alt="关注RiccioZhang的博客" title="关注RiccioZhang的博客" src="images/3.jpg"></a>

		</li>

		<li class="slider-panel">

			<a href="http://blog.csdn.net/ricciozhang" target="_blank"><img alt="关注RiccioZhang的博客" title="关注RiccioZhang的博客" src="images/4.jpg"></a>

		</li>

	</ul>

	<div class="slider-extra">

		<ul class="slider-nav">

			<li class="slider-item">1</li>

			<li class="slider-item">2</li>

			<li class="slider-item">3</li>

			<li class="slider-item">4</li>

		</ul>

		<div class="slider-page">

			<a class="slider-pre" href="javascript:;;"><</a>

			<a class="slider-next" href="javascript:;;">></a>

		</div>

	</div>

</div>

CSS:

* {

	padding: 0px;

	margin: 0px;

}

a {

	text-decoration: none;

}

ul {

	list-style: outside none none;

}

.slider, .slider-panel img, .slider-extra {

	width: 650px;

	height: 413px;

}

.slider {

	text-align: center;

	margin: 30px auto;

	position: relative;

}

.slider-panel, .slider-nav, .slider-pre, .slider-next {

	position: absolute;

	z-index: 8;

}

.slider-panel {

	position: absolute;

}

.slider-panel img {

	border: none;

}

.slider-extra {

	position: relative;

}

.slider-nav {

	margin-left: -51px;

	position: absolute;

	left: 50%;

	bottom: 4px;

}

.slider-nav li {

	background: #3e3e3e;

	border-radius: 50%;

	color: #fff;

	cursor: pointer;

	margin: 0 2px;

	overflow: hidden;

	text-align: center;

	display: inline-block;

	height: 18px;

	line-height: 18px;

	width: 18px;

}

.slider-nav .slider-item-selected {

	background: blue;

}

.slider-page a{

	background: rgba(0, 0, 0, 0.2);

	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#33000000,endColorstr=#33000000);

	color: #fff;

	text-align: center;

	display: block;

	font-family: "simsun";

	font-size: 22px;

	width: 28px;

	height: 62px;

	line-height: 62px;

	margin-top: -31px;

	position: absolute;

	top: 50%;

}

.slider-page a:HOVER {

	background: rgba(0, 0, 0, 0.4);

	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#66000000,endColorstr=#66000000);

}

.slider-next {

	left: 100%;

	margin-left: -28px;

}

JavaScript：

$(document).ready(function() {

	var length,

		currentIndex = 0,

		interval,

		hasStarted = false, //是否已经開始轮播

		t = 3000; //轮播时间间隔

	length = $('.slider-panel').length;

	//将除了第一张图片隐藏

	$('.slider-panel:not(:first)').hide();

	//将第一个slider-item设为激活状态

	$('.slider-item:first').addClass('slider-item-selected');

	//隐藏向前、向后翻button

	$('.slider-page').hide();

	//鼠标上悬时显示向前、向后翻button,停止滑动。鼠标离开时隐藏向前、向后翻button。開始滑动

	$('.slider-panel, .slider-pre, .slider-next').hover(function() {

		stop();

		$('.slider-page').show();

	}, function() {

		$('.slider-page').hide();

		start();

	});

	$('.slider-item').hover(function(e) {

		stop();

		var preIndex = $(".slider-item").filter(".slider-item-selected").index();

		currentIndex = $(this).index();

		play(preIndex, currentIndex);

	}, function() {

		start();

	});

	$('.slider-pre').unbind('click');

	$('.slider-pre').bind('click', function() {

		pre();

	});

	$('.slider-next').unbind('click');

	$('.slider-next').bind('click', function() {

		next();

	});

	/**

	 * 向前翻页

	 */

	function pre() {

		var preIndex = currentIndex;

		currentIndex = (--currentIndex + length) % length;

		play(preIndex, currentIndex);

	}

	/**

	 * 向后翻页

	 */

	function next() {

		var preIndex = currentIndex;

		currentIndex = ++currentIndex % length;

		play(preIndex, currentIndex);

	}

	/**

	 * 从preIndex页翻到currentIndex页

	 * preIndex 整数，翻页的起始页

	 * currentIndex 整数。翻到的那页

	 */

	function play(preIndex, currentIndex) {

		$('.slider-panel').eq(preIndex).fadeOut(500)

			.parent().children().eq(currentIndex).fadeIn(1000);

		$('.slider-item').removeClass('slider-item-selected');

		$('.slider-item').eq(currentIndex).addClass('slider-item-selected');

	}

	/**

	 * 開始轮播

	 */

	function start() {

		if(!hasStarted) {

			hasStarted = true;

			interval = setInterval(next, t);

		}

	}

	/**

	 * 停止轮播

	 */

	function stop() {

		clearInterval(interval);

		hasStarted = false;

	}

	//開始轮播

	start();

});

首先是初始化部分：将除了第一张轮播图片意外的图片都隐藏，而且隐藏向前、向后button。使第一个索引button处于激活状态。

事件部分：通过jquery的hover()绑定鼠标上悬以及离开时的事件处理。 jquery的bind()方法绑定鼠标点击事件处理向前、向后翻动、

轮播控制：pre(), next(), play(), start()開始自己主动轮播，stop()停止自己主动轮播。

上面的js写的比較散，结构也不太好，读起来也比較费力。也不易使用。耦合度较高。下篇将给出一个纯粹的jquery轮播插件，该插件能够定制各种效果。方便的配置以及可扩展。

-----------------------------------------------------------------------------------

以下是总体的代码：

index.html

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>jquery轮播效果图 - by RiccioZhang</title>

<script type="text/javascript" src="scripts/jquery-1.9.1.js"></script>

<style type="text/css">

	* {

		padding: 0px;

		margin: 0px;

	}

	a {

		text-decoration: none;

	}

	ul {

		list-style: outside none none;

	}

	.slider, .slider-panel img, .slider-extra {

		width: 650px;

		height: 413px;

	}

	.slider {

		text-align: center;

		margin: 30px auto;

		position: relative;

	}

	.slider-panel, .slider-nav, .slider-pre, .slider-next {

		position: absolute;

		z-index: 8;

	}

	.slider-panel {

		position: absolute;

	}

	.slider-panel img {

		border: none;

	}

	.slider-extra {

		position: relative;

	}

	.slider-nav {

		margin-left: -51px;

		position: absolute;

		left: 50%;

		bottom: 4px;

	}

	.slider-nav li {

		background: #3e3e3e;

		border-radius: 50%;

		color: #fff;

		cursor: pointer;

		margin: 0 2px;

		overflow: hidden;

		text-align: center;

		display: inline-block;

		height: 18px;

		line-height: 18px;

		width: 18px;

	}

	.slider-nav .slider-item-selected {

		background: blue;

	}

	.slider-page a{

		background: rgba(0, 0, 0, 0.2);

		filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#33000000,endColorstr=#33000000);

		color: #fff;

		text-align: center;

		display: block;

		font-family: "simsun";

		font-size: 22px;

		width: 28px;

		height: 62px;

		line-height: 62px;

		margin-top: -31px;

		position: absolute;

		top: 50%;

	}

	.slider-page a:HOVER {

		background: rgba(0, 0, 0, 0.4);

		filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#66000000,endColorstr=#66000000);

	}

	.slider-next {

		left: 100%;

		margin-left: -28px;

	}

</style>

<script type="text/javascript">

	$(document).ready(function() {

		var length,

			currentIndex = 0,

			interval,

			hasStarted = false, //是否已经開始轮播

			t = 3000; //轮播时间间隔

		length = $('.slider-panel').length;

		//将除了第一张图片隐藏

		$('.slider-panel:not(:first)').hide();

		//将第一个slider-item设为激活状态

		$('.slider-item:first').addClass('slider-item-selected');

		//隐藏向前、向后翻button

		$('.slider-page').hide();

		//鼠标上悬时显示向前、向后翻button,停止滑动，鼠标离开时隐藏向前、向后翻button。開始滑动

		$('.slider-panel, .slider-pre, .slider-next').hover(function() {

			stop();

			$('.slider-page').show();

		}, function() {

			$('.slider-page').hide();

			start();

		});

		$('.slider-item').hover(function(e) {

			stop();

			var preIndex = $(".slider-item").filter(".slider-item-selected").index();

			currentIndex = $(this).index();

			play(preIndex, currentIndex);

		}, function() {

			start();

		});

		$('.slider-pre').unbind('click');

		$('.slider-pre').bind('click', function() {

			pre();

		});

		$('.slider-next').unbind('click');

		$('.slider-next').bind('click', function() {

			next();

		});

		/**

		 * 向前翻页

		 */

		function pre() {

			var preIndex = currentIndex;

			currentIndex = (--currentIndex + length) % length;

			play(preIndex, currentIndex);

		}

		/**

		 * 向后翻页

		 */

		function next() {

			var preIndex = currentIndex;

			currentIndex = ++currentIndex % length;

			play(preIndex, currentIndex);

		}

		/**

		 * 从preIndex页翻到currentIndex页

		 * preIndex 整数，翻页的起始页

		 * currentIndex 整数，翻到的那页

		 */

		function play(preIndex, currentIndex) {

			$('.slider-panel').eq(preIndex).fadeOut(500)

				.parent().children().eq(currentIndex).fadeIn(1000);

			$('.slider-item').removeClass('slider-item-selected');

			$('.slider-item').eq(currentIndex).addClass('slider-item-selected');

		}

		/**

		 * 開始轮播

		 */

		function start() {

			if(!hasStarted) {

				hasStarted = true;

				interval = setInterval(next, t);

			}

		}

		/**

		 * 停止轮播

		 */

		function stop() {

			clearInterval(interval);

			hasStarted = false;

		}

		//開始轮播

		start();

	});

</script>

</head>

<body>

	<div class="slider">

		<ul class="slider-main">

			<li class="slider-panel">

				<a href="http://blog.csdn.net/ricciozhang" target="_blank"><img alt="关注RiccioZhang的博客" title="关注RiccioZhang的博客" src="images/1.jpg"></a>

			</li>

			<li class="slider-panel">

				<a href="http://blog.csdn.net/ricciozhang" target="_blank"><img alt="关注RiccioZhang的博客" title="关注RiccioZhang的博客" src="images/2.jpg"></a>

			</li>

			<li class="slider-panel">

				<a href="http://blog.csdn.net/ricciozhang" target="_blank"><img alt="关注RiccioZhang的博客" title="关注RiccioZhang的博客" src="images/3.jpg"></a>

			</li>

			<li class="slider-panel">

				<a href="http://blog.csdn.net/ricciozhang" target="_blank"><img alt="关注RiccioZhang的博客" title="关注RiccioZhang的博客" src="images/4.jpg"></a>

			</li>

		</ul>

		<div class="slider-extra">

			<ul class="slider-nav">

				<li class="slider-item">1</li>

				<li class="slider-item">2</li>

				<li class="slider-item">3</li>

				<li class="slider-item">4</li>

			</ul>

			<div class="slider-page">

				<a class="slider-pre" href="javascript:;;"><</a>

				<a class="slider-next" href="javascript:;;">></a>

			</div>

		</div>

	</div>

</body>

</html>

至此一个简单的jquery轮播效果就完毕了。当然还有非常多须要改进的地方。

本篇文章的源码能够在例如以下几个地址下载：

CSDN下载点击这里 (http://download.csdn.net/detail/qq791967024/8993769)
GitHub下载点击这里(https://github.com/ricciozhang/zslider_simple)

參考资料：

jQuery实现轮播效果(一) - 基础的更多相关文章

jquery图片轮播效果(unslider)
今天做网站(住建局网站)需要用到图片轮播,刚开始想借鉴DTCMS上的,查看CSS与页面代码,呵呵,不复杂,直接复制过来,结果调整半天,页面还是各种乱,没办法,网上找一个吧,于是找到了今天要说的这货un ...
通过jQuery实现轮播效果
HTML <div class="wrap"> <div id="slide"> <ul class="list&quo ...
css jquery 实现轮播效果
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
12款经典的白富美型—jquery图片轮播插件—前端开发必备
图片轮播是网站中的常用功能,用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美 ...
jQuery个性化图片轮播效果
jQuery个性化图片轮播效果购物产品展示:图片轮播器<效果如下所示> 思路说明: 每隔一段时间,实现图片的自动切换及选项卡选中效果,鼠标划入图片动画停止,划出或离开动画开始两个区域: ...
JQuery实现图片轮播效果源码
======================整体结构======================== <div class="banner"> <ul class ...
JQuery简单实现图片轮播效果
很多页面都需要用到界面轮播,但是用原生js相对来说比较复杂,用jQuery实现效果比较迅速,写个简单的demo 1.首先在HTML页面要放置轮播图案位置插入div,这里写了轮播图片数量为3张,所以定义 ...
使用 jQuery 中的淡入淡出动画，实现图片的轮播效果，每隔 2 秒钟切换一张图片，共 6 张图片
查看本章节查看作业目录需求说明: 使用 jQuery 中的淡入淡出动画,实现图片的轮播效果,每隔 2 秒钟切换一张图片,共 6 张图片,切换到第 6 张后从头开始切换,在图片的下方显示 6 个小圆 ...
用jQuery实现轮播图效果，js中的排他思想
---恢复内容开始--- jQuery实现轮播图不用单独加载. 思路: a. 通过$("#id名");选择需要的一类标签,获得一个伪数组 b.由于是伪数组的原因,而对数组的处理最多 ...

随机推荐

EditPlus 2：用空格替换制表符
打开软件点击菜单栏上的Tools(工具),在点击perferences(外观),再点击左边栏的File->Setting & Syntax(文件->设置与符号),再点击右栏的Tab ...
pgsql 远程机器无法连接数据库报错处理方法
因本地资源有限,在公共测试环境搭建了PGsql环境,从数据库本地localhost访问正常,在相同网段的远程机器访问报如下错误 “server closed the connection unexpe ...
.net MVC成长记录（二）
今天上班的任务完成了,接下来写一下博客,巩固一下,再学习一些新知识. 闲话不多说,我们言归正传.昨天讲到了如何mvc框架在微软下,已经变成了一个非常灵活非常‘干净’的开发框架了, 同时也讲述了如何创建 ...
SQlserver 当输入参数为可选条件
以前很懒,都是用拼接字符串的方式,加上if 语句,根据输入参数是否为空来判断是否需要在where 后加上对应字段的条件限制但是拼接字符串很烦,又总是被转义符搞得很烦 '''' 所以想了其他办法分 ...
CSS元素水平垂直居中的方法
1. 元素水平居中 1.1 设置父元素的属性 text-align: center; 说明:此属性只针对父元素的子元素为内联元素时有效,比如:img,input,select,button等(行内 ...
android学习-第二讲（修改项目名称和图标，log，过滤器）
一.在app/src/main/res下有 AndroidManifest.xml打开,打开后如下图1 二.日志工具log log.v() log.d() log.i() log.w() lo ...
菜鸟使用 centOS 安装 redis 并放入service 启动记录
1.下载redis: wget http://download.redis.io/releases/redis-2.8.17.tar.gz 若wget 不可用,请先安装wget yum install ...
用SQL Server查询所有数据并显示
利用SQL Server查询数据,并把所有数据显示在页面上. "%> <%@page import="jdbc.sqlServer"%> <%@p ...
vue-router在同一个路由下切换，取不到变化的路由参数
最近用vue写项目的时候碰到一个问题,在同一个页面下跳转,路由地址不变,路由参数有变化,一开始只是在data里取路由的参数,发现根本取不到变化的路由参数. 例如:订单列表也跳转详情页,跳转方法如下 & ...
Selenium的定位元素
1.浏览器操作 # 刷新 driver.refresh() # 前进 driver.forward() # 后退 driver.back() 2.获取标签元素 # 通过ID定位目标元素 dri ...

jQuery实现轮播效果(一) - 基础

前戏：

正文：

參考资料：

jQuery实现轮播效果(一) - 基础的更多相关文章

随机推荐

热门专题