直接上代码,代码有注释:
要想做图片轮播,需要知道以下知识点:
定时函数：
window对象:
window.setInterval("执行的方法名",间隔时间(毫秒))：返回值是一个用来停止计时器的ID
window.clearInterval(计时器的ID):清除定时器,无返回值图片轮播靠的是定时器,定时执行方法去切换图片,切换 img标签下的src属性,以此来切换图片,
鼠标悬停时停止轮播,是依靠鼠标悬停事件onmouseover和鼠标移出事件onmouseout.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
//设置全局变量,统计播放图片的顺序
var imgIndex=1;//从第一张图片开始轮播
var imgCount=6;//总共有6张图片
var liObjs=document.getElementById("scroll_number").getElementsByTagName("li");
/**
* 实现图片轮播
* _args 传入的是数字（第几张图片）鼠标悬停时才会传入参数
*/
function loopShow(_args){//当鼠标移入时,执行鼠标移入事件,执行带参数的方法,参数值在index.html中的loopShow()方法中的参数传入
if(_args){//如果参数存在,代表触发了鼠标悬停事件,那么需要停止计时器
imgIndex=_args;
window.clearInterval(myTime);//停止定时器
}
//1、图片轮播
var imgObj=document.getElementById("dd_scroll");
//1.1、设置显示第几张图片
//1.2、设置数字的背景色（显示的是第几张图片）
for(var i=0;i<liObjs.length;i++){
if(i==imgIndex-1){
//图片的名字只有一个数字的区别,所以切换图片只需要修改图片名字的一个数字
imgObj.setAttribute("src","images/dd_scroll_"+imgIndex+".jpg");//图片显示
liObjs[i].className="scroll_number_over";//数字背景
}else{
liObjs[i].className="scroll_number_out";
}
/*添加移出事件,只能写一个,写在这里或者onload事件里面都一样可以
liObjs[i].onmouseout=function(){
myTime=window.setInterval("loopShow()",1000);
}*/
}
//imgIndex++代表继续显示下一张图片
imgIndex++;
if(imgIndex>imgCount) {//如果图片编号大于中的图片数量,就重新赋值为1,从第一张开始轮播
imgIndex=1;
}
}
var myTime;//全局变量,用于记录定时器的ID,便于在loopshow()方法中使用
window.onload=function(){
//设置定时器定时执行轮播,方法需要参数,就算不给参数也能执行.
myTime=window.setInterval("loopShow()",1000);
//添加移出事件,鼠标移开数字
for(var i=0;i<liObjs.length;i++){
liObjs[i].onmouseout=function(){
myTime=window.setInterval("loopShow()",1000);//返回的myTime是一个用来停止计时器的ID
}
}
</script>
<style type="text/css">
.scroll_number_out{
}
.scroll_number_over{//设置数字的样式,当鼠标停在数字上时,给数字加点背景色和字体颜色.
background-color:#F96;
color:#FFF;
}
</style>
</head>
<body>
<!--轮换显示的横幅广告图片-->
<div class="scroll_top"></div>
<div class="scroll_mid"> <img src="images/dd_scroll_2.jpg" alt="轮换显示的图片广告" id="dd_scroll"/>
<div id="scroll_number">
<ul><!--鼠标悬停时才会触发事件,传入参数-->
<li id="scroll_number_1" onmouseover="loopShow(1)">1</li>
<li id="scroll_number_2" onmouseover="loopShow(2)">2</li>
<li id="scroll_number_3" onmouseover="loopShow(3)">3</li>
<li id="scroll_number_4" onmouseover="loopShow(4)">4</li>
<li id="scroll_number_5" onmouseover="loopShow(5)">5</li>
<li id="scroll_number_6" onmouseover="loopShow(6)">6</li>
</ul>
</div>
</div>
</body>
</html>