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

最新推荐文章于 2022-11-21 18:34:51 发布

microcosmv

最新推荐文章于 2022-11-21 18:34:51 发布

阅读量5.9k

点赞数

分类专栏： JavaScript 文章标签： javascript 图片轮播效果

本文链接：https://blog.csdn.net/microcosmv/article/details/51924514

版权

JavaScript 专栏收录该内容

41 篇文章 1 订阅

订阅专栏

例：

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

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