jq实现图片或视频切换上一张、下一张

最新推荐文章于 2022-06-20 21:03:47 发布

码农_视限<-------长不胖

最新推荐文章于 2022-06-20 21:03:47 发布

阅读量650

点赞数

文章标签：前端 javascript jquery

本文链接：https://blog.csdn.net/weixin_47278755/article/details/121379018

版权

可参考修改、图片请自己添加再看效果，注意引入jq。

代码如下：

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
       <script src="jquery-3.4.1.min.js"></script>
   </head>
   <body>

               var listdata = [];
               $("div img").each(function(i) {
                   var allsrc = $(this).attr("src")
                   listdata.push(allsrc);
               });
               //console.log(listdata)
               var size = listdata.length;
               console.log(size);

               $('.upClick').click(function() {
                   var i = $('.num').text();
                   i--;
                   $('.num').text(i);
                   if (i < 0) {
                       //console.log("没有上一个啦！");
                       $('.num').text(0);
                       alert("没有上一个啦！");
                   }
                   $('.newimg').attr('src', listdata[i])
               });
               $('.downClick').click(function() {
                   var i = $('.num').text();
                   i++;
                   $('.num').text(i);
                   if (i > size - 1) {
                       $('.num').text(size - 1);
                       //console.log("到底啦！");
                       alert("到底啦！");
                   }
                   $('.newimg').attr('src', listdata[i])
               });

               $('.newimg').attr('src', listdata[0])
           });
       </script>
       <style>
           img {
               width: 200px;
               height: 100px;
           }
       </style>
   </body>
</html>

码农_视限<-------长不胖

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
jq实现图片或视频切换上一张、下一张

可参考修改、图片请自己添加在看效果，注意引入jq。代码如下：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script src="jquery-3.4.1.min.js"></script> </head> <bo...
复制链接

扫一扫