小辣椒 发表于 2022-3-8 21:21

N多张图片通过自身单击切换 练习


<div id="myBox" style="margin: auto; width: 760px;text-align: center;"></div>

<script language="javascript">

var idx = 0; //图片索引
var flag = 0; //图片切换标识

//将图片url放入数组
var imgAr = [
      "https://pic.imgdb.cn/item/62271ed25baa1a80ab4629c2.jpg",
      "https://pic.imgdb.cn/item/62271ef55baa1a80ab463f5f.jpg",
      "https://pic.imgdb.cn/item/62271f0c5baa1a80ab464c8d.jpg",
      "https://pic.imgdb.cn/item/62271f235baa1a80ab4659c1.jpg",
      "https://pic.imgdb.cn/item/62271f3c5baa1a80ab466726.jpg",
      "https://pic.imgdb.cn/item/62271f545baa1a80ab46764f.jpg",
      "https://pic.imgdb.cn/item/62271f6c5baa1a80ab468437.jpg",
      "https://pic.imgdb.cn/item/62271f875baa1a80ab469386.jpg",
      "https://pic.imgdb.cn/item/62271fa15baa1a80ab46a3e1.jpg",
      "https://pic.imgdb.cn/item/62271fbf5baa1a80ab46b7c0.jpg"
];

//创建网易云播放器
var wyy = document.createElement("iframe");
wyy.style.border = "none";
wyy.style.height = "86px";
wyy.style.width = "330px";
wyy.style.position = "fixed";
wyy.style.left = "calc(100% - 340px)";
wyy.style.top = "45%";
wyy.src = "https://music.163.com/outchain/player?type=2&id=1853812727&auto=1&height=66";
document.body.appendChild(wyy);

//创建非HTML实体img
var myPic = document.createElement("img"); //创建img元素
myPic.src = imgAr; //加载第一张图片
myPic.style.maxWidth = "760px"; //限制图片最大宽度
myPic.style.cursor = "pointer"; // 鼠标指针样式
document.getElementById("myBox").appendChild(myPic); //追加图像元素
//鼠标指针在图片上移动事件：判断前后切换并显示提示
myPic.onmouseover= function(){
      var w = event.clientX - offset(myPic, "left"); //鼠标指针位置：用于判断flag标识
      flag = (w > this.width/2 ? 1 : 0); //往前还是往后切换
      this.title = (w > this.width/2 ? "前一张" : "后一张"); //提示语
}
//图片单击事件：切换图片
myPic.onclick = function(){
      idx = (flag == 1 ? idx + 1 : idx - 1); //图片索引标识步进
      if(idx >= imgAr.length) idx = 0; //往后切换时到最后一张后从头开始
      if(idx < 0) idx = imgAr.length - 1; //往前切换时到第一张后返回最后一张
      this.src = imgAr; //按预设呈现图片
}
//获取元素偏移总量
function offset(obj,direction){
      let offsetDir = "offset" + direction.toUpperCase()+direction.substring(1);
      let realNum = obj;
      let positionParent = obj.offsetParent;
      while(positionParent != null){
                realNum += positionParent;
                positionParent = positionParent.offsetParent;
      }
      return realNum;
}

</script>

小辣椒 发表于 2022-3-8 21:23

@马黑黑

黑黑我这样上面要设置top: 吗？

小辣椒 发表于 2022-3-8 21:24

进去10张图片

顾-念 发表于 2022-3-8 21:29

这图是拉钩上吊一百年不许变么，哈哈

小辣椒 发表于 2022-3-8 21:40

顾-念 发表于 2022-3-8 21:29
这图是拉钩上吊一百年不许变么，哈哈

暖男你点击图片会转换的

顾-念 发表于 2022-3-8 21:41

小辣椒 发表于 2022-3-8 21:40
暖男你点击图片会转换的

看到了，这么高级

小辣椒 发表于 2022-3-8 21:45

顾-念 发表于 2022-3-8 21:41
看到了，这么高级

是马黑黑老师的教程分享，学习做一次

加林森 发表于 2022-3-8 21:45

我好像也得去制作一个了。小辣椒制作漂亮。{:4_187:}

小辣椒 发表于 2022-3-8 21:49

加林森 发表于 2022-3-8 21:45
我好像也得去制作一个了。小辣椒制作漂亮。

队长这个安黑黑教程做，没有问题的

红影 发表于 2022-3-8 21:53

这些图图好美，亲爱的已经做出来了，真漂亮{:4_187:}

小辣椒 发表于 2022-3-8 21:59

红影 发表于 2022-3-8 21:53
这些图图好美，亲爱的已经做出来了，真漂亮

亲爱的，完全按黑黑教程做的

加林森 发表于 2022-3-8 22:07

小辣椒 发表于 2022-3-8 21:49
队长这个安黑黑教程做，没有问题的

嗯嗯，明白。

红影 发表于 2022-3-8 22:55

小辣椒 发表于 2022-3-8 21:59
亲爱的，完全按黑黑教程做的

亲爱的选的图片漂亮呢。嗯，能做成功就很赞{:4_187:}

马黑黑 发表于 2022-3-8 23:17

小辣椒 发表于 2022-3-8 21:23
@马黑黑

黑黑我这样上面要设置top: 吗？

这类帖子，除了播放器需要定位，其余都不必

樵歌 发表于 2022-3-9 08:17

小辣椒好聪慧，一学就会哈，那前三张片片是小辣椒自己吧。{:4_173:}

大猫咪 发表于 2022-3-9 12:57

辣椒制作真亮，真机灵，一学就会   赞！！！！！

{:4_204:}{:4_190:}

马黑黑 发表于 2022-3-9 16:08

{:4_187:}

加林森 发表于 2022-3-9 18:18

{:4_199:}
页: [1]
查看完整版本: N多张图片通过自身单击切换 练习