javascript图片切换-白红宇的个人博客

javascript图片切换

发布日期：2021-05-07 09:31:33 浏览次数：23 分类：原创文章

本文共 1743 字，大约阅读时间需要 5 分钟。

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

上一篇：Python爬虫笔记——爬虫基础第一课

下一篇：java集合

发表评论

关于作者

喝酒易醉，品茶养心，人生如梦，品茶悟道，何以解忧？唯有杜康！

-- 愿君每日到此一游！

发表评论

最新留言

关于作者

推荐文章