图片轮播原理
作者：互联网
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>网页标题</title>
<meta name="keywords" content="关键字列表" />
<meta name="description" content="网页描述" />
<link rel="stylesheet" type="text/css" href="" />
<style type="text/css">
*{margin:0;padding:0;}
body{color:#333;font-size:12px;line-height:20px;}
ul,li{list-style:none;}
#content{margin:0 auto;width:540px;}
#content .scroll_top{width:540px;height:51px;background:url(images/dd_scroll_top.gif) no-repeat;}
#content .scroll_mid{
width:533px;
padding:5px 0 5px 5px;
border-left:1px solid #d6d5d6;
border-right:1px solid #d6d5d6;
background:#f2f2f3;
}
#scroll_number{
float:right;
padding-right:10px;
}
#scroll_number li{
margin-top:5px;
width:13px;
height:13px;
line-height:16px;
border:1px solid #999;
cursor:pointer;
text-align:center;
}
#content .scroll_end{
width:540px;
height:8px;
background:url(images/dd_scroll_end.gif) no-repeat;
margin-bottom:10px;
}
.scroll_number_out{
}
.scroll_number_over{
background-color:#f00;
color:#FFF;
}
</style>
<script type="text/javascript">
/* 思路分析：
1、开启一个定时器
2、定时器函数主要是用来 执行图片轮播的效果
3、当鼠标放在图片上面时 ，图片就停止了轮播的效果 清除了定时器
4、当鼠标离开图片上面时，图片继续在执行轮播的效果 重新开启了定时器功能
5、当鼠标放在li标签上面时，图片就停止了轮播的效果 清除了定时器
6、当鼠标放在li标签上面时，还会显示li标签上面对应的数字的图片
7、当鼠标离开li标签上面时，图片就会继续开始轮播的效果 重新开启了定时器功能
8、li标签上面的高亮效果，它是随着图片滚动而滚动。
我们先要获取到所有的li标签
*/
//当页面加载完成后
var imgObj;
var timer;
var lis_obj;
var lis_length;
window.onload = function(){
//1、开启一个定时器
timer = setInterval("scrollImg()",1000);
//获取img标签对象
imgObj = document.getElementById("dd_scroll");
//先获取到id=scroll_number这个标签对象
var divObj = document.getElementById("scroll_number");
lis_obj = divObj.getElementsByTagName('li');
lis_length = lis_obj.length
}
//定义定时器函数 定时器函数主要是用来执行图片轮播的效果
//显示哪一张图片是由变量n来决定
//当n=1的时候 就应该给第一个li标签设置class属性值
//当n=2的时候 就应该给第二个li标签设置class属性值
//变量n 是从 1开始 1到6
//但是li的下标是从0开始 0到5
//现在变量n与li标签对象的下标之间的变量是 n-1
var n = 2;
function scrollImg(){
//还存在一个问题 高亮显示只需要显示当前的 不需要所有的都显示
//先将所有的li标签上面的className的值清空
for(var i=0;i<lis_length;i++){
lis_obj[i].className = "";
}
//给当前的li标签对象设置class属性值
lis_obj[n-1].className = "scroll_number_over";
imgObj.src = "images/dd_scroll_"+n+".jpg";
n++;
//判断n的值 如果大于6就让n=1
if(n > 6){
n = 1;
}
}
//3、当鼠标放在图片上面时 ，图片就停止了轮播的效果 清除了定时器
function stopScroll(imgNumber){
if(imgNumber){
//现在需要将imgNumber的值赋值给变量n
n = imgNumber;
//这里要马上就要调用scrollImg()这个函数
scrollImg();
}
clearInterval(timer);
}
//4.当鼠标离开图片上面时，图片继续在执行轮播的效果 重新开启了定时器功能
function goon(){
timer = setInterval("scrollImg()",1000);
}
</script>
</head>
<body>
<div id="content">
<!--轮换显示的横幅广告图片-->
<div class="scroll_top"></div>
<div class="scroll_mid">
<img src="images/dd_scroll_1.jpg" alt="轮换显示的图片广告" id="dd_scroll" onm ouseover="stopScroll()" onm ouseout="goon()"/>
<div id="scroll_number">
<ul>
<li class="scroll_number_over" onm ouseover="stopScroll(1)" onm ouseout="goon()">1</li>
<li onm ouseover="stopScroll(2)" onm ouseout="goon()">2</li>
<li onm ouseover="stopScroll(3)" onm ouseout="goon()">3</li>
<li onm ouseover="stopScroll(4)" onm ouseout="goon()">4</li>
<li onm ouseover="stopScroll(5)" onm ouseout="goon()">5</li>
<li onm ouseover="stopScroll(6)" onm ouseout="goon()">6</li>
</ul>
</div>
</div>
<div class="scroll_end"></div>
</div>
</body>
</html>
/* 思路分析：
1、开启一个定时器
2、定时器函数主要是用来 执行图片轮播的效果
3、当鼠标放在图片上面时 ，图片就停止了轮播的效果 清除了定时器
4、当鼠标离开图片上面时，图片继续在执行轮播的效果 重新开启了定时器功能
5、当鼠标放在li标签上面时，图片就停止了轮播的效果 清除了定时器
6、当鼠标放在li标签上面时，还会显示li标签上面对应的数字的图片
7、当鼠标离开li标签上面时，图片就会继续开始轮播的效果 重新开启了定时器功能
8、li标签上面的高亮效果，它是随着图片滚动而滚动。
我们先要获取到所有的li标签
*/
标签：定时器,轮播,标签,li,原理,当鼠标,图片 来源： https://blog.51cto.com/u_15294355/2988700