轮播实现的方式及种类很多，如无缝轮播‘css实现轮播等
现在这里介绍最简单的js轮播图：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js轮播图</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
#container{
margin: 0 auto;
width:335px;
position:relative;
}
#list{
position: absolute;
bottom: 10px;
left: 50px;
list-style:none;
}
#list li {
float:left;
width:20px;
height:20px;
border-radius: 50%;
text-align: center;
line-height: 20px;
margin-right:20px;
background-color:#fff;
}
.chooseBut{
width:30px;
height:50px;
background-color:rgba(255,255,255,0.5);
text-align:center;
line-height: 50px;
position:absolute;
top:100px;
z-index: 2;
}
#left{
left:0;
}
#right{
right:0;
}
</style>
</head>
<body>
<div id="container">
<img id="pic" src="img/0.png" />
<ul id="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
<div id="left" class="chooseBut"><</div>
<div id="right" class="chooseBut">></div>
</div>
<script type="text/javascript">
function $(ele){
return document.getElementById(ele);
}
var oLis = $("list").getElementsByTagName("li");
oLis[0].style.background = "yellow";
var currentpage = 0;
var timer = setInterval(func,1000);
function func(){
currentpage++;
change();
}
function change(){
if (currentpage == 6) {
currentpage = 0;
}
if (currentpage == -1) {
currentpage = 5;
}
$("pic").src = "img/" + currentpage + ".png";
// 清空所有小圆点的颜色
for (var i = 0; i < oLis.length; i++) {
oLis[i].style.backgroundColor = "#aaa";
}
// 改变对应小圆点为红色
oLis[currentpage].style.backgroundColor = "#ff0";
}
$("container").addEventListener("mouseover",func1,false);
function func1(){
clearInterval(timer);
$("left").style.display = "block";
$("right").style.display = "block";
}
$("container").addEventListener("mouseout",func2,false);
function func2(){
timer = setInterval(func,1000);
$("left").style.display = "none";
$("right").style.display = "none";
}
//上下翻页
$("left").addEventListener("click",func3,false);
function func3(){
currentpage--;
change();
}
$("left").onmouseover = function() {
this.style.backgroundColor = "rgba(255,255,255,0.8)";
}
$("left").onmouseout = function() {
this.style.backgroundColor = "rgba(255,255,255,0.2)";
}
$("right").addEventListener("click",func4,false);
function func4(){
currentpage++;
change();
}
$("right").onmouseover = function() {
this.style.backgroundColor = "rgba(255,255,255,0.8)";
}
$("right").onmouseout = function() {
this.style.backgroundColor = "rgba(255,255,255,0.2)";
}
for (var j = 0; j < oLis.length; j++) {
oLis[j].onmouseover = function() {
currentpage = parseInt(this.innerHTML) - 1;
change();
};
}
</script>
</body>
</html>
