JS——图片自动切换
——鼠标停留在图片，图片暂停切换
?
??????? 前面提过鼠标滑过，切换图片的方法，将里面的onmouseover方法改为onclick方法，即可改写为点击切换图片的效果
??????? 在这里介绍一下图片自动切换，且鼠标停留在图片上，停止切换，鼠标移开，继续切换
第一步：先写一个div，用来放四张图片，设置其id="pics"
设置图片及其大小，和是否可见，第一张可见，其他的不可见，例如：
<div id="first" onmouseover="stopPic()" onmouseout="startPic()"> <img src="imgs/02.jpg"style="display:‘‘"width=“310px height=”450px“/> </div>
?
?
第二步：图片切换的方法，传入一个参数,表示从第num张图片起
//定义一个全局变量，用来表示到几张图片了，这里是从0开始的
var num=0；
function ChangePic(num){
var pics = document.getElementById("pics");
//获得id为first的div的所有的div子节点,得到一个数组
var imgs = pics.getElementsByTagName("img");
//判断该图片是否可见，若不可见，则设为可见
if(imgs[num].style.display=="none"){
imgs[num].style.display="";
}
//将除了当前图片外的所有图片设为不可见
for(var i=0;i<imgs.length;i++){
if(i!=num){
imgs[i].style.display="none";
}
}
}
//设置一个全局变量，用来接收setTime()的值
var flag;
//自动切换图片的方法
function autoPic(){
//图片数加1 ，当到了第四张时，则跳回第一张
num++;
if(num>=4){
num=1;
}
//调用图片切换的方法
ChangePic(num);
//每隔一段时间，调用自己，实现自动切换图片
flag = setTimeout("ChangePic()",1000);
}
?
?
第三步：将autoPic方法加载到body里面，当运行该文件时，会自动调用该方法
?
<BODY onLoad="autoPic()">
?
第四步：设置鼠标停留的效果
//鼠标停在图片上，停止切换图片
function stopPic(){
clearTimeout(flag);
}
//鼠标移开，图片自动切换
function startPic(){
flag = setTimeout("autoPic()",1000);
}
?
第五步：在放置图片的div上，调用鼠标停留在图片上，图片停止切换，和鼠标移开再次开始切换的方法
<div id="pics" onmouseover="stopPic()" onmouseout="startPic()">
?
这样图片的自动切换效果就做好了
原文：http://2240550808.iteye.com/blog/2166108