左右運動輪播圖
阿新 • • 發佈：2019-03-17
htm auto star style 開關 seo gin font space
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>輪播圖-左右輪播運動</title><style>body,ul,ol{margin:0;padding:0;}li{ list-style:none;}img{ border:none; vertical-align:top;display: block;width: 100% }#box{width:470px;height:150px; position:relative; margin:30px auto; overflow:hidden;}ul{ width:470px; position:absolute;left:0; top:0; z-index:1;}ul li{width:470px; position:absolute; top:0;}ol{z-index:2; width:120px; position:absolute;right:10px; bottom:10px;}ol li{ width:20px;height:20px; float:left;margin:0 2px; display:inline; background:#fff; color:#f60; line-height:20px; text-align:center;}ol .active{ background:#f60; color:#fff;}</style><script src="js/move.js"></script></head><body><div id="box"><ul><li style="display:block"><img src="images/1.jpg" alt=""/></li><li><img src="images/2.jpg" alt=""/></li><li><img src="images/3.jpg" alt=""/></li><li><img src="images/4.jpg" alt=""/></li><li><img src="images/5.jpg" alt=""/></li></ul><ol><li class="active">1</li><li>2</li><li>3</li><li>4</li><li>5</li></ol></div><script>var oBox=document.getElementById("box");var oUl = document.getElementsByTagName(‘ul‘)[0];var aLiUl = oUl.getElementsByTagName(‘li‘);var oOl = document.getElementsByTagName(‘ol‘)[0];var aLiOl = oOl.getElementsByTagName(‘li‘);var oneWidth=aLiUl[0].offsetWidth;var iNow=0;var aBtn=true;//定義一個開關，解決連續觸發運動for(var i=1;i<aLiUl.length;i++){aLiUl[i].style.left=oneWidth+‘px‘;};for(var i=0;i<aLiOl.length;i++){aLiOl[i].index=i;aLiOl[i].onmouseover=function(){if(aBtn){aBtn=false;for(var i=0;i<aLiOl.length;i++){aLiOl[i].className=‘‘;};if(iNow<this.index){aLiUl[this.index].style.left=oneWidth+‘px‘;startMove(aLiUl[iNow],{left:-oneWidth});}else if(iNow>this.index){aLiUl[this.index].style.left=-oneWidth+‘px‘;startMove(aLiUl[iNow],{left:oneWidth});}this.className=‘active‘;startMove(aLiUl[this.index],{left:0},function(){aBtn=true});iNow=this.index;}}}</script></body></html>move.js// JavaScript Documentfunction startMove(obj,json,endFn){clearInterval(obj.timer);obj.timer = setInterval(function(){var bBtn = true;for(var attr in json){var iCur = 0;if(attr == ‘opacity‘){if(Math.round(parseFloat(getStyle(obj,attr))*100)==0){iCur = Math.round(parseFloat(getStyle(obj,attr))*100);}else{iCur = Math.round(parseFloat(getStyle(obj,attr))*100) || 100;}}else{iCur = parseInt(getStyle(obj,attr)) || 0;}var iSpeed = (json[attr] - iCur)/8;iSpeed = iSpeed >0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);if(iCur!=json[attr]){bBtn = false;}if(attr == ‘opacity‘){obj.style.filter = ‘alpha(opacity=‘ +(iCur + iSpeed)+ ‘)‘;obj.style.opacity = (iCur + iSpeed)/100;}else{obj.style[attr] = iCur + iSpeed + ‘px‘;}}if(bBtn){clearInterval(obj.timer);if(endFn){endFn.call(obj);}}},30);}function getStyle(obj,attr){if(obj.currentStyle){return obj.currentStyle[attr];}else{return getComputedStyle(obj,false)[attr];}}
左右運動輪播圖