recherche

Maison  >  Article  >  interface Web  >  js自动切换图片

js自动切换图片

高洛峰
高洛峰original
2016-10-11 16:11:39953parcourir

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title> new document </title>
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
  <meta name="author" content="" />
  <meta name="keywords" content="" />
  <meta name="description" content="" />
  <link rel="stylesheet" type="text/css" href="" />
  <style type="text/css"></style>
  <script type="text/javascript">
    window.onload=init;
    var n=1; //图片标记数
    var dingshi; //让图片动的定时器
    function init(){
        dingshi=window.setInterval("tupian()",1000);
    }
    //更换图片
    function tupian(){
        var obj=document.getElementById("img1");
        n++;
        if(n>=4){
            n=1;
        }
        obj.src="yaj_"+n+".jpg";
    }
    //鼠标放上图片停止
    function stoptupian(){
        window.clearInterval(dingshi);
    }
    //鼠标离开图片动起来
    function dongqilai(){
        dingshi=window.setInterval("tupian()",1000);
    }
  </script>
 </head>
 <body>
  <img  src="yaj_1.jpg" onmouseover="stoptupian()"  onmouseout="dongqilai()" id="img1" alt="js自动切换图片" > 
 </body>
</html>


Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：彻底理解Javascript 中的 PromiseArticle suivant：JavaScript强化教程——Bootstrap

Articles Liés

Voir plus