ホームページ > ウェブフロントエンド > jsチュートリアル > jsで自動的に写真を切り替えます

jsで自動的に写真を切り替えます

高洛峰
リリース: 2016-10-11 16:11:39
オリジナル
983 人が閲覧しました

<!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 までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート