马黑黑 发表于 2022-4-29 17:35

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

本帖最后由 马黑黑 于 2022-4-29 17:38 编辑 <br /><br /><style>
        .outer { text-align: center; }
        .mama { margin: auto; display: inline-block; padding: 20px; vertical-align: middle; position: relative; }
        .sPic { outline: none; }
        .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; }
</style>

<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>
<script>
let mama = document.querySelector(".mama");
let sPic = document.querySelector(".sPic");
let picTip = document.querySelector(".picTip");
let isGo = true;
let cuImg = 0;
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","第九张"]
];


mama.onmousemove = function(e) {
        e = e || event;
        let x = e.clientX - this.offsetLeft;
        let y = this.clientWidth;
        this.style.cursor =`url('https://638183.freep.cn/638183/qd/${x > y/2 ? "next.cur" : "pre.cur"}'), auto`;
        isGo = x > y/2? true : false;
}

mama.onclick = function(){
        cuImg += isGo ? 1 : -1;
        if (cuImg >= picAr.length) cuImg = 0;
        if (cuImg < 0) cuImg = picAr.length - 1;
        sPic.src = picAr;
        picTip.innerHTML = picAr;
}

</script>

马黑黑 发表于 2022-4-29 17:39

核心代码：
<style>
        .outer { text-align: center; }
        .mama { margin: auto; display: inline-block; padding: 20px; vertical-align: middle; position: relative; }
        .sPic { outline: none; }
        .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; }
</style>

<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>
<script>
let mama = document.querySelector(".mama");
let sPic = document.querySelector(".sPic");
let picTip = document.querySelector(".picTip");
let isGo = true;
let cuImg = 0;
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","第九张"]
];


mama.onmousemove = function(e) {
        e = e || event;
        let x = e.clientX - this.offsetLeft;
        let y = this.clientWidth;
        this.style.cursor =`url('https://638183.freep.cn/638183/qd/${x > y/2 ? "next.cur" : "pre.cur"}'), auto`;
        isGo = x > y/2? true : false;
}

mama.onclick = function(){
        cuImg += isGo ? 1 : -1;
        if (cuImg >= picAr.length) cuImg = 0;
        if (cuImg < 0) cuImg = picAr.length - 1;
        sPic.src = picAr;
        picTip.innerHTML = picAr;
}

</script>


马黑黑 发表于 2022-4-29 17:45

发布多图片时只需两步：
一、修个 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数组结构的特点：① 所有符号，[ " , ;等等，都是小角符号，不能用中文 状态下的符号；② 最后一张图片资源末尾不能有逗号，前面的都必须有逗号。


加林森 发表于 2022-4-29 17:47

最后一张图片变大了妮？

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

简洁。。{:5_116:}

马黑黑 发表于 2022-4-29 17:49

本帖最后由 马黑黑 于 2022-4-29 17:52 编辑

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

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

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

马黑黑 发表于 2022-4-29 17:50

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

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

马黑黑 发表于 2022-4-29 17:51

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

嗯，并且很高效

加林森 发表于 2022-4-29 17:53

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

哦，知道了。真的很漂亮的制作。{:4_199:}

马黑黑 发表于 2022-4-29 17:55

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

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

马黑黑 发表于 2022-4-29 17:56

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

加林森 发表于 2022-4-29 18:01

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

看见了，真好。

加林森 发表于 2022-4-29 18:03

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

有右键头的。

红影 发表于 2022-4-29 19:46

还有左右箭头，这个翻页的真简便{:4_187:}

红影 发表于 2022-4-29 19:47

黑黑找了很多美女图图呢，真养眼{:4_173:}

红影 发表于 2022-4-29 19:48

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

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

太赞了 {:4_199:}

马黑黑 发表于 2022-4-29 22:31

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

谢谢来看你来看我

马黑黑 发表于 2022-4-29 22:46

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

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

马黑黑 发表于 2022-4-29 22:47

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

左右都有
页: [1] 2 3 4
查看完整版本: 极简的多图+说明发布程序