极简的多图+说明发布程序

马黑黑

第一张

马黑黑

核心代码：

1. <style>
   
2.         .outer { text-align: center; }
   
3.         .mama { margin: auto; display: inline-block; padding: 20px; vertical-align: middle; position: relative; }
   
4.         .sPic { outline: none; }
   
5.         .picTip { position: absolute; top: 30px; left: 30px; color: white; font: normal 1.5em / 2em sans-serif; text-shadow: 1px 1px 2px gray; mix-blend-mode: difference; }
   
6. </style>
   
7. 
   
8. <div class="outer">
   
9.         <div class="mama">
   
10.                 <img class="sPic" src="https://638183.freep.cn/638183/t22/h8.jpg" alt="" />
    
11.                 <div class="picTip">第一张</div>
    
12.         </div>
    
13. </div>
    
14. <script>
    
15. let mama = document.querySelector(".mama");
    
16. let sPic = document.querySelector(".sPic");
    
17. let picTip = document.querySelector(".picTip");
    
18. let isGo = true;
    
19. let cuImg = 0;
    
20. let picAr = [
    
21.         ["https://638183.freep.cn/638183/t22/h8.jpg","第一张"],
    
22.         ["https://638183.freep.cn/638183/t22/h7.jpg","第二张"],
    
23.         ["https://638183.freep.cn/638183/t22/h6.jpg","第三张"],
    
24.         ["https://638183.freep.cn/638183/t22/h5.jpg","第四张"],
    
25.         ["https://638183.freep.cn/638183/t22/h4.jpg","第五张"],
    
26.         ["https://638183.freep.cn/638183/t22/h3.jpg","第六张"],
    
27.         ["https://638183.freep.cn/638183/t22/h2.jpg","第七张"],
    
28.         ["https://638183.freep.cn/638183/t22/h1.jpg","第八张"],
    
29.         ["https://638183.freep.cn/638183/t22/hometown.jpg","第九张"]
    
30. ];
    
31. 
    
32. 
    
33. mama.onmousemove = function(e) {
    
34.         e = e || event;
    
35.         let x = e.clientX - this.offsetLeft;
    
36.         let y = this.clientWidth;
    
37.         this.style.cursor =  `url('https://638183.freep.cn/638183/qd/${x > y/2 ? "next.cur" : "pre.cur"}'), auto`;
    
38.         isGo = x > y/2? true : false;
    
39. }
    
40. 
    
41. mama.onclick = function(){
    
42.         cuImg += isGo ? 1 : -1;
    
43.         if (cuImg >= picAr.length) cuImg = 0;
    
44.         if (cuImg < 0) cuImg = picAr.length - 1;
    
45.         sPic.src = picAr[cuImg][0];
    
46.         picTip.innerHTML = picAr[cuImg][1];
    
47. }
    
48. 
    
49. </script>
    

复制代码

马黑黑

发布多图片时只需两步：
一、修个 HTML代码（红色部分）：

<div class="outer">
        <div class="mama">
                <img class="sPic" src="https://638183.freep.cn/638183/t22/h8.jpg" alt="" />
                <div class="picTip">第一张</div>
        </div>
</div>

二、修改JS的图片数组代码（图片资源极其说明文本）：

let picAr = [
        ["https://638183.freep.cn/638183/t22/h8.jpg","第一张"],
        ["https://638183.freep.cn/638183/t22/h7.jpg","第二张"],
        ["https://638183.freep.cn/638183/t22/h6.jpg","第三张"],
        ["https://638183.freep.cn/638183/t22/h5.jpg","第四张"],
        ["https://638183.freep.cn/638183/t22/h4.jpg","第五张"],
        ["https://638183.freep.cn/638183/t22/h3.jpg","第六张"],
        ["https://638183.freep.cn/638183/t22/h2.jpg","第七张"],
        ["https://638183.freep.cn/638183/t22/h1.jpg","第八张"],
        ["https://638183.freep.cn/638183/t22/hometown.jpg","第九张"]
];


注意JS数组结构的特点：① 所有符号，[ " , ;  等等，都是小角符号，不能用中文 状态下的符号；② 最后一张图片资源末尾不能有逗号，前面的都必须有逗号。

加林森

最后一张图片变大了妮？

东篱闲人

简洁。。

马黑黑

CSS代码中的 .outer 选择器以及其对应的HTML代码中的 div，即下面红紫色部分，

<div class="outer">
    <!-- 其他核心代码 -->
</div>

其作用为令图片以及图片所依托的div父元素居中。做帖子时，可以加工一下这个 outer，令其成为帖子的主元素。

马黑黑

加林森 发表于 2022-4-29 17:47
最后一张图片变大了妮？

主要是想演示一下它能装载任何尺寸的图片。程序对图片不做任何限制，均以原始尺寸显示。做帖时自己留意图片的尺寸。

马黑黑

东篱闲人 发表于 2022-4-29 17:48
简洁。。

嗯，并且很高效

加林森

马黑黑 发表于 2022-4-29 17:50
主要是想演示一下它能装载任何尺寸的图片。程序对图片不做任何限制，均以原始尺寸显示。做帖时自己留意图 ...

哦，知道了。真的很漂亮的制作。

马黑黑

加林森 发表于 2022-4-29 17:53
哦，知道了。真的很漂亮的制作。

你可以看一下六楼，从中你会有好的灵感和思路

马黑黑

不知道金黄色的向左、向右箭头能出来没

加林森

马黑黑 发表于 2022-4-29 17:55
你可以看一下六楼，从中你会有好的灵感和思路

看见了，真好。

加林森

马黑黑 发表于 2022-4-29 17:56
不知道金黄色的向左、向右箭头能出来没

有右键头的。

红影

还有左右箭头，这个翻页的真简便

红影

黑黑找了很多美女图图呢，真养眼

红影

只要超过一半的距离，左右箭头就会互换，真好

来看你

太赞了

马黑黑

来看你 发表于 2022-4-29 22:19
太赞了

谢谢来看你来看我

马黑黑

红影 发表于 2022-4-29 19:48
只要超过一半的距离，左右箭头就会互换，真好

这个箭头也不错的吧？记得说我N年前在网上转换成 .cur 的，当时用于整站系统的图片展区，现在在白俄罗斯的网站还用着

马黑黑

加林森 发表于 2022-4-29 18:03
有右键头的。

左右都有