JavaScript--数组实现照片轮换

最新推荐文章于 2023-07-24 11:37:34 发布

海向

最新推荐文章于 2023-07-24 11:37:34 发布

阅读量331

点赞数 1

分类专栏： JavaEE是怎样炼成的

本文链接：https://blog.csdn.net/baidu_37181928/article/details/78714032

版权

JavaEE是怎样炼成的专栏收录该内容

25 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        body{
            background: #96D5E8;
        }
        #box{
            width: 900px;
            height:420px;
            margin:10px auto;
            position: relative;
            border:4px solid #BCC9EF;
        }
        #box img{
            width: 100%;
            height: 100%;
            border-radius: 20px;
        }
        #box a{
            width: 50px;
            height: 50px;
            border:1px solid #1488F6;
            text-decoration: none;
            text-align: center;
            font:20px/50px "simhei";
            border-radius: 4px;
            position: absolute;
            top: 50%;
            margin-top: -25px;

        }
        #left1{
            left: -100px;
        }
        #right1{
            right:-100px;
        }
    </style>
</head>
<body>
    <div id="box">
        <img src="img/1.jpg" alt="" id="img1">
        <a href="#" id= "left1"><</a>
        <a href="#" id = "right1">></a>
    </div>
</body>
</html>
<script type="text/javascript">
    var oImg = document.getElementById("img1");
    var oRight = document.getElementById("right1");
    var oLeft = document.getElementById("left1");
    var arr = ['img/1.jpg','img/2.jpg','img/3.jpg','img/4.png'];//注意这里是中括号不是大括号
    //以前用的是字符串拼接，但是出现了png并不全是jpg，所以用数组。

    var num = 0;
    oRight.onclick = function(){
        if(num == arr.length)
            num = 0;
        oImg.src =arr[num];
        num++;
    }
    oLeft.onclick = function(){
        if(num < 0)
            num = arr.length;
        oImg.src = arr[num];
        num--;
    }


</script>

显示结果

每次点击一次更换一次
这里写图片描述

海向

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JavaScript--数组实现照片轮换

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> body{ background: #96D5E8; } #box{
复制链接

扫一扫

专栏目录