JS：N多张图片通过自身单击切换的代码分享
实现机制是通过非实体HTML的img元素加载图片，图片url放置于JS数组中。代码属原创，期待点赞：<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://638183.freep.cn/638183/Pic/38/d.jpg",
"https://638183.freep.cn/638183/Pic/38/c.jpg",
"https://638183.freep.cn/638183/Pic/38/j.jpg",
"https://638183.freep.cn/638183/Pic/38/k.jpg"
];
//创建非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>
一楼代码能够实现单击图片切换到新的图片的目的，且单击图片左边和右边的切换方式不同。大家可以参考尝试。 点美女赞小黑。{:4_170:} 黑黑的新教程，明天争取做一个，今天得下了{:4_187:} 每一句都有解说，这个切换已经看到实例了，很成功。黑黑辛苦了{:4_187:} 创建非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"在哪{:4_173:} 马黑黑 发表于 2022-3-7 22:08
辛苦谈不上，这是相对不复杂的实现方式
实际已经挺复杂的呢{:4_173:} 红影 发表于 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实体元素：
图片不是可以直接调用的么，为什么要经过一道非实体的过程呢？