html动态轮播实现原理,html轮播效果的实现

图片轮播效果

}

/*轮播容器*/.img_wrap{width:440px;height:440px;margin:0 auto;position:relative;

}.img_wrap ul li{float:left;

}

/*轮播索引*/.img_wrap .img_index{position:absolute;right:20px;bottom:20px;

}.img_wrap .img_index ul li{width:16px;height:16px;background:gray;border-radius:8px;cursor:pointer;margin-right:4px;

}.img_wrap .img_index ul li.on{background:#fd4b4b;

}

/*轮播图片容器*/.img_wrap .img_lunbo{width:440px;height:440px;overflow:hidden;

}

vartime= 2000;//时间间隔

varlength= 5;//几个索引

vartimer= null;//定时器

indexBindClick();//自动轮播

autoPlay();//给索引绑定事件

functionindexBindClick(){varlis=document.getElementsByClassName("img_index")[0].getElementsByTagName("li");for(vari=0; i

lis[i].οnclick= function(){//换图片显示

currentIndex=getIndex(this);

clearInterval(timer);

showImg();

autoPlay();

};

}

}functionautoPlay(){

timer=setInterval(function(){

showImg();

currentIndex++;

},time);

}//显示图片

functionshowImg(){if(currentIndex>= 5){

currentIndex= 0;

}//改变小图标样式

varlis=document.getElementsByClassName("img_index")[0].getElementsByTagName("li");for(varj=0; j

lis[j].className= "";

}

lis[currentIndex].className= "on";//显示当前图片

varul=document.getElementsByClassName("img_lunbo")[0].getElementsByTagName("ul")[0];varli_width=ul.getElementsByTagName("li")[0].scrollWidth;varmarginLeft= -currentIndex*li_width;

ul.style.marginLeft=marginLeft+ "px";

}/*获取对象在父节点中索引*/

functiongetIndex(obj){varchildren=obj.parentNode.children;for(vari=0; i

}

}

}

};