Javascrip之轮播器的实现

     Javascript视频已经进行到最后了这部分主要是实现了一些功能，我们一般在网站上都能够看到很多动画特效，殊不知这些特效都是用CSS+JS和页面html代码来实现的上篇博客我们了解的base.js和tool.js的作用都是我们在后面用到的，在我们看淘宝的时候我们知道看不同的衣服图片不断闪动，但是当我们将鼠标固定到一张图片时，他又能停止那这又是怎么实现的呢，这就是我们看到的轮播器的作用首先我们要有用到前面的tool.js和base.js还有base_drag.js，还有一些CSS样式的设定，网页上是三张图片很简单就是和三个触发点：

     

<div id="banner">
		<img src="images/banner1.jpg" alt="轮播器第一张" />
		<img src="images/banner2.jpg" alt="轮播器第二张" />
		<img src="images/banner3.jpg" alt="轮播器第三张" />
		<ul>
			<li>●</li>
			<li>●</li>
			<li>●</li>
		</ul>
		<span></span>
		<strong></strong>
	</div>

   其实是很简单的，然后是对JS的实现

	//轮播器初始化
	$('#banner img').opacity(0);
	$('#banner img').eq(0).opacity(100);
	$('#banner ul li').eq(0).css('color', '#333');
	$('#banner strong').html($('#banner img').eq(0).attr('alt'));
	
	//轮播器计数器
	var banner_index = 1;
	
	//轮播器的种类
	var banner_type = 1; 		//1表示透明度，2表示上下滚动
	
	//自动轮播器
	var banner_timer = setInterval(banner_fn, 3000);
	
	//手动轮播器
	$('#banner ul li').hover(function () {
		clearInterval(banner_timer);
		if ($(this).css('color') != 'rgb(51, 51, 51)' && $(this).css('color') != '#333') {
			banner(this, banner_index == 0 ? $('#banner ul li').length() - 1 : banner_index - 1);
		}
	}, function () {
		banner_index = $(this).index() + 1;
		banner_timer = setInterval(banner_fn, 3000);
	});
	
	function banner(obj, prev) {
		$('#banner ul li').css('color', '#999');
		$(obj).css('color', '#333');
		$('#banner strong').html($('#banner img').eq($(obj).index()).attr('alt'));
		
		if (banner_type == 1) {
			$('#banner img').eq(prev).animate({
				attr : 'o',
				target : 0,
				t : 30,
				step : 10
			}).css('zIndex', 1);
			$('#banner img').eq($(obj).index()).animate({
				attr : 'o',
				target : 100,
				t : 30,
				step : 10
			}).css('zIndex', 2);
		} else if (banner_type == 2) {
			$('#banner img').eq(prev).animate({
				attr : 'y',
				target : 150,
				t : 30,
				step : 10
			}).css('zIndex', 1).opacity(100);
			$('#banner img').eq($(obj).index()).animate({
				attr : 'y',
				target : 0,
				t : 30,
				step : 10
			}).css('top', '-150px').css('zIndex', 2).opacity(100);
		}
		
	}
	
	function banner_fn() {
		if (banner_index >= $('#banner ul li').length()) banner_index = 0;
		banner($('#banner ul li').eq(banner_index).first(), banner_index == 0 ? $('#banner ul li').length() - 1 : banner_index - 1);
		banner_index++;
	}
	
	
});

    经过这个例子，我感觉我可能用的话还是需要在实现的，但是觉得实现了也要在平时使用，孰能生巧，我们会慢慢的理解的。