首頁 > web前端 > js教程 > 主體

js自動切換圖片

高洛峰
發布: 2016-10-11 16:11:39
原創
914 人瀏覽過

<!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>
登入後複製


相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!