`

javascript—图片的自动切换

js图片自动切换鼠标移动事件setTimeoutclearTimeout 
阅读更多

JS——图片自动切换

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

 

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

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

<div id="pics">
<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为pics的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()">

 

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

0
顶
1
踩
分享到：
| javascript——JS 实现下拉菜单
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics