女人如花花似梦
本帖最后由 马黑黑 于 2022-3-7 19:11 编辑 <br /><br /><div id="sanba" style="margin: auto; width: 760px; text-align: center;"></div><script language="javascript">
var idx = 0; //图片索引
var flag = 0; //图片切换标识
var imgUrl = "https://638183.freep.cn/638183/Pic/38/"; //图片地址主干
//将图片名前缀放入数组
var imgAr = new Array;
var nameAr = ["a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","s","y","z"];
//创建网易云播放器
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=1894988132&auto=1&height=66";
document.body.appendChild(wyy);
//创建非HTML实体img
var myPic = document.createElement("img");
myPic.src = imgUrl + nameAr + ".jpg";
myPic.style.maxWidth = "760px";
myPic.style.cursor = "pointer";
document.getElementById("sanba").appendChild(myPic);
//鼠标指针在图片上移动事件：判断前后切换并显示提示
myPic.onmousemove= function(){
var w = event.clientX - offset(myPic, "left");
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 >= nameAr.length) idx = 0;
if(idx < 0) idx = nameAr.length - 1;
this.src = imgUrl + nameAr + ".jpg";
}
//获取元素偏移总量
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_199:} 祝花潮论坛所有的女神38节快乐！{:4_187:} 图片大小尺寸可以不考虑，仅限制了最大宽度：宽度大于760px的，按760px显示，高度自动调节，图片高宽比例不会失调。 马黑黑 发表于 2022-3-7 19:15
图片大小尺寸可以不考虑，仅限制了最大宽度：宽度大于760px的，按760px显示，高度自动调节，图片高宽比例不 ...
好厉害啊，一点出来一个大美女，老黑你牛。{:4_172:} 加林森 发表于 2022-3-7 19:20
好厉害啊，一点出来一个大美女，老黑你牛。
帖子在论坛还是有点水土不服，刚刚调整好。点击图片左边和右边，切换的方式不一样。 @樵歌 @大猫咪 @东篱闲人 ，又有好玩的了。{:4_189:} 马黑黑 发表于 2022-3-7 19:21
帖子在论坛还是有点水土不服，刚刚调整好。点击图片左边和右边，切换的方式不一样。
哈哈，看见了，我在帮喊人来玩。{:4_172:} 加林森 发表于 2022-3-7 19:23
哈哈，看见了，我在帮喊人来玩。
有意思{:5_106:} 厉害厉害，24张大美女图片。看看把他们谁迷魂了吧。{:4_172:} 加林森 发表于 2022-3-7 18:48
好漂亮的制作。老黑用上了画布，厉害厉害。
这个不是画布，是非实体的img标签，追加的 加林森 发表于 2022-3-7 19:25
厉害厉害，24张大美女图片。看看把他们谁迷魂了吧。
应该是25张吧 马黑黑 发表于 2022-3-7 19:25
有意思
好玩好玩 马黑黑 发表于 2022-3-7 19:25
这个不是画布，是非实体的img标签，追加的
就是你那个双层的改变吗？ 马黑黑 发表于 2022-3-7 19:26
应该是25张吧
我数迷糊了。{:4_172:} 简洁漂亮的帖子，真棒！ 队长音乐好像不对 {:4_187:}晚上好！
{:4_187:}{:4_190:} 大猫咪 发表于 2022-3-7 19:30
简洁漂亮的帖子，真棒！ 队长音乐好像不对 晚上好！
猫猫点击图片，有好玩的。{:4_189:} 加林森 发表于 2022-3-7 19:40
猫猫点击图片，有好玩的。
哈哈 还能这样玩啊 {:4_170:} 大猫咪 发表于 2022-3-7 19:47
哈哈 还能这样玩啊
就是就是，老黑太厉害了。{:4_189:} 加林森 发表于 2022-3-7 19:50
就是就是，老黑太厉害了。
哈哈老黑厉害 好玩 {:4_170:}