|
|
请马上登录,朋友们都在花潮里等着你哦:)
您需要 登录 才可以下载或查看,没有账号?立即注册
x
实现机制是通过非实体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[idx]; //加载第一张图片
- 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[idx]; //按预设呈现图片
- }
- //获取元素偏移总量
- function offset(obj,direction){
- let offsetDir = "offset" + direction[0].toUpperCase()+direction.substring(1);
- let realNum = obj[offsetDir];
- let positionParent = obj.offsetParent;
- while(positionParent != null){
- realNum += positionParent[offsetDir];
- positionParent = positionParent.offsetParent;
- }
- return realNum;
- }
- </script>
复制代码
|
评分
-
| 参与人数 4 | 威望 +180 |
金钱 +360 |
经验 +180 |
收起
理由
|
加林森
| + 30 |
+ 60 |
+ 30 |
赞一个! |
红影
| + 50 |
+ 100 |
+ 50 |
赞一个! |
樵歌
| + 50 |
+ 100 |
+ 50 |
赞一个! |
小辣椒
| + 50 |
+ 100 |
+ 50 |
赞一个! |
查看全部评分
|