加林森 发表于 2022-3-9 19:32

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

本帖最后由 加林森 于 2022-3-9 19:41 编辑 <br /><br /><div id="myBox" style="margin: auto; width: 760px;text-align: center;"></div>

<script language="javascript">

var idx = 0; //图片索引
var flag = 0; //图片切换标识
//将图片url放入数组
var imgAr = [
      "http://i.ce.cn/ce/xwzx/gnsz/gdxw/202108/10/W020210810216532697230.jpg",
      "http://www.zhongfox.com/ueditor/php/upload/image/20160525/1464138305646517.jpg",
      "https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2022%2F0218%2Fab30223cj00r7gql6000dc000cw007cm.jpg&thumbnail=650x2147483647&quality=80&type=jpg",
      "https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2FFE6zREq%3DlvpbprbnY1VpXed1Oh8QJ4Wqb75qS4R8xMNjV1561014991501compressflag.jpg&thumbnail=650x2147483647&quality=80&type=jpg",
      "http://www.tibet3.com/d/file/news/tbgzh/2019-07-29/1564368461771308.jpg ",
      "http://www.scio.gov.cn/ztk/xwfb/34/9/Document/914568/Image/W020110518363310095449.jpg",
      "http://img5.iqilu.com/c/u/2019/0124/1548340524237.jpg",
      "http://www.people.com.cn/mediafile/pic/20150824/97/6028350344713501337.jpg",
      "http://imgcache.cjmx.com/music/201610/20161029093916620.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>



<style>
/* 父盒子 */
#wyyBox {
      margin: 10px auto;
      width:300px;
      height: 52px;
      text-align: center;
}
/* 播放器 */
#wyyBox iframe {
      width: 298px;
      height: 52px;
      border: none;
      /*切割 clip-path: circle(16px at 271px); */
}
</style>

<div id="wyyBox"></div>

<script>
var wyyBox = document.getElementById("wyyBox"); //父 div 盒子标识
var frm = document.createElement("iframe"); //创建 iframe 元素
//iframe 加载 src
frm.src = "https://music.163.com/outchain/player?type=2&id=532780635&auto=1&height=32";
wyyBox.appendChild(frm); //父盒子加载 iframe 元素
</script>

红影 发表于 2022-3-9 20:16

队长也把图片切换做出来了，真棒{:4_187:}

加林森 发表于 2022-3-9 20:24

红影 发表于 2022-3-9 20:16
队长也把图片切换做出来了，真棒

红影晚上好!{:4_187:}
我这个制作与他们不一样的。

红影 发表于 2022-3-9 21:46

加林森 发表于 2022-3-9 20:24
红影晚上好!
我这个制作与他们不一样的。

哦哦，什么地方不同啊。

大猫咪 发表于 2022-3-9 21:53

哈哈好玩    队长学习得真快   赞！ 歌也好听！

{:4_204:}{:4_199:}

加林森 发表于 2022-3-9 22:02

红影 发表于 2022-3-9 21:46
哦哦，什么地方不同啊。

他们的播放器可以上下移动的，我这个不行的。

加林森 发表于 2022-3-9 22:03

大猫咪 发表于 2022-3-9 21:53
哈哈好玩    队长学习得真快   赞！ 歌也好听！

是啊，藏歌就是好听。{:4_189:}

红影 发表于 2022-3-9 22:07

加林森 发表于 2022-3-9 22:02
他们的播放器可以上下移动的，我这个不行的。

哦哦，是播放器位置。黑黑那个涌了固定位置，翻页不动的。

加林森 发表于 2022-3-9 22:25

红影 发表于 2022-3-9 22:07
哦哦，是播放器位置。黑黑那个涌了固定位置，翻页不动的。

就是，与我不一样的。

小辣椒 发表于 2022-3-9 23:10

队长好棒，现在什么都会了{:4_187:}

加林森 发表于 2022-3-9 23:50

小辣椒 发表于 2022-3-9 23:10
队长好棒，现在什么都会了

谢谢小辣椒支持！{:4_187:}

红影 发表于 2022-3-10 12:01

加林森 发表于 2022-3-9 22:25
就是，与我不一样的。

是的，队长会修改了，真棒{:4_187:}

加林森 发表于 2022-3-10 12:06

红影 发表于 2022-3-10 12:01
是的，队长会修改了，真棒

红影中午好！{:4_187:}我才发了一首彝语民谣出来，你看看，挺好听的。
页: [1]
查看完整版本: N多张图片通过自身单击切换 练习！