<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>原生js自动轮播展示产品图片</title> <meta name="keywords" content="原生js,自动轮播,展示,产品图片" /> <meta name="description" content="原生js自动轮播展示产品图片" /> <link rel="stylesheet" type="text/css" href="css/style.css"> </head>
<body> <div class="user_callback"> <div class="user_pic" id="user_pic"> <span class="prev"></span> <span class="next"></span> <ul id="user_call"> <li class="user_pic1"> <a href="#"> <img src="images/57f8c4ccN6a433b82.webp" alt="1" width="248" height="285" /></a> </li> <li class="user_pic2"> <a href="#"> <img src="images/57f8c4d6Nd425f6a3.webp" alt="2" width="247" height="285" /></a> </li> <li class="user_pic3"> <a href="#"> <img src="images/57f8c4e1Nbd6f109e.webp" alt="3" width="248" height="285" /></a> </li> <li class="user_pic4"> <a href="#"> <img src="images/57f8c4ecN92c22efc.webp" alt="4" width="247" height="285" /></a> </li> <li class="user_pic5"> <a href="#"> <img src="images/583691e7Na26009a0.webp" alt="5" width="247" height="285" /></a> </li> <li class="user_pic6"> <a href="#"> <img src="images/583691e7Ne2adc3c4.webp" alt="6" width="247" height="285" /></a> </li> <li class="user_pic7"> <a href="#"> <img src="images/583691e7N058f6f5a.webp" alt="7" width="247" height="285" /></a> </li> <li class="user_pic8"> <a href="#"> <img src="images/583691e7N36b67a44.webp" alt="8" width="247" height="285" /></a> </li> </ul> </div> </div> <script type="text/javascript">function arcSlip() { 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<aLi.length;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<aLi.length;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<aLi.length;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<aEle.length;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(); </script> </body> </html> |
