javascript—图片的自动切换

阅读更多

JS——图片自动切换

——鼠标停留在图片，图片暂停切换

 

        前面提过鼠标滑过，切换图片的方法，将里面的onmouseover方法改为onclick方法，即可改写为点击切换图片的效果
        在这里介绍一下图片自动切换，且鼠标停留在图片上，停止切换，鼠标移开，继续切换

第一步：先写一个div，用来放四张图片，设置其id="pics"
设置图片及其大小，和是否可见，第一张可见，其他的不可见，例如：

 

 

第二步：图片切换的方法，传入一个参数,表示从第num张图片起

//定义一个全局变量，用来表示到几张图片了，这里是从0开始的
var num=0；
function ChangePic(num){
  var pics = document.getElementById("pics");
  //获得id为pics的div的所有的div子节点,得到一个数组
  var imgs =  pics.getElementsByTagName("img");
  //判断该图片是否可见，若不可见，则设为可见
  if(imgs[num].style.display=="none"){
   imgs[num].style.display="";
  }
  //将除了当前图片外的所有图片设为不可见
  for(var i=0;i=4){
   num=1;
  }
  //调用图片切换的方法
  ChangePic(num);
  //每隔一段时间，调用自己，实现自动切换图片
  flag = setTimeout("ChangePic()",1000);
 }

 

 

第三步：将autoPic方法加载到body里面，当运行该文件时，会自动调用该方法
 

 onLoad="autoPic()">

 

第四步：设置鼠标停留的效果

//鼠标停在图片上，停止切换图片
function stopPic(){
 clearTimeout(flag);
}
//鼠标移开，图片自动切换
function startPic(){
 flag = setTimeout("autoPic()",1000);
}

 

第五步：在放置图片的div上，调用鼠标停留在图片上，图片停止切换，和鼠标移开再次开始切换的方法

 
onmouseover="stopPic()"  onmouseout="startPic()">

 

这样图片的自动切换效果就做好了