javascript图片切换

最新推荐文章于 2024-09-22 15:18:21 发布

_阿锋丶

最新推荐文章于 2024-09-22 15:18:21 发布

阅读量109

点赞数

分类专栏： javascript html css

本文链接：https://blog.csdn.net/weixin_43342105/article/details/99674513

版权

javascript 同时被 2 个专栏收录

50 篇文章 2 订阅

订阅专栏

html css

29 篇文章 18 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style type="text/css">
    /* 清楚默认样式 */
    *{
        margin:0;
        padding:0;
    }
    #outer
    {
        width:500px;
        margin:50px auto;
        padding:10px;
        background-color: yellowgreen;
        /* 设置文本居中 */
        text-align:center;
    }
    </style>

</head>
<body>
        <div  id="outer"> 
            <img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3114134016,3724999534&fm=26&gp=0.jpg" alt="图片1">

            <button id="prev"> 上一张</button>
            <button id="next"> 下一张</button>
        </div>
</body>
<script type="text/javascript">
       
            var prev=doucument.getElementById();
            var next=doucument.getElementById();
        //获取img标签
        var img=doucument.getElementById("img")[0];
        var imgArr=["https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3114134016,3724999534&fm=26&gp=0.jpg",
        "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3114134016,3724999534&fm=26&gp=0.jpg",
        "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2656628652,2746692771&fm=26&gp=0.jpg"
        
        ]

        var index=0;
        prev.onclick=function()
        {
            index--;
            if(idnex<0)
            index=3;
            img.src=imgArr[index];
        };
        
        next.onclick=function()
        {
            alert("下一张");
            // 切换图片就是修改元素的属性
            // 要修改一个元素的属性就是 元素.属性=属性值
            index++;
            if(idnex>2)
            index=0;

            img.src=imgArr[index];
        };
    </script>
</html>