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()">

 

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

你可能感兴趣的:(js,图片自动切换,鼠标移动事件,setTimeout,clearTimeout)