js实现轮播图--淡入淡出的效果。

window.onload = function(){

	mv.app.toBanner();
};
var mv = {};
mv.tools = {};
mv.ui = {};

//淡入淡出也算是是一个公用组件
mv.ui.fadein = function(obj){
	var value = 0 ；   //淡入是从0开始的，即从0变成100
	clearinterval(obj.timer);  //清除旧的播放时间,防止多次点击有个加速的过程
	obj.timer = setInterval(function()
	var iSpeed = 5;  //速度为5
	//当value值从0涨到100时,说明图片从一个透明的变成了不透明.就需要让变时器停下来.
	if(value==100)
	{
		clearInterval(obj.timer);
	}
	else
	{
		value += iSpeed;  //让加时器进行累加
		 obj.style.opacity = value/100;     //把每一次值赋给当前颜色的透明度(opacity是0-1的值,所以要除以100)
		 obj.style.filter = 'alpha(opacity='+value+')';   //兼容
	},30);
};

mv.ui.fadeout = function(obj){
	var value = 100 ；   //淡出是从100开始的，即从100变成0
	clearinterval(obj.timer);  //清除旧的播放时间,防止多次点击有个加速的过程
	obj.timer = setInterval(function()
	var iSpeed = -5;  //每次都要递减
	//当value值减到0时,说明图片就透明了.就需要让变时器停下来.
	if(value==0)
	{
		clearInterval(obj.timer);
	}
	else
	{
		value += iSpeed;  //让加时器进行累加
		 obj.style.opacity = value/100;     //把每一次值赋给当前颜色的透明度(opacity是0-1的值,所以要除以100)
		 obj.style.filter = 'alpha(opacity='+value+')';   //兼容
	},30);
};
mv.app = {}

mv.app.toBanner = fuction(){
	var oDd = document.getElementById('id');   //获取div的id
	var aLi = document.getElementsByName('li') //获取数个li
	
	var iNow = 0; //累加
	var timer = setInterval(auto,3000);//3秒钟轮换（自动播放器）(timer的作用是鼠标移上去时会停下来)
	//自动播放，原理：所有li都淡出，让第二个li都淡入，走完一次后再让所有li淡出，第三个li淡入
	//淡出的效果就是让透明度从100变成0，淡入的效果就是从0变成100。
	function auto(){
		if(iNow == aLi.length-1){
			inow = 0;    //此时inow已经是最后一个，应该让inow回到第一个
		}
		else{
			iNow++;
		}
	//让所有li都淡出
		for(var i=0;i<ali .length;i++){
			mv.ui.fadeout(ali[i]);    //让所有元素都淡出
		}
		mv.ui.fadein(aLi[iNow]);          //让当前 li淡入
		
		
	}
};