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