原生js写轮播图效果
<script> var picarr=[ "pic/lb1.jpg", "pic/lb2.jpg", "pic/lb3.jpg", "pic/lb4.jpg" ]; //全局变量index控制当前所在第几张图片 var index=0; var timer; var radiobtn= document.getElementsByClassName("tubiao")[0].getElementsByTagName("span"); function autochang(index) { var index=parseInt(index); document.getElementsByClassName("content_1")[0].style.backgroundImage="url("+picarr[index]+")"; for(var j=0;j<radiobtn.length;j++){ radiobtn[j].className=""; } radiobtn[index].className="actived"; } function change(index){ setInterval("autochang((index++)%radiobtn.length);",3000); } //页面加载成功初始效果 change(index); //当鼠标点击点点的时候切换效果 for(var i=0;i<radiobtn.length;i++){ radiobtn[i].index = i; radiobtn[i].onclick=function () { clearInterval(timer); autochang(this.index); index=this.index; } } //点击左箭头 document.getElementsByClassName("left_jiantou")[0].onclick=function(){ index--; if(index<0){ index=radiobtn.length-1; } autochang(index); } //点击右箭头 document.getElementsByClassName("right_jiantou")[0].onclick=function(){ index++; if(index>=radiobtn.length){ index=0; } autochang(index); } </script>