Javascript # 用js实现简单的点击按钮，进行图片切换的操作

最新推荐文章于 2023-10-09 20:21:36 发布

Ankry果冻

最新推荐文章于 2023-10-09 20:21:36 发布

阅读量2.6k

点赞数 1

分类专栏： javascript 文章标签： javascript html css

本文链接：https://blog.csdn.net/weixin_41306215/article/details/105438860

版权

javascript 专栏收录该内容

6 篇文章 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 type="text/css">  
        .box{  
            margin:0 auto;  
            width: 800px;  
            height: 650px;  
            background: #6274b6;  
            position: relative;  
            padding: 20px;  
            text-align: center;  
        }  
          
    </style>  
    <script>  
        window.onload=function(){  
       var prev=document.getElementById("prev");  
       var next=document.getElementById("next");  
       var img=document.getElementsByTagName("img")[0];  
          
       var imgArr=["../images/1.jpg","../images/2.jpg","../images/3.jpg","../images/4.jpg","../images/5.jpg"];  
       var index=0;  
       var info=document.getElementById("info");  
       info.innerHTML=(index+1)+" / "+imgArr.length;  
  
       prev.onclick=function(){  
           index--;  
           if(index<0){  
               index=imgArr.length -1;  
           }  
           img.src=imgArr[index];  
           info.innerHTML=(index+1)+" / "+imgArr.length;  
       } ;  
       next.onclick=function(){  
           index++;  
           if(index>imgArr.length -1){  
               index=0;  
           }  
           img.src=imgArr[index];  
           info.innerHTML=(index+1)+" / "+imgArr.length;  
       };  
        
    }  
      
    </script>  
</head>  
  
<body>  
    <div class="box">  
        <p id="info"></p>  
        <img src="../images/1.jpg" alt="yhy" width="800" height="500">  
        <button id="prev">PREV</button>  
        <button id="next">NEXT</button>  
    </div>  
</body>  
  
</html>

Ankry果冻

关注

1
点赞
踩
18

收藏

觉得还不错? 一键收藏
0
评论
Javascript # 用js实现简单的点击按钮，进行图片切换的操作

效果：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> ...
复制链接

扫一扫