JavaScript实现图片轮播和鼠标悬停显示

例：

提前放好了四张图片，并编号。

<!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> loaction </title>
  <meta charset="utf-8" />
  <meta name="generator" content="editplus" />
  <meta name="author" content="" />
  <meta name="keywords" content="" />
  <meta name="description" content="" />
  <style type="text/css">
    .one{
        color:red;
        border:1px solid blue;
        cursor:hand;
    }
    label{
        margin-left:80px;
    }
  </style>
 </head>
<script type="text/javascript">
<!--
var n = 0;
var x = 0;
    function func(){

        var i = document.getElementById("i");
//此句不通用，只要能获取当前的图片编号即可。
        n = i.src.charAt(54)*1;
        n++;
        if(n==5){
            n=1;
        }
        i.src = "images/"+n+".jpg";
        setTimeout("func()",2000);
    }
    function func1(x){  
        var i = document.getElementById("i");
        i.src = "images/"+x+".jpg";
    }
//-->
</script>
 <body onload = "func()" >
    <center>
    <img src="images/1.jpg" width="1000" height="600" alt="" id = "i" />

    <div>
    <h1>
        <label onmouseover = "func1(1)">1</label>
        <label onmouseover = "func1(2)">2</label>
        <label onmouseover = "func1(3)">3</label>
        <label onmouseover = "func1(4)">4</label>
    </h1>
    </div>
    </center>
 </body>
</html>

以上内容作为个人学习记录，仅供参考。

版权声明：本文为microcosmv原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。