http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
http://www.w3.org/1999/xhtml">
圖片輪播 js原生(淡入淡出)
body,div,ul,li,a,img{margin: 0;padding: 0;}
ul,li{list-style: none;}
a{text-decoration: none;}
.wrapper{position: relative;margin: 30px auto;width: 400px;height: 200px;}
.banner{width: 400px;height: 200px;overflow: hidden;}
.imgList{width:400px;height:200px;z-index: 10;}
.imgList li{display: none;}
.imgList .imgOn{display: inline;}
.bg{position: absolute;bottom: 0;width: 400px;height: 40px;z-index:20;opacity: 0.4;filter:alpha(opacity=40);background: black;}
.infoList{position: absolute;left: 10px;bottom: 10px;z-index: 30;}
.infoList li{display: none;}
.infoList .infoOn{display: inline;color: white;}
.indexList{position: absolute;right: 10px;bottom: 5px;z-index: 30;}
.indexList li{float: left;margin-right: 5px;padding: 2px 4px;border: 2px solid black;background: grey;cursor: pointer;}
.indexList .indexOn{background: red;font-weight: bold;color: white;}
puss in boots1
1
var curIndex = 0, //當前index
imgArr = getElementsByClassName("imgList")[0].getElementsByTagName("li"), //獲取圖片組
imgLen = imgArr.length,
infoArr = getElementsByClassName("infoList")[0].getElementsByTagName("li"), //獲取圖片info組
indexArr = getElementsByClassName("indexList")[0].getElementsByTagName("li"); //獲取控制index組
// 定時器自動變換2.5秒每次
var autoChange = setInterval(function(){
if(curIndex
curIndex ++;
}else{
curIndex=0;
}
//調用變換處理函數
changeTo(curIndex);
},2500);
//調用添加事件處理
addEvent();
//給右下角的圖片index添加事件處理
function addEvent(){
for(vari=0;i
//閉包防止作用域內活動對象item的影響
(function(_i){
//鼠標滑過則清除定時器，并作變換處理
indexArr[_i].onmouseover=function(){
clearTimeout(autoChange);
changeTo(_i);
curIndex=_i;
};
//鼠標滑出則重置定時器處理
indexArr[_i].onmouseout=function(){
autoChange=setInterval(function(){
if(curIndex < imgLen -1){
curIndex ++;
}else{
curIndex=0;
}
//調用變換處理函數
changeTo(curIndex);
},2500);
};
})(i);
}
}
//變換處理函數
function changeTo(num){
//設置image
varcurImg=getElementsByClassName("imgOn")[0];
fadeOut(curImg); //淡出當前 image
removeClass(curImg,"imgOn");
addClass(imgArr[num],"imgOn");
fadeIn(imgArr[num]); //淡入目標 image
//設置image 的 info
varcurInfo=getElementsByClassName("infoOn")[0];
removeClass(curInfo,"infoOn");
addClass(infoArr[num],"infoOn");
//設置image的控制下標 index
var_curIndex=getElementsByClassName("indexOn")[0];
removeClass(_curIndex,"indexOn");
addClass(indexArr[num],"indexOn");
}
//設置透明度
function setOpacity(elem,level){
if(elem.filters){
elem.style.filter="alpha(opacity="+level+")";
}else{
elem.style.opacity=level/ 100;
}
}
//淡入處理函數
function fadeIn(elem){
setOpacity(elem,0); //初始全透明
for(vari=0;i<=20;i++){ //透明度改變 20 *5=100
(function(){
varlevel=i* 5;? //透明度每次變化值
setTimeout(function(){
setOpacity(elem, level)
},i*25); //i * 25 即為每次改變透明度的時間間隔，自行設定
})(i);? ? //每次循環變化一次
}
}
//淡出處理函數
function fadeOut(elem){
for(vari=0;i<=20;i++){ //透明度改變 20 *5=100
(function(){
varlevel=100- i * 5; //透明度每次變化值
setTimeout(function(){
setOpacity(elem, level)
},i*25); //i * 25 即為每次改變透明度的時間間隔，自行設定
})(i);? ? //每次循環變化一次
}
}
//通過class獲取節點
function getElementsByClassName(className){
var classArr = [];
vartags=document.getElementsByTagName('*');
for(var item in tags){
if(tags[item].nodeType == 1){
if(tags[item].getAttribute('class') == className){
classArr.push(tags[item]);
}
}
}
return classArr; //返回
}
// 判斷obj是否有此class
function hasClass(obj,cls){? //class位于單詞邊界
return obj.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
}
//給 obj添加class
function addClass(obj,cls){
if(!this.hasClass(obj,cls)){
obj.className += cls;
}
}
//移除obj對應的class
function removeClass(obj,cls){
if(hasClass(obj,cls)){
varreg=newRegExp('(\\s|^)' + cls + '(\\s|$)');
obj.className= obj.className.replace(reg,'');
}
}
