1. 程式人生 > >js實現輪播圖--淡入淡出的效果。

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淡入
		
		
	}
};