JS：N多张图片通过自身单击切换的代码分享

马黑黑

实现机制是通过非实体HTML的img元素加载图片，图片url放置于JS数组中。代码属原创，期待点赞：

1. <div id="myBox" style="margin: auto; width: 760px;text-align: center;"></div>
   
2. 
   
3. <script language="javascript">
   
4. 
   
5. var idx = 0; //图片索引
   
6. var flag = 0; //图片切换标识
   
7. //将图片url放入数组
   
8. var imgAr = [
   
9.         "https://638183.freep.cn/638183/Pic/38/d.jpg",
   
10.         "https://638183.freep.cn/638183/Pic/38/c.jpg",
    
11.         "https://638183.freep.cn/638183/Pic/38/j.jpg",
    
12.         "https://638183.freep.cn/638183/Pic/38/k.jpg"
    
13. ];
    
14. //创建非HTML实体img
    
15. var myPic = document.createElement("img"); //创建img元素
    
16. myPic.src = imgAr[idx]; //加载第一张图片
    
17. myPic.style.maxWidth = "760px"; //限制图片最大宽度
    
18. myPic.style.cursor = "pointer"; // 鼠标指针样式
    
19. document.getElementById("myBox").appendChild(myPic); //追加图像元素
    
20. //鼠标指针在图片上移动事件：判断前后切换并显示提示
    
21. myPic.onmouseover= function(){
    
22.         var w = event.clientX - offset(myPic, "left"); //鼠标指针位置：用于判断flag标识
    
23.         flag = (w > this.width/2 ? 1 : 0); //往前还是往后切换
    
24.         this.title = (w > this.width/2 ? "前一张" : "后一张"); //提示语
    
25. }
    
26. //图片单击事件：切换图片
    
27. myPic.onclick = function(){
    
28.         idx = (flag == 1 ? idx + 1 : idx - 1); //图片索引标识步进
    
29.         if(idx >= imgAr.length) idx = 0; //往后切换时到最后一张后从头开始
    
30.         if(idx < 0) idx = imgAr.length - 1; //往前切换时到第一张后返回最后一张
    
31.         this.src = imgAr[idx]; //按预设呈现图片
    
32. }
    
33. //获取元素偏移总量
    
34. function offset(obj,direction){
    
35.         let offsetDir = "offset" + direction[0].toUpperCase()+direction.substring(1);
    
36.         let realNum = obj[offsetDir];
    
37.         let positionParent = obj.offsetParent;
    
38.         while(positionParent != null){
    
39.                 realNum += positionParent[offsetDir];
    
40.                 positionParent = positionParent.offsetParent;
    
41.         }
    
42.         return realNum;
    
43. }
    
44. 
    
45. </script>

复制代码

马黑黑

一楼代码能够实现单击图片切换到新的图片的目的，且单击图片左边和右边的切换方式不同。大家可以参考尝试。

樵歌

点美女赞小黑。

小辣椒

黑黑的新教程，明天争取做一个，今天得下了

红影

每一句都有解说，这个切换已经看到实例了，很成功。黑黑辛苦了

红影

创建非HTML实体img，这句没看懂。

马黑黑

樵歌 发表于 2022-3-7 21:12
点美女赞小黑。

反过来说差不多

马黑黑

红影 发表于 2022-3-7 22:05
创建非HTML实体img，这句没看懂。

就是，img元素不是实体元素，是JS虚拟创建的

马黑黑

红影 发表于 2022-3-7 21:53
每一句都有解说，这个切换已经看到实例了，很成功。黑黑辛苦了

辛苦谈不上，这是相对不复杂的实现方式

马黑黑

小辣椒 发表于 2022-3-7 21:13
黑黑的新教程，明天争取做一个，今天得下了

晚安。88

红影

马黑黑 发表于 2022-3-7 22:07
就是，img元素不是实体元素，是JS虚拟创建的

顺着一路赋值，找半天才找到了"myBox"在哪

红影

马黑黑 发表于 2022-3-7 22:08
辛苦谈不上，这是相对不复杂的实现方式

实际已经挺复杂的呢

马黑黑

红影 发表于 2022-3-7 22:41
顺着一路赋值，找半天才找到了"myBox"在哪

ID为 myBox 的div是例中唯一的HTML实体元素，它的作用是父元素，虚拟创建的JS img元素依托于它，这是做帖子的需要，也是布局的需要

马黑黑

红影 发表于 2022-3-7 22:42
实际已经挺复杂的呢

这是因为刚刚一边脚踏入门槛的关系

红影

马黑黑 发表于 2022-3-7 22:43
ID为 myBox 的div是例中唯一的HTML实体元素，它的作用是父元素，虚拟创建的JS img元素依托于它，这是做帖 ...

我还没完全理解这个虚拟原始和实体元素，不明白这样做的用处。

红影

马黑黑 发表于 2022-3-7 22:46
这是因为刚刚一边脚踏入门槛的关系

是的，还没习惯。

马黑黑

红影 发表于 2022-3-8 15:22
是的，还没习惯。

也还不熟悉

马黑黑

红影 发表于 2022-3-8 15:22
我还没完全理解这个虚拟原始和实体元素，不明白这样做的用处。

HTML实体元素：

<img src="url" alt="" title="" />

没有这个时，JS创建的img对象，就是非实体的HTML元素

红影

马黑黑 发表于 2022-3-8 17:46
也还不熟悉

嗯嗯，非常的不熟悉。

红影

马黑黑 发表于 2022-3-8 17:48
HTML实体元素：

图片不是可以直接调用的么，为什么要经过一道非实体的过程呢？