欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

js自动切换图片

程序员文章站 2024-01-13 17:13:52
...
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"> 
 body>
html>

相关标签: js自动切换图片