demo：原生js实现图片切换功能

最新推荐文章于 2024-07-26 20:46:33 发布

一只百香果

最新推荐文章于 2024-07-26 20:46:33 发布

阅读量223

点赞数

分类专栏：前端文章标签： javascript css css3 html5

本文链接：https://blog.csdn.net/weixin_44260196/article/details/108332810

版权

前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

效果：
在这里插入图片描述

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }

        #outer{
            width: 300px;
            margin: 0 auto;
            margin-top: 50px;
            text-align: center;
        }

        #outer img{
            width: 300px;
        }
    </style>

    <script>
        window.onload=function(){
            var prev=document.getElementById("prev");
            var next=document.getElementById("next");
            var imgs=document.getElementsByTagName("img");
            var img=imgs[0];
            var imgArr=["img/01img1.png","img/01img2.png","img/01img3.png"];
            var index=0;
            var info=document.getElementById("info");
            
            prev.onclick=function(){
                index--;
                if(index<0){
                    index=imgArr.length-1;
                }
                img.src=imgArr[index];
                info.innerHTML="这是第"+(index+1)+"张图片";
            }
            next.onclick=function(){
                index++;
                if(index>=imgArr.length){
                    index=0;
                }
                img.src=imgArr[index];
                info.innerHTML="这是第"+(index+1)+"张图片";
                
            }
       
                 
        }
    </script>
</head>
<body>
    <div id="outer">
        <p id="info">这是第1张图片</p>
        <img src="img/01img1.png" alt="花">
        <button id="prev">
            上一张
        </button>
        <button id="next">
            下一张
        </button>
    </div>
</body>
</html>

一只百香果

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
demo：原生js实现图片切换功能

效果：代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{
复制链接

扫一扫

专栏目录