<!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>
浙公网安备 33010602011771号