实现效果：
实现代码：
1.css：
css样式我也不怎么熟练，我感觉这就要靠多练，多记了吧
<style type="text/css">
*{
padding:0;
margin:0;
text-decoration:none;
}
body{
padding:20px;
}
#container{
position:relative;
600px;
height:400px;
margin:0 auto;
border:3px solid #333;
overflow:hidden;
}
#picture{
position:absolute;
1800px;
height:400px;
z-index:1;
}
#picture img{
float:left;
600px;
height:400px;
}
#button{
position:absolute;
left:250px;
bottom:20px;
100px;
height:10px;
z-index:2;
}
#button span{
float:left;
margin-right:5px;
10px;
height:10px;
border:1px solid #fff;
border-radius:50%;
background:#333;
cursor:pointer;
}
#button .on{
background:orangered;
}
.arrow{
position:absolute;
top:180px;
z-index:2;
40px;
height:40px;
font-size:36px;
font-weight:bold;
line-height:39px;
text-align:center;
color:#fff;
background-color: RGBA(0, 0, 0, .3);
cursor:pointer;
}
.arrow:hover{
background-color: RGBA(0, 0, 0, .9);
}
#prev{
left:20px;
}
#next{
right:20px;
}
</style>
2.根据偏移量获取显示的图片：
function animate(offset){
var newLeft = parseInt(picture.style.left) + offset;
picture.style.left = newLeft + 'px';
if(newLeft<-1200){
picture.style.left = 0 + 'px';
}
if(newLeft>0){
picture.style.left = -1200 + 'px';
}
};
3.消除按钮样式：
function showButton(){
for(var i = 0 ;i < button.length ; i++){
if(button[i].className = 'on')
button[i].className = ' ';
}
button[index-1].className = 'on';
}
4.通过左右按钮点击来切换图片：
prev.onclick = function(){
index -= 1;
if(index < 1){
index = 3;
}
showButton();
animate(600);
};
next.onclick = function(){
index += 1;
if(index > 3){
index = 1;
}
showButton();
animate(-600);
};
5.可以自动播放，以及鼠标放至图片上，停止播放：
function play(){
timer = setInterval(function () {
next.onclick()
},1500 )
};
play();
function stop(){
clearInterval(timer);
};
container.onmouseover = stop;
container.onmouseout = play;
6.点击按钮显示相应的图片和按钮样式：
for(var i = 0;i < button.length;i ++){
(function(i){
button[i].onclick = function(){
var clickIndex = parseInt(this.getAttribute('index'));
offset = 600 * (index - clickIndex);
animate(offset);
index = clickIndex;
showButton();
}
})(i)
};
7.html：
<div id="container">
<div id="picture" style="left:0px;">
<img src="img/1.jpg"></img>
<img src="img/2.jpg"></img>
<img src="img/3.jpg"></img>
</div>
<div id="button">
<span index="1" class="on"></span>
<span index="2"></span>
<span index="3"></span>
</div>
<a href="javascript:;" id="prev" class="arrow"><</a>
<a href="javascript:;" id="next" class="arrow">></a>
</div>
完整代码：
<html> <head> <meta charset="utf-8"> <title>轮播图</title> <style type="text/css"> *{ padding:0; margin:0; text-decoration:none; } body{ padding:20px; } #container{ position:relative; width:600px; height:400px; margin:0 auto; border:3px solid #333; overflow:hidden; } #picture{ position:absolute; width:1800px; height:400px; z-index:1; } #picture img{ float:left; width:600px; height:400px; } #button{ position:absolute; left:250px; bottom:20px; width:100px; height:10px; z-index:2; } #button span{ float:left; margin-right:5px; width:10px; height:10px; border:1px solid #fff; border-radius:50%; background:#333; cursor:pointer; } #button .on{ background:orangered; } .arrow{ position:absolute; top:180px; z-index:2; width:40px; height:40px; font-size:36px; font-weight:bold; line-height:39px; text-align:center; color:#fff; background-color: RGBA(0, 0, 0, .3); cursor:pointer; } .arrow:hover{ background-color: RGBA(0, 0, 0, .9); } #prev{ left:20px; } #next{ right:20px; } </style> <script> window.onload = function(){ var container = document.getElementById('container'); var picture = document.getElementById('picture'); var button = document.getElementById('button').getElementsByTagName('span'); var prev = document.getElementById('prev'); var next = document.getElementById('next'); var index = 1; var timer; //根据偏移量获取显示的图片 function animate(offset){ var newLeft = parseInt(picture.style.left) + offset; picture.style.left = newLeft + 'px'; if(newLeft<-1200){ picture.style.left = 0 + 'px'; } if(newLeft>0){ picture.style.left = -1200 + 'px'; } }; //消除按钮样式 function showButton(){ for(var i = 0 ;i < button.length ; i++){ if(button[i].className = 'on') button[i].className = ' '; } button[index-1].className = 'on'; } prev.onclick = function(){ index -= 1; if(index < 1){ index = 3; } showButton(); animate(600); }; next.onclick = function(){ index += 1; if(index > 3){ index = 1; } showButton(); animate(-600); }; function play(){ timer = setInterval(function () { next.onclick() },1500 ) }; play(); function stop(){ clearInterval(timer); }; container.onmouseover = stop; container.onmouseout = play; //点击按钮显示相应的图片和按钮样式 for(var i = 0;i < button.length;i ++){ (function(i){ button[i].onclick = function(){ var clickIndex = parseInt(this.getAttribute('index')); offset = 600 * (index - clickIndex); animate(offset); index = clickIndex; showButton(); } })(i) }; } </script> </head> <body> <div id="container"> <div id="picture" style="left:0px;"> <img src="img/1.jpg"></img> <img src="img/2.jpg"></img> <img src="img/3.jpg"></img> </div> <div id="button"> <span index="1" class="on"></span> <span index="2"></span> <span index="3"></span> </div> <a href="javascript:;" id="prev" class="arrow"><</a> <a href="javascript:;" id="next" class="arrow">></a> </div> </body> </html>
注意：
id container是相对定位(600px)，picture是绝对定位(3000px),
所以随着偏移量的改变，picture位置会依据container位置相应改变。
相对定位看自身，绝对定位看已定位的最近的父元素。