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

来源：互联网发布：网络课程尔雅官网编辑：程序博客网时间：2024/05/17 08:15

例：

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

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

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

0 0