分享更有价值
被信任是一种快乐

这么用原生js自动轮播展示产品图片

文章页正文上

今天小编给大家分享一下这么用原生js自动轮播展示产品图片的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。代码如下:原生js自动轮播展示产品图片原生js,自动轮播,展示,产品图片” />原生js自动轮播展示产品图片” />

  • { var oPic=document.getElementById(‘user_pic’); var oPrev=getByClass(oPic,’prev’)[0]; var oNext=getByClass(oPic,’next’)[0]; var aLi=oPic.getElementsByTagName(‘li’); var arr=[]; for(var i=0;i { var oImg=aLi[i].getElementsByTagName(‘img’)[0]; arr.push([parseInt(getStyle(aLi[i],’left’)),parseInt(getStyle(aLi[i],’top’)), getStyle(aLi[i],’zIndex’),oImg.width,parseFloat(getStyle(aLi[i],’opacity’)*100)]); } oPrev.onclick=function moveTP() { arr.push(arr[0]); arr.shift(); for(var i=0;i { var oImg=aLi[i].getElementsByTagName(‘img’)[0]; aLi[i].style.zIndex=arr[i][2]; startMove(aLi[i],{left:arr[i][0],top:arr[i][1],opacity:arr[i][4]}); startMove(oImg,{width:arr[i][3]}); } } oNext.onclick=function moveTN() { arr.unshift(arr[arr.length-1]); arr.pop(); for(var i=0;i { var oImg=aLi[i].getElementsByTagName(‘img’)[0]; aLi[i].style.zIndex=arr[i][2]; startMove(aLi[i],{left:arr[i][0],top:arr[i][1],opacity:arr[i][4]}); startMove(oImg,{width:arr[i][3]}); } } var moveTime = setInterval (function(){ oNext.click(); },1000); $(‘#user_pic’).hover(function(){ ;; clearInterval(moveTime); },function(){ moveTime=setInterval(function(){ oNext.click(); },1000); }); function getStyle(obj,name) { if(obj.currentStyle){ return obj.currentStyle[name]; } else{ return getComputedStyle(obj,false)[name]; } } } function getByClass(oParent,sClass) { var aResult=[]; var aEle=oParent.getElementsByTagName(‘*’); for(var i=0;i { if(aEle[i].className==sClass) { aResult.push(aEle[i]); } } return aResult; }function getStyle(obj,name) { if(obj.currentStyle) { return obj.currentStyle[name]; } else { return getComputedStyle(obj,false)[name]; } }function startMove(obj,json,fnEnd) { clearInterval(obj.timer); obj.timer=setInterval(function() { var bStop=true; for(var attr in json) { var cur=0; if(attr==’opacity’) { cur=Math.round(parseFloat(getStyle(obj,attr))*100); } else { cur=parseInt(getStyle(obj,attr)); } var speed=(json[attr]-cur)/6; speed=speed>0?Math.ceil(speed):Math.floor(speed); if(cur!=json[attr]) bStop=false; if(attr==’opacity’) { obj.style.filter=’alpha(opacity:’+(cur+speed)+’)’; obj.style.opacity=(cur+speed)/100; } else { obj.style[attr]=cur+speed+’px’; } } if(bStop) { clearInterval(obj.timer); if(fnEnd) fnEnd(); } },30) } arcSlip();以上就是免费云主机、域名“这么用原生js自动轮播展示产品图片”这篇文章的所有内容,感谢各位的阅读!相信大家阅读完这篇文章都有很大的收获,小编每天都会为大家更新不同的知识,如果还想学习更多的知识,请关注云技术行业资讯频道。

    相关推荐: jquery中attr()怎么使用

    这篇文章主要介绍“jquery中attr()怎么使用”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“jquery中attr()怎么使用”文章能帮助大家解决问题。 jQuery是一个轻量级的JavaScript库,它的出现…

    文章页内容下
  • 赞(0) 打赏
    版权声明:本站采用知识共享、学习交流,不允许用于商业用途;文章由发布者自行承担一切责任,与本站无关。
    文章页正文下
    文章页评论上

    云服务器、web空间可免费试用

    宝塔面板主机、支持php,mysql等,SSL部署;安全高速企业专供99.999%稳定,另有高防主机、不限制内容等类型,具体可咨询QQ:360163164,Tel同微信:18905205712

    主机选购导航云服务器试用

    登录

    找回密码

    注册