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

前戏：

         XXXX年XX月XX日，经理交给我一个网站新闻资讯网页开发的活儿，我一个java程序员，怎么完成得了网页设计这样高端的活儿呢！之前虽然有学过一点HTML，CSS的知识，但是在实际的使用中，把页面整的好看很困难，最后信心没了，就再也不想去做涉及网页开发的事儿了，一心学习java。如果在小公司做java web开发，专门做后台的开发时很少的，一般还得弄前台页面（PS:做这些前台也很简单，要么用一些前端框架，要么就是把以前的项目拷过来再修改下页面）。拿到网页开发这个活儿，我顿时愣了，不过好在不用我去设计页面，只要把美工做好的模板拿过来再进行一下排版就OK了，只写代码当然难不住作为程序员的我啦！于是啪啦啪啦的去写代码了，突然发现，咦，这是个什么玩意？每隔一段时间就会显示下一张新闻图片，问了下美工，他说这是一个叫“轮播”的东东，只觉得这个东西好神奇，美工说你去网上找一下做轮播效果的代码，然后改改就行啦~百度了一下，发现搜索到的结果特别多，而且大部分都是用jquery写的，于是随便找到一个效果拿过去用了，效果确实令人满意。

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

正文：

      首先看一下效果：

     

     轮播效果分析：

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

   轮播效果实现笔记：

1. jquery提供了丰富的选择器以及用来挑选元素的方法，这极大的简化了我们的开发，例如$(".slider-item").filter(".slider-item-selected")选择了当前处于激活状态的索引按钮。
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:

	

		

			
		
		

			
		
		

			
		
		

			
		
	
	

		

			
1
			
2
			
3
			
4
		
		

			<
			>
		
	

 
  
 
  
   
    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');
	//隐藏向前、向后翻按钮
	$('.slider-page').hide();
	
	//鼠标上悬时显示向前、向后翻按钮,停止滑动，鼠标离开时隐藏向前、向后翻按钮，开始滑动
	$('.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();
});
 
  
 
  
         首先是初始化部分：将除了第一张轮播图片意外的图片都隐藏，并且隐藏向前、向后按钮，使第一个索引按钮处于激活状态。
 
  
         事件部分：通过jquery的hover()绑定鼠标上悬以及离开时的事件处理， jquery的bind()方法绑定鼠标点击事件处理向前、向后翻动、
 
  
         轮播控制：pre(), next(), play(), start()开始自动轮播，stop()停止自动轮播。
 
 
  
上面的js写的比较散，结构也不太好，读起来也比较费力，也不易使用，耦合度较高。下篇将给出一个纯粹的jquery轮播插件， 该插件可以定制各种效果，方便的配置以及可扩展。
 
 
  
-----------------------------------------------------------------------------------
 
  

 
 
  
下面是整体的代码：
 
 
  
index.html
 
  
 
  










	

		

			

				
			
			

				
			
			

				
			
			

				
			
		
		

			

				
1
				
2
				
3
				
4
			
			

				<
				>
			
		
	

 
  
 
  
至此一个简单的jquery轮播效果就完成了，当然还有很多需要改进的地方。
 
  
本篇文章的源代码可以在如下几个地址下载：
 
  
 
   
CSDN下载点击这里 (http://download.csdn.net/detail/qq791967024/8993769)
 
   
GitHub下载点击这里(https://github.com/ricciozhang/zslider_simple)
 
 
  
 
  
参考资料：
 
  
 
   
 
IE8下实现兼容rgba(透明效果)
 
 
   
jquery官方api
 
   
CSS3 opacity 属性