（一个左右按钮控制一个轮播图，一共四个左右按钮四大块，分别对其控制，互不干扰）
head部分：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>qqdaohang</title> <style> *{ margin:0; padding:0; list-style:none;} .main img{height:120px; display:none; width:218px;} .main{height:317px; width:218px; border:1px solid gray; margin:200px auto; position: relative; padding:20px 20px 10px 20px; } .head li{height:35px ; width:50px; display:inline-block; text-align:center; font:17px/35px ""; margin-left:0.9px; } .move{color:white; background-color:red;} .left,.left1,.left2,.left3{position:absolute; height:27px;width:18px; background:rgba(0,0,0,0.2); outline-style: none; border:1px solid transparent; top:30%; } .left:hover{background:rgba(0,0,0,0.8); outline-style: none; color:red;} .left1:hover{background:rgba(0,0,0,0.8); outline-style: none; color:red;} .left2:hover{background:rgba(0,0,0,0.8); outline-style: none; color:red;} .left3:hover{background:rgba(0,0,0,0.8); outline-style: none; color:red;} .right,.right1,.right2,.right3{position:absolute; height:27px;width:18px; background:rgba(0,0,0,0.2); outline-style: none; border:1px solid transparent; right:7.6%; top:30%;} .right:hover{background:rgba(0,0,0,0.8); outline-style: none; color:red;} .right1:hover{background:rgba(0,0,0,0.8); outline-style: none; color:red;} .right2:hover{background:rgba(0,0,0,0.8); outline-style: none; color:red;} .right3:hover{background:rgba(0,0,0,0.8); outline-style: none; color:red;} .orange{ color:white; font:14px/15px ""; height:15px; width:15px; text-align: center; display:inline-block; background-color:orangered; } .blue{color:white; font:14px/15px ""; height:15px; width:15px; text-align:center; display:inline-block; background-color:deepskyblue;} #box1 .active{display:block;} #box2 .active{display:block;} #box3 .active{display:block;} #box4 .active{display:block;} p{position:absolute; color:white; height:20px; width:218px; line-height:20px; display:none; background:rgba(0,0,0,0.6); top:45%; left:8%; } .footer li{margin-top:10px;} .footer1 li{margin-top:10px;} .footer2 li{margin-top:10px;} .footer3 li{margin-top:10px;} .footer li:hover{text-decoration:underline;} .footer1 li:hover{text-decoration:underline;} .footer2 li:hover{text-decoration:underline;} .footer3 li:hover{text-decoration:underline;} .main>div{ display:none; } .come{display:block !important;} .dian,.dian1,.dian2,.dian3{position:absolute; top:14%; } .dian li{height:10px; width:10px; border-radius:5px; display:inline-block; background-color:white;} .dian1 li{height:10px; width:10px; border-radius:5px; display:inline-block; background-color:white;} .dian2 li{height:10px; width:10px; border-radius:5px; display:inline-block; background-color:white;} .dian3 li{height:10px; width:10px; border-radius:5px; display:inline-block; background-color:white;} .movie{ background-color: deepskyblue !important;} </style> </head>
文档部分： <body> <div class="main"> <ul class="head"> <li >热点</li> <li >军事</li> <li>娱乐</li> <li >社会</li> </ul> <div id="box1" class="come" > <ul class="dian"> <li class="movie"></li> <li></li> <li></li> <li></li> <li></li> </ul> <input type="button" value="<" class="left"> <input type="button" value=">" class="right"> <img src="image/1.gif" class="active"><p class="active">aaaaaaaaaaaa</p> <img src="image/2.jpg"><p >bbbbbbbbbbbb</p> <img src="image/3.gif"><p>cccccccccccc</p> <img src="image/4.gif"><p >dddddddddddd</p> <img src="image/5.jpg"><p >eeeeeeeeeeee</p> <ul class="footer"> <li> <ul class="orange">1</ul> <span style="color:red;">还是看百度新闻,百度新闻</span> </li> <li> <ul class="orange">2</ul> <span>还是看百度新闻,百度新闻</span> </li> <li> <ul class="blue">3</ul> <span>还是看百度新闻,百度新闻</span> </li> <li> <ul class="blue">4</ul> <span>还是看百度新闻,百度新闻</span> </li> <li> <ul class="blue">5</ul> <span>还是看百度新闻,百度新闻</span> </li> </ul> </div> <div id="box2"> <ul class="dian1"> <li class="movie"></li> <li></li> <li></li> </ul> <input type="button" value="<" class="left1"> <input type="button" value=">" class="right1"> <img src="image/21.jpg" class="active"><p class="active">ffffffffff</p> <img src="image/22.jpg"><p >gggggggggggg</p> <img src="image/23.jpg"><p>hhhhhhhhhhhhh</p> <ul class="footer1"> <li> <ul class="orange">1</ul> <span style="color:red;">看百度新闻,有百度红包</span> </li> <li> <ul class="orange">2</ul> <span>看百度新闻,有百度红包</span> </li> <li> <ul class="blue">3</ul> <span>看百度新闻,有百度红包</span> </li> <li> <ul class="blue">4</ul> <span>看百度新闻,有百度红包</span> </li> <li> <ul class="blue">5</ul> <span>看百度新闻,有百度红包</span> </li> </ul> </div> <div id="box3"> <ul class="dian2"> <li class="movie"></li> <li></li> <li></li> <li></li> </ul> <input type="button" value="<" class="left2"> <input type="button" value=">" class="right2"> <img src="image/31.jpg" class="active"><p class="active">iiiiiiiiiiiii</p> <img src="image/32.jpg"><p >jjjjjjjjjjjj</p> <img src="image/33.jpg"><p>kkkkkkkkkkkkk</p> <img src="image/34.jpg"><p>lllllllllllll</p> <ul class="footer2"> <li> <ul class="orange">1</ul> <span style="color:red;">不看百度新闻,还是有红包</span> </li> <li> <ul class="orange">2</ul> <span>不看百度新闻,还是有红包</span> </li> <li> <ul class="blue">3</ul> <span>不看百度新闻,还是有红包</span> </li> <li> <ul class="blue">4</ul> <span>不看百度新闻,还是有红包</span> </li> <li> <ul class="blue">5</ul> <span>不看百度新闻,还是有红包</span> </li> </ul> </div> <div id="box4" > <ul class="dian3"> <li class="movie"></li> <li></li> <li></li> <li></li> </ul> <input type="button" value="<" class="left3"> <input type="button" value=">" class="right3"> <img src="image/41.jpg" class="active"><p class="active">mmmmmmmmmmmmmm</p> <img src="image/42.jpg"><p >nnnnnnnnnnnn</p> <img src="image/43.jpg"><p>ooooooooooooo</p> <img src="image/44.jpg"><p>ppppppppppppp</p> <ul class="footer3"> <li> <ul class="orange">1</ul> <span style="color:red;">看百度新闻,一定可能是傻</span> </li> <li> <ul class="orange">2</ul> <span>看百度新闻,一定可能是傻</span> </li> <li> <ul class="blue">3</ul> <span>看百度新闻,一定可能是傻</span> </li> <li> <ul class="blue">4</ul> <span>看百度新闻,一定可能是傻</span> </li> <li> <ul class="blue">5</ul> <span>看百度新闻,一定可能是傻</span> </li> </ul> </div> </div>
JS部分： <script> window.onload=function() { var box1 = document.getElementById("box1"); var box2 = document.getElementById("box2"); var box3 = document.getElementById("box3"); var box4 = document.getElementById("box4"); var image1 = box1.getElementsByTagName("img"); var image2 = box2.getElementsByTagName("img"); var image3 = box3.getElementsByTagName("img"); var image4 = box4.getElementsByTagName("img"); var left = document.getElementsByClassName("left")[0]; var right = document.getElementsByClassName("right")[0]; var left1 = document.getElementsByClassName("left1")[0]; var right1 = document.getElementsByClassName("right1")[0]; var left2 = document.getElementsByClassName("left2")[0]; var right2 = document.getElementsByClassName("right2")[0]; var left3 = document.getElementsByClassName("left3")[0]; var right3 = document.getElementsByClassName("right3")[0]; var p4=box1.getElementsByTagName("p"); var p1=box2.getElementsByTagName("p"); var p2=box3.getElementsByTagName("p"); var p3=box4.getElementsByTagName("p"); var ul = document.getElementsByClassName("head")[0]; var li=ul.getElementsByTagName("li"); var main=document.getElementsByClassName("main")[0]; var div=main.getElementsByTagName("div"); var dian = document.getElementsByClassName("dian")[0]; var arrli=dian.getElementsByTagName("li"); var dian1 = document.getElementsByClassName("dian1")[0]; var arrli1=dian1.getElementsByTagName("li"); var dian2 = document.getElementsByClassName("dian2")[0]; var arrli2=dian2.getElementsByTagName("li"); var dian3 = document.getElementsByClassName("dian3")[0]; var arrli3=dian3.getElementsByTagName("li"); var num=0; var num1=0; var num2=0; var num3=0; //alert(p.length); for(p=0;p<li.length;p++){ li[p].index=p; li[p].onclick=function(){ for(z=0;z<li.length;z++) { div[z].className=""; li[z].className=""; } this.className="move"; div[this.index].className="come"; } } for(n=0;n<arrli.length;n++){ arrli[n].index=n; arrli[n].onmouseover=function(){ for(m=0;m<arrli.length;m++){ arrli[m].className=""; image1[m].className=""; p4[m].className=""; } this.className="movie"; image1[this.index].className="active"; p4[this.index].className="active"; num=this.index; } } right.onclick=y; var x=setInterval(y,1000); box1.onmouseover=function(){ clearInterval(x); } box1.onmouseout=function(){ x=setInterval(y,1000) } function y() { num=num+1; if(num>=arrli.length){ num=0; } for (var j = 0;j<arrli.length; j++) { p4[j].className =""; image1[j].className = ""; arrli[j].className=""; } image1[num].className = "active"; p4[num].className="active"; arrli[num].className="movie"; } left.onclick=function() { num=num-1; for (var j = 0;j<arrli.length; j++) { p4[j].className =""; image1[j].className = ""; arrli[j].className=""; } if(num<0){ num=arrli.length-1; } image1[num].className = "active"; p4[num].className="active"; arrli[num].className="movie"; } for(n=0;n<arrli1.length;n++){ arrli1[n].index=n; arrli1[n].onmouseover=function(){ for(m=0;m<arrli1.length;m++){ arrli1[m].className=""; image2[m].className=""; p4[m].className=""; } arrli1[this.index].className="movie"; image2[this.index].className="active"; p4[this.index].className="active"; num1=this.index; } } right1.onclick=y1; var x1=setInterval(y1,1000); box2.onmouseover=function(){ clearInterval(x1); } box2.onmouseout=function(){ x1=setInterval(y1,1000) } function y1() { num1=num1+1; for (var j = 0;j<image2.length; j++) { p1[j].className =""; image2[j].className = ""; arrli1[j].className=""; } if(num1>=image2.length){ num1=0; } image2[num1].className = "active"; p1[num1].className="active"; arrli1[num1].className="movie"; } left1.onclick=function() { num1=num1-1; for(var j = 0;j<image2.length; j++) { p1[j].className =""; image2[j].className = ""; arrli1[j].className=""; } if(num1<0){ num1=image2.length-1; } image2[num1].className = "active"; p1[num1].className="active"; arrli1[num1].className="movie"; } for(n=0;n<arrli2.length;n++){ arrli2[n].index=n; arrli2[n].onmouseover=function(){ for(m=0;m<arrli2.length;m++){ arrli2[m].className=""; image3[m].className=""; p4[m].className=""; } this.className="movie"; image3[this.index].className="active"; p4[this.index].className="active"; num2=this.index; } } right2.onclick=y2; var x2=setInterval(y2,1000); box3.onmouseover=function(){ clearInterval(x2); } box3.onmouseout=function(){ x2=setInterval(y2,1000) } function y2() { num2=num2+1; for (var j = 0;j<arrli2.length; j++) { arrli2[j].className=""; p2[j].className =""; image3[j].className = ""; } if(num2>=arrli2.length){ num2=0; } arrli2[num2].className="movie"; image3[num2].className = "active"; p2[num2].className="active"; } left2.onclick=function() { num2=num2-1; for (var j = 0;j<arrli2.length; j++) { arrli2[j].className=""; p2[j].className =""; image3[j].className = ""; } if(num2<0){ num2=arrli2.length-1; } image3[num2].className = "active"; p2[num2].className="active"; arrli2[num2].className="movie"; } for(n=0;n<arrli3.length;n++){ arrli3[n].index=n; arrli3[n].onmouseover=function(){ for(m=0;m<arrli3.length;m++){ arrli3[m].className=""; image4[m].className=""; p4[m].className=""; } this.className="movie"; image4[this.index].className="active"; p4[this.index].className="active"; num3=this.index; } } right3.onclick=y3; var x3=setInterval(y3,1000); box4.onmouseover=function(){ clearInterval(x3); } box4.onmouseout=function(){ x3=setInterval(y3,1000) } function y3() { num3=num3+1; for (var j = 0;j<image4.length; j++) { arrli3[j].className=""; p3[j].className =""; image4[j].className = ""; } if(num3>=image4.length){ num3=0; } arrli3[num3].className="movie"; image4[num3].className = "active"; p3[num3].className="active"; } left3.onclick=function() { num3=num3-1; for (var j = 0;j<image4.length; j++) { arrli3[j].className=""; p3[j].className =""; image4[j].className = ""; } if(num3<0){ num3=image4.length-1; } arrli3[num3].className="movie"; image4[num3].className = "active"; p3[num3].className="active"; } } </script> </body> </html>