32.利用DOM来解决图片的更改

最新推荐文章于 2023-02-17 21:37:49 发布

执笔画流年~

最新推荐文章于 2023-02-17 21:37:49 发布

阅读量468

点赞数

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

本文链接：https://blog.csdn.net/qq_53630069/article/details/120314416

版权

javascript 专栏收录该内容

39 篇文章 0 订阅

订阅专栏

1.<!DOCTYPE html>
<html>

<head>
       <meta charset="utf-8" />
       <title></title>
   </head>
       <script type="text/javascript">
               window.onload = function(){
                   var prev = document.getElementById("prev");
                   var next = document.getElementById("next");
                   var img = document.getElementsByTagName("img")[0];
                   prev.onclick = function(){
                       alert("上一张");
                       img.src = "img/QD%7DKHV1_43XSSHG$%7DFY%60%5D)1.png";
                   }
                   next.onclick = function(){
                       alert("下一张");
                       img.src = "img/BA3783F81F075BA20201777CB0CC7ABE.jpg";
                   }
               }
       </script>
   <body>
       <img src="O4JD%7B85EEITJIEUL2V%25Q$7G.png" width="200px"margin="50px" height="300px"text-align="center">
       <div id="outer">
           <button type="button"id="prev">上一张</button>
           <button type="button"id="next">下一张</button>
       </div>
   </body>
</html>

通过按上一张或者下一张来更改显示的图片

2.进阶

上图方法中，由于是耦合的，因此不方便操控，比如图片数被卡死了，那假如有10张图片呢？

因此，可以更改图片数、

修改之后的代码如下

引入了CSS

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title>

       </title>

       <style type="text/css">
           #picture{
           width:200px;
               margin:50px;
               height:300px;
           }


       </style>
   </head>
       <script type="text/javascript">
               window.onload = function(){
                   var prev = document.getElementById("prev");
                   var next = document.getElementById("next");
                   var imgall = document.getElementsByTagName("img");
                   var img = imgall[0];

                   var add = ["img/BA3783F81F075BA20201777CB0CC7ABE.jpg",
                   "img/C8F4AB0BE407EAF41A8374794BE98498.jpg","img/C16D31BB4E1AE9A9E82EB82235E9711F.jpg"];
                   var index = 0;
                   prev.onclick = function(){

                       index--;
                       if(index >= 0){

                       alert("马上进入"+"第"+(index+1)+"张");
                       img.src = add[index];
                   }else{
                       alert("现在已经是第一张了哦");
                       index++;
                   }
                   }
                   next.onclick = function(){
                       index++;
                       if(index < add.length){
                           alert("马上进入"+"第"+(index+1)+"张");
                           img.src = add[index];
                       }else{
                           alert("现在已经是最后一张了哦");
                           index--;
                       }

                   }
               }
       </script>
   <body>
       <div id="aa" align="center"><img src="img/BA3783F81F075BA20201777CB0CC7ABE.jpg" id="picture"></div>
       <div id="outer"align="center">
           <button type="button"id="prev">上一张</button>
           <button type="button"id="next">下一张</button>
       </div>
   </body>
</html>

降低耦合度

执笔画流年~

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
32.利用DOM来解决图片的更改

1.<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> </head> <script type="text/javascript"> window.onload = function(){ ...
复制链接

扫一扫