js 轮播效果实例分享
html
<!--图片轮播Start--> <divclass="pics-ul"> <divclass="pics-ulleft"> <ulid="allImg"> <li><imgsrc="img/img01.png"/></li> <li><imgsrc="img/img2.jpg"/></li> <li><imgsrc="img/img1.jpg"/></li> <li><imgsrc="img/img3.jpg"/></li> <li><imgsrc="img/img4.jpg"/></li> </ul> <aname="btn"id="prev"class="prev"style="display:block;"></a> <aname="btn"id="next"class="next"style="display:block;"></a> <ulid="btn"class="pagination"> <liclass="hover"><ahref="#0">1</a></li> <li><ahref="#1">2</a></li> <li><ahref="#2">3</a></li> <li><ahref="#3">4</a></li> <li><ahref="#4">5</a></li> </ul> </div> <divclass="pics-ulright"><imgsrc="img/imgright.png"/></div> </div> <!--图片轮播End-->
js
/*图片轮播*/
varbut1=document.getElementById("prev");
varabtn=document.getElementById("btn").getElementsByTagName("li");//获取所有的按钮
varlis=document.getElementById('allImg').getElementsByTagName('li');
varbut2=document.getElementById("next");
varindex=0;
vartimer=null;
but2.onclick=function(){
index++;
if(index>lis.length-1){
index=0;
}
setImg(index);
}
but1.onclick=function(){
index--;
if(index<0){
index=lis.length-1;
}
setImg(index);
}
functionchangeImg(){
if(index==lis.length-1){//当到最后一张图片时
index=0
}else{
index++;//图片索引发生改变
}
setImg(index);
}
functionsetImg(index){
for(j=0;j<lis.length;j++){
lis[j].style.display="none";
}
lis[index].style.display="block";
//按钮的样式要与图片对应
for(vari=0;i<abtn.length;i++){
abtn[i].className=""
}
abtn[index].className="hover";
}
//自动切换
timer=setInterval(changeImg,3000);
//按钮
for(vari=0;i<abtn.length;i++){
(function(){
varp=i
abtn[p].onclick=function(){
index=p;
setImg(index);
}
})();
}
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持毛票票！