<!DOCTYPE html>
<html>
<head>
<title>轮播图 1</title>
<style type="text/css">
ul{
list-style: none;
}
.imgs{
width:590px;
height:470px;
overflow: hidden;
}
.dots{
width:164px;
position:absolute;
left:250px;
top:450px;
z-index: 999;
}
.dot{
width:10px;
height:10px;
border:2px solid #fff;
border-radius:10px;
display: inline-block;
}
</style>
</head>
<body>
<div class="ad">
<ul id="imgs" class="imgs">
<li class="img_li"><img src="img/1.jpg"></li>
<li class="img_li"><img src="img/2.jpg"></li>
<li class="img_li"><img src="img/3.jpg"></li>
<li class="img_li"><img src="img/4.jpg"></li>
<li class="img_li"><img src="img/5.jpg"></li>
<li class="img_li"><img src="img/6.jpg"></li>
</ul>
<ul class="dots">
<li data=‘0‘ class="dot" style="</li>
<li data=‘1‘ class="dot"></li>
<li data=‘2‘ class="dot"></li>
<li data=‘3‘ class="dot"></li>
<li data=‘4‘ class="dot"></li>
<li data=‘5‘ class="dot"></li>
</ul>
</div>
<script type="text/javascript">
//简单轮播图 1 图片自动切换
//写法 1 设置定时器 移动图片
// setInterval(function(){
// //每隔一秒，将第一张图片移动到最后
// //获取第一张图片的 li
// // var li = document.querySelectorAll(‘.img_li‘)[0];
// var li = document.querySelector(‘.img_li‘);
// var ul = document.getElementById(‘imgs‘);
// // var li = ul.firstElementChild;
// //将第一个 li 子元素 放到 ul 的最后一个子元素 位置
// ul.appendChild(li); //appendChild 向父元素 添加最后一个子元素
// }, 1000);
//写法 2 设置定时器 通过 css 进行控制图片的显示和隐藏
// var num = 0;
// setInterval(function(){
// num++;
// //先将所有的图片都隐藏
// //获取所有的图片 li
// var img_lis = document.querySelectorAll(‘.img_li‘);
// //遍历数组，对每一张图片的 li，设置 css 样式 display none
// for(var i=0; i<img_lis.length; i++){
// // img_lis[i] 一个一个的 li 标签
// img_lis[i].style.display = ‘none‘;
// }
// //将下标为 num 图片显示 对 num 下标的图片 li，设置设置 css 样式 display block
// if(num == img_lis.length){
// // 0 1 2 3 4 5 0 1 2 3 4 5
// num = 0;
// }
// img_lis[num].style.display = ‘block‘;
// }, 1000);
//
//
//
//简单轮播图 2 鼠标悬浮切换图片
//1) 使用自定义属性，保存小白圈下标
//先获取所有的小白圈的 li
// var dot_lis = document.querySelectorAll(‘.dot‘);
//遍历绑定鼠标悬浮事件
// for(var i=0; i<dot_lis.length; i++){
// //逐个绑定事件
// dot_lis[i].onmouseover = function(){
// //先隐藏所有图片，给所有的小白圈去掉背景色
// var img_lis = document.querySelectorAll(‘.img_li‘);
// for(var j=0; j<img_lis.length; j++){
// img_lis[j].style.display = ‘none‘;
// dot_lis[j].style.backgroundColor = ‘‘;
// }
// //当前的小白圈加背景色
// this.style.backgroundColor = ‘white‘;
// //显示对应的图片
// // 获取当前小白圈的下标，用于获取对应的图片
// // console.log( this );
// // console.log( this.getAttribute(‘data‘) );
// // 在小白圈的 li 上自定义一个 data 属性 记录对应的下标
// var index = this.getAttribute(‘data‘);
// img_lis[index].style.display = ‘block‘;
// }
// }
//
// 使用匿名函数自调用，保存下标 i
// var dot_lis = document.querySelectorAll(‘.dot‘);
// for(var i=0; i<dot_lis.length; i++){
// (function(i){ // for 循环 绑定事件，事件中 i 丢失问题
// // 函数形参 相当于在函数内部使用 var 定义了一个局部变量 var i = i;
// //逐个绑定事件
// dot_lis[i].onmouseover = function(){
// //先隐藏所有图片，给所有的小白圈去掉背景色
// var img_lis = document.querySelectorAll(‘.img_li‘);
// for(var j=0; j<img_lis.length; j++){
// img_lis[j].style.display = ‘none‘;
// dot_lis[j].style.backgroundColor = ‘‘;
// }
// //当前的小白圈加背景色
// this.style.backgroundColor = ‘white‘;
// //显示对应的图片
// // 获取当前小白圈的下标，用于获取对应的图片
// // console.log(i);
// img_lis[i].style.display = ‘block‘;
// }
// })(i);
// }
</script>
<script type="text/javascript">
//整合综合效果
//封装一个函数，根据一个数字参数，显示指定的图片
function change(n){
// 获取所有的图片 li、获取所有小白圈 li
var img_lis = document.querySelectorAll(‘.img_li‘);
var dot_lis = document.querySelectorAll(‘.dot‘);
//遍历数组
for(var i=0; i<img_lis.length; i++){
//将所有的图片都隐藏
img_lis[i].style.display = ‘none‘;
//将所有的小白圈背景色去掉
dot_lis[i].style.backgroundColor = ‘‘;
}
//根据下标参数 n,将指定的图片显示
img_lis[n].style.display = ‘block‘;
//根据下标参数 n,将指定的小白圈背景色加上
dot_lis[n].style.backgroundColor = ‘white‘;
}
//自动切换 num 变量 和 timer 变量 一定要是全局变量
var num = 0;
// var timer = setInterval(function(){
// //获取所有的图片的 li，用于后续获取长度
// var img_lis = document.querySelectorAll(‘.img_li‘);
// num++;
// //num 是作为下标，显示图片的，不能超出最大下标
// if(num == img_lis.length){
// num = 0;
// }
// //根据 num 显示对应的图片
// change(num);
// }, 1000);
var timer;
function setTimer(){
timer = setInterval(function(){
//获取所有的图片的 li，用于后续获取长度
var img_lis = document.querySelectorAll(‘.img_li‘);
num++;
//num 是作为下标，显示图片的，不能超出最大下标
if(num == img_lis.length){
num = 0;
}
//根据 num 显示对应的图片
change(num);
}, 1000);
}
setTimer();
//鼠标悬浮切换图片
//获取所有的小白圈，循环绑定事件
var dot_lis = document.querySelectorAll(‘.dot‘);
for(var i=0; i<dot_lis.length; i++){
(function(i){
//函数内部 i 变成了局部变量
dot_lis[i].onmouseover = function(){
//鼠标悬浮小白圈，停止自动切换的定时器
clearInterval(timer);
//获取悬浮的小白圈的下标
//调用 change 函数
change(i);
//如果需要让自动切换图片按照以前顺序继续，则设置 num 的值为 i
num = i;
}
//鼠标离开小白圈，重新设置定时器
dot_lis[i].onmouseout = function(){
//调用封装的设置定时器的函数
setTimer();
}
})(i);
}
</script>
</body>
</html>
轮播图练习
原文：https://www.cnblogs.com/zgn521019/p/14233822.html
