JavaScript之一个简单的轮播图
图片请自备
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>简单的轮播图</title>
<style type="text/css">
*{margin:0;padding:0;}
ul,li{list-style:none;}
img{border:0;}
.wrapper{
width: 800px;
margin: 0 auto;
padding-bottom: 50px;
}
#focus{
width: 800px;
height: 280px;
overflow: hidden;
position: relative;
}
#focus ul{
height: 380px;
position: absolute;
}
#focus ul li{
float: left;
width: 800px;
height: 280px;
overflow: hidden;
position: relative;
background: #000;
}
#focus ul li div{
position: absolute;
overflow: hidden;
}
#focus .preBtn{
width: 45px;
height: 100px;
left: 0;
top:90px;
background:url(images/spirte.png) no-repeat 0 0;
background-color:#000;
cursor: pointer;
opacity:0.4;
filter:alpha(opacity=40);
}
#focus .nextBtn{
width: 45px;
height: 100px;
right:0px;
top:90px;
background:url(images/spirte.png) no-repeat right top;
background-color:#000;
cursor: pointer;
opacity:0.4;
filter:alpha(opacity=40);
}
</style>
</head>
<body>
<div class="wrapper">
<div id="focus">
<ul>
<li>
<a href="#" target="_blank"><img src="images/01.jpg" alt="" id="pic"/></a>
<div class="preBtn" id="showPre"></div>
<div class="nextBtn" id="showNext"></div>
</li>
</ul>
</div>
</div>
<script type="text/javascript">
//用于存放图片集
var pic_list = [
"images/01.jpg",
"images/02.jpg",
"images/03.jpg",
"images/04.jpg",
"images/05.jpg"
];
var pic = document.getElementById("pic"); //获取到img标签
var index = 0; //索引
function auto(){ //自动播放
index++;
if(index==pic_list.length){
index = 0;
}
pic.src = pic_list[index];
}
var left = document.getElementById("showPre"); //左
left.onclick = function(){
clearTimeout(auto);
index--;
if(index<=0){
index = 1;
}
pic.src = pic_list[index];
}
var right = document.getElementById("showNext"); //右
right.onclick = function(){
clearTimeout(auto);
index++;
if(index==pic_list.length){
index = 0;
}
pic.src = pic_list[index];
}
setInterval(auto,3000);
</script>
</body>
</html>