Heim > Artikel > Web-Frontend > js自动切换图片

js自动切换图片

高洛峰Original: 2016-10-11 16:11:39906Durchsuche

<!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>

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：彻底理解Javascript 中的 PromiseNächster Artikel：JavaScript强化教程——Bootstrap

In Verbindung stehende Artikel

Mehr sehen