基于数组的实现网页中的页面切换效果

最新推荐文章于 2021-07-31 19:22:54 发布

Cincan

最新推荐文章于 2021-07-31 19:22:54 发布

阅读量395

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/Cincan/article/details/52841366

版权

JavaScript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
  <head>
    <title>exchangePic.html</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
    <style type="text/css">
        ul{
            list-style:none;
            position:absolute; 
            left:580px;
            top:260px;      

        }
        li{
            border:1px solid black;
            width:20px;
            background:white;
            text-align:center;
            float:left;
        }
    </style>
    <script type="text/javascript">
        var a = ["img/1.jpg","img/2.jpg","img/3.jpg"];
        var index=0;
        function exchangePic(){
            if(index < a.length-1){
            index++;
            }else{
            index = 0;
            }
            var img = document.getElementById("img");
            img.src=a[index];
        }
        //setInterval("exchangePic()",1000);
        function moveon(obj){
            index = obj.value;
            document.getElementById("img").src = a[index-1];
            obj.style.background = "gray";
            clearInterval(inter);

        }
        function moveout(obj){
            obj.style.background = "white";
            inter = setInterval("exchangePic()",3000);
        }
    </script>
  </head>

  <body>
    <img style="width:500px; height:300px;margin-left:400px" src="img/1.jpg" id="img" >
    <ul>
        <li value="1" onmouseover="moveon(this)" onmouseout="moveout(this)">1</li>
        <li value="2" onmouseover="moveon(this)" onmouseout="moveout(this)">2</li>
        <li value="3" onmouseover="moveon(this)" onmouseout="moveout(this)">3</li>

    </ul>
  </body>
</html>

Cincan

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
基于数组的实现网页中的页面切换效果

<!DOCTYPE html><html> <head> <title>exchangePic.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page">
复制链接

扫一扫