先看效果：
有三张图片，图片两侧有左右切换按钮，右下侧的小圆点点击可以随意切换图片。
鼠标没移动到图片上时，每隔三秒自动切换图片。
html
下面是html文件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="main" id="main">
<!--导航轮播-->
<div class="banner" id="banner">
<!--把图片当作背景图片，也可以当作超链接-->
<a href="">
<div class="banner-slide slide1 slide-active"></div><!--哪一个div是当前的，就给哪一个添加slide-active-->
</a>
<a href="">
<div class="banner-slide slide2"></div>
</a>
<a href="">
<div class="banner-slide slide3"></div>
</a>
<!--后写的覆盖先写的-->
</div>
<!--上一张，下一张按钮-->
<a href="javascript:void(0)" class="button prev" id="prev"></a><!--不做任何的超链接跳转--><!--公共样式：button 不同的：prev-->
<a href="javascript:void(0)" class="button next" id="next"></a>
<!--圆点导航，点击切换图片-->
<div class="dots" id="dots">
<span class="active"></span><!--当前为active-->
<span></span>
<span></span>
</div>
</div>
<script src="srcipt.js"></script>
</body>
</html>里面的
css
*{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
body{
font-family: "Apple Braille";
color: #14191e;
}
/*大的main盒子*/
.main{
width: 1200px;
height: 460px;
margin: 30px auto;
overflow: hidden;/*超出范围隐藏*/
position: relative;
}
.banner{
width: 1200px;
height: 460px;
position: relative;
overflow: hidden;
}
.banner-slide{
width: 1200px;
height: 460px;
position: absolute;
background-repeat: no-repeat;
display: none;
/*相对于banner定位，而不是body，所以banner有relative*/
}
.slide1{
background: url("bg1.jpg");
}
.slide2{
background: url("bg2.jpg");
}
.slide3{
background: url("bg3.jpg");
}
.slide-active{
display: block;
}
.button{
/*出现在图片上方，需要定位*/
position: absolute;/*相对父盒子定位，父盒子是main，所以main：relative*/
width: 40px;
height: 80px;
left: 244px;
top: 50%;
margin-top: -40px;
background: url("arrow.png") no-repeat center;
}
/*箭头划过时有半透明的效果*/
.button:hover{
/* background: #333;/*背景颜色覆盖button背景图片*/
background-color: #333;/*滑动时改变背景颜色，在背景颜色的基础上显示图片*/
opacity: 0.8;
filter: alpha(opacity=80);/*为了兼容其他浏览器*/
}
.prev{
transform: rotate(180deg)/*水平翻转*/
}
.next{
right:0;
left: auto;/*没有左边的效果，按钮右侧出现*/
}
.dots{
position: absolute;
right: 20px;/*在右侧*/
bottom: 24px;
text-align: right;
}
.dots span{
display: inline-block;/*出现在一条线上*/
width: 12px;
height: 12px;
border-radius: 50px;
background-color: rgba(7,17,27,0.4);/*同时设置透明度*/
margin-right: 8px;
line-height: 12px;
box-shadow: 0 0 0 2px rgba(255,255,255,0.8) inset;/*添加白色描边 inset:内阴影*/
cursor: pointer;
}
.dots span.active{
box-shadow: 0 0 0 2px rgba(7,17,27,0.4) inset;/*当前背景色是白色*/
background: #fff;
}js
//鼠标滑过，停止
//封装一个代替getElementById()的方法
function byId(id) {
//如果是个字符串ID，就返回他的DOM对象
return typeof id==="string"?document.getElementById(id):id;
}
var index=0,timer=null,banner=byId("banner").getElementsByTagName("div"),len=banner.length,dots=byId("dots").getElementsByTagName("span")
,prev=byId("prev"),next=byId("next");
//span个数和div图片相同
function slideImg() {
//获取鼠标滑动的范围
var main=byId("main");
//滑过清除定时器，离开继续
main.onmouseover=function () {
if(timer){
clearInterval(timer);
}
}
main.onmouseout=function () {
timer=setInterval(function () {
index++;
//len=3,index只能是0，1，2
if(index>=len){
index=0;
}
//切换图片,点击按钮也可以实现
changeImg();
},3000);//每隔一段时间调用,每三秒span是active
}
//自动在main上触发
main.onmouseout();
//点击圆点切换图片，遍历所有圆点绑定点击事件
for(var d=0;d<len;d++){
//给所有span添加一个ID的属性，值为d，作为当前span的索引
dots[d].id=d;
dots[d].onclick=function () {
//改变index我饿当前span的索引，但click是最终值3，因为function改变作用域
index=this.id;
this.className="active";
changeImg();
}
}
//下一张，上一张
next.onclick=function () {
index++;
if(index>=len){
index=0;
}
changeImg();
}
prev.onclick=function () {
index--;
if(index<0){
index=2;
}
changeImg();
}
}
function changeImg() {
// banner[index].className='slide-active';//不管元素上有没有类，className属性设置的类会重写元素的类
//遍历img，dots，清除div，以及dots阴影
//先隐藏所有，再显示当前
for(var i=0;i<len;i++){
banner[i].style.display='none';
dots[i].className="";
}
banner[index].style.display='block';
dots[index].className="active";
}
slideImg();