<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> #banner{width:800px;height:400px;margin: 50px auto;position: relative;} img{width:100%;height:100%;} #right,#left{width:0px;height:100%;background: rgba(255,255,255,0.3); position: absolute;top: 0;font-size: 80px;font-weight: bold; text-align: center;line-height: 400px;color: white;overflow: hidden;} #right{right:0;} #left{left:0;} ul{list-style: none;position: absolute;bottom:5%;left: 30%;} .li{width:30px;height:30px;background:;border-radius: 50%;float: left; text-align: center;line-height: 30px;margin-left: 10px;} </style> </head> <body onload="lunbo()"> <div id="banner"> <!-- 可视窗--> <img src="img/lb1.jpg" id="img"/> <!--插入的图片--> <div id="left"><</div> <!--向左的按钮--> <div id="right">></div> <!--向右的按钮--> <ul> <!--小圆点按钮--> <li class="li" onclick="lb(1)">1</li> <li class="li" onclick="lb(2)">2</li> <li class="li" onclick="lb(3)">3</li> <li class="li" onclick="lb(4)">4</li> <li class="li" onclick="lb(5)">5</li> </ul> </div> <script src="js/script_js.js"></script> <script> var body=document.getElementsByTagName("body"); var tv=idName("banner") //获取可视窗口 var img=idName("img"); //获取图片的id var left=idName("left"); //获取向左按钮的id var right=idName("right"); //获取向右按钮的id left.style.transition=right.style.transition="0.5s"; //设置左右按钮的过渡效果 var lis=document.getElementsByClassName("li"); //获取小圆点数组 var timer=setInterval("lunbo()",2000); //定义一个延时器 var index=0; //定义index初始值为0 function lunbo(){ //创建自动轮播的函数方法 index++; if(index==6){ index=1; } reset(); //调用初始化颜色函数 lis[index-1].style.background="red"; //设置小圆点当时位置时的颜色 img.src="img/lb"+index+".jpg"; //引入图片，以index为下标 } function reset(){ //创建初始化小圆点颜色的函数 for(var i=0;i<lis.length;i++){ //遍历小圆点数组， lis[i].style.backgroundColor="rgba(255,255,255,0.3)"; //初始颜色 } } tv.onmouseover=function(){ //鼠标悬浮时调用函数 clearInterval(timer); //清除名为timer的延时器 left.style.width=right.style.width="100px"; //使左右按钮显示 } tv.onmouseout=function(){ //鼠标移出时调用函数 timer=setInterval("lunbo()",2000); left.style.width=right.style.width="0px"; } function lb(x){ //点击小圆点改变图片 reset(); lis[x-1].style.backgroundColor="red"; img.src="img/lb"+x+".jpg"; } // for(var i=0;i<lis.length;i++){ //另一种小圆点击时的写法 // lis[i].onclick=function(){ // reset(); // index=this.innerHTML-1; // img.src="img/lb"+(index+1)+".jpg"; // lis[index].style.backgroundColor="red"; // } // } left.onclick=function(){ //点击向左的按钮时 index--; if(index==0){index=5}; img.src="img/lb"+index+".jpg"; reset(); lis[index-1].style.backgroundColor="red"; } right.onclick=function(){ //点击向右的按钮时 index++; if(index==6){index=1}; img.src="img/lb"+index+".jpg"; reset(); lis[index-1].style.backgroundColor="red"; } // lunbo(); </script> </body> </html>