轮播图效果：
实现的功能：
1.鼠标移入，左右按钮显示
2.右下叫小圆点鼠标移入，进入下一张图
3.左右按钮点击，右下小圆点页跟随变更
4.自动开启计时器，鼠标移入右下叫小圆点区，计时器停止，鼠标移出小圆点区，计时器继续（自动下一张图片）
5.移入左右按钮，计时器消失，移出左右按钮计时器出现，封装了公共切换图片
实现代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>总有人比你富有，却比你更聪明更努力！</title>
<style type="text/css">
/* css 重置 */
* {
margin: 0;
padding: 0;
list-style: none;
} body {
background: #fff;
font: normal 12px/22px 宋体;
} img {
border: 0;
} a {
text-decoration: none;
color: #333;
} /* 本例子css */
.slideBox {
width: 790px;
height: 340px;
overflow: hidden;
position: relative;
border: 1px solid #ddd;
margin: 50px auto;
} .bd .hd {
height: 20px;
overflow: hidden;
position: absolute;
right: 5px;
bottom: 5px;
z-index: 1;
} .bd .hd ul {
overflow: hidden;
zoom: 1;
float: left!important;
} .bd .hd ul li {
float: left;
margin-right: 5px!important;
width: 20px;
height: 20px;
line-height: 20px;
font-weight: bold;
text-align: center;
background: #fff;
cursor: pointer;
border-radius: 50%;
} .bd .hd ul li.on {
background: #f00;
color: #fff;
} .slideBox .bd {
position: relative;
height: 100%;
z-index: 0;
} /* ----------------------- */
.slideBox .bd li {
zoom: 1;
vertical-align: middle;
left: 0;
top: 0;
} .slideBox .bd li.first {
z-index: 1;
} /* ----------------------- */
.slideBox .bd img {
width: 790px;
height: 340px;
display: block;
} .slideBox .prev,
.slideBox .next {
position: absolute;
left: 0;
top: 50%;
margin-top: -25px;
display: none;
width: 32px;
height: 40px;
background: rgba(0,0,0,0.3);
filter: alpha(opacity=50);
opacity: 0.5;
text-align: center;
font-size: 30px;
font-weight: bold;
color: #fff;
line-height: 40px;
} .slideBox .next {
left: auto;
right: 0;
background-position: 8px 5px;
} .slideBox .prev:hover,
.slideBox .next:hover {
filter: alpha(opacity=100);
opacity: 1;
} </style>
</head>
<body>
<div id="slideBox" class="slideBox"> <div class="bd" id="bd">
<div class="hd">
<ul id="control">
<li class="on"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div> <ul>
<li><a href="#"><img id="bigImg" src="data:images/01.jpg"/></a></li>
</ul>
<a class="prev" id="prev" href="javascript:;" ><</a>
<a class="next" id="next" href="javascript:;">></a>
</div> </div>
</body>
</html>
<script> // 公共获取事件源函数
function $(id) {
return document.getElementById(id);
}
// 切换轮播图
function changImg(imgIndex) {
$('bigImg').src= imgArr[imgIndex];
console.log(imgIndex);
// 排他思想
for(var j = 0 ; j < liBtns.length ; j++) {
liBtns[j].className = "";
}
// 设置小红点样式
liBtns[imgIndex].className = 'on';
}
// 功能需求类似tab栏，也可参考线上轮播图效果
// 获取轮播图区
// 获取轮播图
var imgArr = [
"images/01.jpg",
"images/02.jpg",
"images/03.jpg",
"images/04.jpg",
"images/05.jpg"
];
// 前后按钮功能：1.鼠标移入轮播图区，显示前后按钮，移出消失前后按钮
$('bd').onmouseover = function () {
$('prev').style.display = "block";
$('next').style.display = "block";
}
$('bd').onmouseout = function () {
$('prev').style.display = "none";
$('next').style.display = "none";
}
// 记录当前图片下标-- 为了图片索引值同步
var imgIndex = 0; /* 计时器,3秒切换到下一张轮播图*/
var t; // 计时器变量
function interval() {
t = setInterval(
function () {
imgIndex+1 == imgArr.length ? imgIndex = 0:imgIndex ++;
// 设置下一张图片
changImg(imgIndex);
}
,3000);
} // 鼠标移入圆点区，关闭计时器
$('control').onmouseover = function () {
clearInterval(t);
}
// 鼠标移开圆点区，开启计时器自动切换轮播图
$('control').onmouseout = function () {
interval();
}
// 鼠标移入上，下一张图片的按钮是关闭计时器
$('next').onmouseover = function () {
clearInterval(t);
}
$('prev').onmouseover = function () {
clearInterval(t);
} // 把鼠标移出上下一张图片区域,开启计时器
$('next').onmouseout = function () {
interval();
}
$('prev').onmouseout = function () {
interval();
}
interval(); // 圆点鼠标移到上面图片轮播
var liBtns = $('control').getElementsByTagName('li');
for (var i = imgIndex ; i < liBtns.length ; i++) {
// 设置当前按钮下标
liBtns[i].index = i;
liBtns[i].onmouseover = function () {
changImg(this.index);
imgIndex = this.index;
}
} /*上下轮播图*/
// 下一张轮播图
$('next').onclick = function () {
// 下一张图片的地址是当前图片地在数组中的下标加1,并且在图片下标等于数组长度的时，重调图片数组下标为0，完成循环轮播
imgIndex+1 == imgArr.length ? imgIndex = 0:imgIndex ++;
// 设置下一张图片
changImg(imgIndex); }
// 上一张轮播图
$('prev').onclick = function () {
// 下一张图片的地址是当前图片地在数组中的下标减1，并且在图片下标小于0时，重调数组下标为图片数组最后一张图片，完成循环轮播
imgIndex-1 < 0 ? imgIndex = imgArr.length-1 :imgIndex --;
// 设置上一张轮图片
changImg(imgIndex);
} </script>
下面是轮播图的小红点是JS动态生成的：
主要与上面代码的区别是： 灰色代码区的HTML结构部分 黄色代码区域的JS部分
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>总有人比你富有，却比你更聪明更努力！</title>
<style type="text/css">
/* css 重置 */
* {
margin: 0;
padding: 0;
list-style: none;
} body {
background: #fff;
font: normal 12px/22px 宋体;
} img {
border: 0;
} a {
text-decoration: none;
color: #333;
} /* 本例子css */
.slideBox {
width: 790px;
height: 340px;
overflow: hidden;
position: relative;
border: 1px solid #ddd;
margin: 50px auto;
} .bd .hd {
height: 20px;
overflow: hidden;
position: absolute;
right: 5px;
bottom: 5px;
z-index: 1;
} .bd .hd ul {
overflow: hidden;
zoom: 1;
float: left!important;
} .bd .hd ul li {
float: left;
margin-right: 5px!important;
width: 20px;
height: 20px;
line-height: 20px;
font-weight: bold;
text-align: center;
background: #fff;
cursor: pointer;
border-radius: 50%;
} .bd .hd ul li.on {
background: #f00;
color: #fff;
} .slideBox .bd {
position: relative;
height: 100%;
z-index: 0;
} /* ----------------------- */
.slideBox .bd li {
zoom: 1;
vertical-align: middle;
left: 0;
top: 0;
} .slideBox .bd li.first {
z-index: 1;
} /* ----------------------- */
.slideBox .bd img {
width: 790px;
height: 340px;
display: block;
} .slideBox .prev,
.slideBox .next {
position: absolute;
left: 0;
top: 50%;
margin-top: -25px;
display: none;
width: 32px;
height: 40px;
background: rgba(0,0,0,0.3);
filter: alpha(opacity=50);
opacity: 0.5;
text-align: center;
font-size: 30px;
font-weight: bold;
color: #fff;
line-height: 40px;
} .slideBox .next {
left: auto;
right: 0;
background-position: 8px 5px;
} .slideBox .prev:hover,
.slideBox .next:hover {
filter: alpha(opacity=100);
opacity: 1;
} </style>
</head>
<body>
<div id="slideBox" class="slideBox"> <div class="bd" id="bd">
<div class="hd">
<ul id="control"> </ul>
</div> <ul>
<li><a href="#"><img id="bigImg" src="data:images/01.jpg"/></a></li>
</ul>
<a class="prev" id="prev" href="javascript:;" ><</a>
<a class="next" id="next" href="javascript:;">></a>
</div> </div>
</body>
</html>
<script>
// 记录当前图片下标-- 为了图片索引值同步
var imgIndex = 0;
var t; // 计时器变量
// 公共获取事件源函数
function $(id) {
return document.getElementById(id);
}
// 切换轮播图
function changImg(imgIndex) {
$('bigImg').src= imgArr[imgIndex];
console.log(imgIndex);
// 排他思想
for(var j = 0 ; j < liBtns.length ; j++) {
liBtns[j].className = "";
}
// 设置小红点样式
liBtns[imgIndex].className = 'on';
}
// 功能需求类似tab栏，也可参考线上轮播图效果
// 获取轮播图区
// 获取轮播图
var imgArr = [
"images/01.jpg",
"images/02.jpg",
"images/03.jpg",
"images/04.jpg",
"images/05.jpg"
]; //自动生成li
// 默认设置第一个li的className是on
// 生成第一个默认li带并设置className = "on"
var liArr = [];
for(var i = 0 ; i < imgArr.length ; i++ ) {
liArr.push('<li></li>')
}
// 转换成字符串
$('control').innerHTML = liArr.join('');
// 设置属性
$('control').children[0].setAttribute("class","on") // 前后按钮功能：1.鼠标移入轮播图区，显示前后按钮，移出消失前后按钮
$('bd').onmouseover = function () {
$('prev').style.display = "block";
$('next').style.display = "block";
}
$('bd').onmouseout = function () {
$('prev').style.display = "none";
$('next').style.display = "none";
} //下一张图片函数提取
function nextImg() {
imgIndex+1 == imgArr.length ? imgIndex = 0:imgIndex ++;
// 设置下一张图片
changImg(imgIndex);
} /* 计时器,3秒切换到下一张轮播图*/ function interval() {
t = setInterval(nextImg,3000);
} // 鼠标移入圆点区，关闭计时器
$('control').onmouseover = function () {
clearInterval(t);
}
// 鼠标移开圆点区，开启计时器自动切换轮播图
$('control').onmouseout = function () {
interval();
}
// 鼠标移入上，下一张图片的按钮是关闭计时器
$('next').onmouseover = function () {
clearInterval(t);
}
$('prev').onmouseover = function () {
clearInterval(t);
} // 把鼠标移出上下一张图片区域,开启计时器
$('next').onmouseout = function () {
interval();
}
$('prev').onmouseout = function () {
interval();
}
interval(); // 圆点鼠标移到上面图片轮播
var liBtns = $('control').getElementsByTagName('li');
for (var i = imgIndex ; i < liBtns.length ; i++) {
// 设置当前按钮下标
liBtns[i].index = i;
liBtns[i].onmouseover = function () {
changImg(this.index);
imgIndex = this.index;
}
} /*上下轮播图*/
// 下一张轮播图
$('next').onclick = nextImg;
// 上一张轮播图
$('prev').onclick = function () {
// 下一张图片的地址是当前图片地在数组中的下标减1，并且在图片下标小于0时，重调数组下标为图片数组最后一张图片，完成循环轮播
imgIndex-1 < 0 ? imgIndex = imgArr.length-1 :imgIndex --;
// 设置上一张轮图片
changImg(imgIndex);
} </script>