<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>原生js写轮播图效果
原文地址：https://www.cnblogs.com/zjingjing/p/8591933.html