<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>banner</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#box{
width: 650px;
height: 227px;
border: 2px solid aqua;
margin: 10px;
overflow: hidden;
position: relative;
}
#list{
list-style: none;
margin-left: 260px;
position: absolute;
bottom: 10px;
}
#list li{
width: 20px;
height: 20px;
line-height: 20px;
text-align: center;
font-size: 20px;
background: grey;
color: white;
margin-right: 10px;
float: left;
border-radius: 20px;
}
#left,#right{
width: 30px;
height: 60px;
background-color: rgba(0,0,0,0.4);
font-size: 30px;
color: white;
line-height: 60px;
text-align: center;
top: 100px;
position: absolute;
display: none;
}
#left{
left: 0;
}
#right{
right: 0;
}
</style>
</head>
<body>
<div id="box">
<img src="img/tu1.jpg" id="pic">
<ul id="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<div id="left"><</div>
<div id="right">></div>
</div>
<script type="text/javascript">
var jsBox = document.getElementById('box');
var jsPic = document.getElementById('pic');
var jslist = document.getElementsByTagName('li');
var jsleft = document.getElementById('left');
var jsright = document.getElementById('right');
jslist[0].style.background = 'red';
var currentpage = 1;
var timer = setInterval(startloop,1000)
function startloop(){
currentpage++;
autoPlay();
}
function autoPlay(){
if(currentpage==6){
currentpage=1;
//下面点击左侧按钮时防止出现问题
}else if(currentpage==0){
currentpage = 5;
}
jsPic.src = "img/tu"+currentpage+".jpg";
//轮播过程按钮的背景颜色赋值red ,先遍历每个按钮让其为灰色
for(var i=0;i<jslist.length;i++){
jslist[i].style.background = "#aaa";
}
jslist[currentpage-1].style.background = "red";
}
// 鼠标进入div时,轮播停止,两侧按钮显示
jsBox.onmouseover = function(){
clearInterval(timer);
jsleft.style.display = 'block';
jsright.style.display = 'block';
}
jsBox.onmouseout = function(){
timer = setInterval(startloop,1000);
jsleft.style.display = 'none';
jsright.style.display = 'none';
}
//鼠标移入移出两侧按钮的背景颜色
jsleft.onmouseover = function(){
jsleft.style.background = 'rgba(0,0,0,0.8)';
}
jsleft.onmouseout = function(){
jsleft.style.background = 'rgba(0,0,0,0.4)';
}
jsright.onmouseover = function(){
jsright.style.background = 'rgba(0,0,0,0.8)';
}
jsright.onmouseout = function(){
jsright.style.background = 'rgba(0,0,0,0.4)';
}
//点击右侧按钮currentpage++图片下一张
jsright.onclick = function(){
currentpage++;
autoPlay();
}
//点击左侧按钮currentpage++图片上一张
jsleft.onclick = function(){
currentpage--;
autoPlay();
}
//点击按钮时图片和按钮对应
for(var i=0;i<jslist.length;i++){
jslist[i].index = i+1;//1
jslist[i].onmouseover = function(){
// currentpage = parseInt(this.innerHTML);//如果li里面是对应的数字可以用此方法,和注释1/2效果一样
currentpage = parseInt(this.index);//2
autoPlay();
}
}
</script>
</body>
</html>