js实现旋转木马的效果

我的图片一直加载不出来,不知道哪里出了错误,下面是事件的JavaScript脚本代码:

setTimeout(function() {  

    $("div[widgetname='ABSOLUTE0']").append("<div id=\"box\"><div class=\"slide\"><ul><li><a href=\"#\"><img src=\"webroot\help\css\images\3.jpg\"></a></li><li><a href=\"#\"><img src=\"http://img.mukewang.com/52da54ed0001ecfa04120172.jpg\" alt=\"啊啊啊\"></a></li><li><a href=\"#\"><img src=\"http://img.mukewang.com/52da54ed0001ecfa04120172.jpg\" alt=\"啊啊啊\"></a></li><li><a href=\"#\"><img src=\"http://img.mukewang.com/52da54ed0001ecfa04120172.jpg\" alt=\"啊啊啊\"></a></li><li><a href=\"#\"><img src=\"http://img.mukewang.com/52da54ed0001ecfa04120172.jpg\" alt=\"啊啊啊\"></a></li></ul><div class=\"arraw\"><a href=\"javascript:;\" class=\"next\"></a><a href=\"javascript:;\" class='prev'></a></div></div></div><script>var box = document.querySelector('#box');var slide = document.querySelector('.slide');var arraw = document.querySelector('.arraw');var lis = document.querySelectorAll('li');var json = [  {   width:400,top:20,left:120,opacity:20,z:2,id:1},{  width:600,top:70,left:50,opacity:60,z:3,id:2},{   width:800,top:100,left:150,opacity:100,z:4,id:3},{ width:600,top:70,left:350,opacity:60,z:3,id:4},{   width:400,top:20,left:370,opacity:20,z:2,id:5}];var next = document.querySelector('.next');var prev = document.querySelector('.prev');var timer = null;var flag = true;move();run();function run(){clearInterval(timer);timer = setInterval(function(){if(flag == true){flag = false;move(true);}},500);}function move(x){if(x != undefined){if(x){json.push(json.shift());}else{json.unshift(json.pop());};};for(var i = 0; i<json.length; i++){animate(lis[i],{width: json[i].width,top: json[i].top,left: json[i].left,opacity: json[i].opacity,zIndex: json[i].z},function(){flag = true;})};}function animate(obj, json, callback){clearInterval(obj.timer);obj.timer = setInterval(function(){var stoped = true;for(var k in json){var leader = 0;if(k == 'opacity'){leader = Math.round(getStyle(obj, k)*100) || 100;}else {leader = parseInt(getStyle(obj, k)) || 0;};var step = (json[k]-leader)/10;step = step > 0? Math.ceil(step) : Math.floor(step);leader = leader + step;if(k == 'opacity'){obj.style[k] = leader/100;obj.style['filter'] = 'alpha(opacity='+ leader +')';}else if(k == 'zIndex'){obj.style['zIndex'] = json[k];console.log(666);}else{obj.style[k] = leader + \"px\";}if(leader != json[k]){stoped = false;}};if(stoped){clearInterval(obj.timer);callback && callback();};},50);};function getStyle(obj, attr){if(obj.currentStyle){return obj.currentStyle[attr];}else{return window.getComputedStyle(obj, null)[attr];};};</script>")  

},  

20);

运行出来的效果如下所示,图片未加载出来

24.png

FineReport yzm119442 发布于 2021-10-14 10:26
1min目标场景问卷 立即参与
回答问题
悬赏:3 F币 + 添加悬赏
提示:增加悬赏、完善问题、追问等操作,可使您的问题被置顶,并向所有关注者发送通知
共2回答
最佳回答
0
zsh331Lv8专家互助
发布于2022-4-12 17:38

图片旋转木马效果-https://bbs.fanruan.com/thread-101043-1-1.html

————————————————————

最佳回答
0
snrtuemcLv8专家互助
发布于2021-10-14 10:29

应该是浏览器缓存问题,换谷歌浏览器,或者清空下谷歌浏览器缓存就可以了

  • yzm119442 yzm119442(提问者) 就是用的谷歌浏览器
    2021-10-14 10:36 
  • snrtuemc snrtuemc 回复 yzm119442(提问者) 浏览器缓存清一下再试试,这个帮主文档我测试多次了,拷贝他代码是没有问题的
    2021-10-14 10:37 
  • yzm119442 yzm119442(提问者) 回复 snrtuemc 清理了浏览器的缓存,但是图片还是加载不出来 我确实是复制的那个源代码
    2021-10-14 11:26 
  • snrtuemc snrtuemc 回复 yzm119442(提问者) 饿,我刚还测试,可以显示出图片。。。。
    2021-10-14 11:34 
  • 3关注人数
  • 453浏览人数
  • 最后回答于:2022-4-12 17:38
    请选择关闭问题的原因
    确定 取消
    返回顶部