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

前戏：

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

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

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

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

正文：

首先看一下效果：

轮播效果分析：

1. 轮播效果大致能够分为3个部分：轮播图片（图片或者是包括容器），控制轮播图显示的button（向左、向右button，索引button(比如上面效果图的顶部的数字button)），每隔一段时间轮流显示轮播图片。

2. 轮播图的显示：要显示的轮播图显示。不须要显示的轮播图隐藏；通常将这些轮播图片以定位的方式重叠在一起，每次显示一张轮播图片。
3. 控制button：鼠标点击或者移到索引button上面时，显示相应索引位置的轮播图。向上、向下button负责控制显示上一张、下一张轮播图片。
4. 其他：一般索引button有激活状态和未激活状态共2种状态；鼠标移到轮播图片上面时应该停止自己主动轮播，鼠标离开时開始自己主动轮播。

轮播效果实现笔记：

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

參考资料：

1. IE8下实现兼容rgba(透明效果)

2. jquery官方api
3. CSS3 opacity 属性