标签:style blog class code java c
先是HTML部分
<div id="alternate"> <ul class="img_list clear"> <li><a href="#"><img src="1.jpg" /></a></li> <li><a href="#"><img src="2.jpg" /></a></li> <li><a href="#"><img src="3.jpg" /></a></li> <li><a href="#"><img src="4.jpg" /></a></li> <li><a href="#"><img src="5.jpg" /></a></li> </ul> <a href="javascript:;" class="btn_left"></a> <a href="javascript:;" class="btn_right"></a> </div>
样式部分:
<style> body,ul{padding:0;margin:0} li{list-style:none;} #alternate{ width:900px; position:relative; margin:30px auto; overflow:hidden; } .btn_left{ width:60px; height:60px; position:absolute; top:223px; left:10px; background:url(btn.gif) no-repeat; opacity:0.3; filter:alpha(opacity:30); } .btn_left:hover{ opacity:1; filter:alpha(opacity:30); } .btn_right{ width:60px; height:60px; position:absolute; top:223px; right:10px; background:url(btn.gif) no-repeat 0 -60px; opacity:0.3; filter:alpha(opacity:30); } .btn_right:hover{ opacity:1; filter:alpha(opacity:30); } .img_list{ width:45000px; position:relative; left:0; } .img_list li{ float:left; } .clear:after{ clear:both; display:block; content:""; height:0; overflow:hidden; visibility:hidden; } </style>
然后是JS方面:
先上一个通过CLASS来获取样式,前面的随笔文章当中有发布过:通过正则写一个较为完美的getByClass函数
function getByClass(oParent,sClass){ var aChild = oParent.getElementsByTagName("*"), result = []; for(var i =0;i<aChild.length;i++){ if(aChild[i].className.match(new RegExp("(\\s|^)" + sClass+ "(\\s|$)"))){ //判断是否有该class result.push(aChild[i]); }; }; return result; };
链接外部样式,可以参考 多用途运动框架
<script src="move.js"></script>
主体部分:
<script> window.onload = function(){ var oUl = document.getElementById("alternate").getElementsByTagName("ul")[0]; var aLi = oUl.getElementsByTagName("li"); var aPrev = getByClass(document.getElementById("alternate"),"btn_left")[0]; var aNext = getByClass(document.getElementById("alternate"),"btn_right")[0]; var iNow = 0; var timer; //oUl.innerHTML += oUl.innerHTML; oUl.style.width = aLi[0].offsetWidth * aLi.length + "px"; aNext.onclick = function(){ clearInterval(timer); //每次点击按钮的时候清楚定时器 if(iNow < aLi.length-1){ iNow++; }else{ iNow = 0; }; move(oUl,{left:-aLi[0].offsetWidth*iNow}); timer= setInterval(rollNext,3000); //运行完点击后的代码,才开始定时器,这样确保每次运动的间隔是一样的 }; aPrev.onclick = function(){ clearInterval(timer); if(iNow !==0){ iNow--; }else{ iNow = aLi.length-1; }; move(oUl,{left:-aLi[0].offsetWidth*iNow}); timer= setInterval(rollNext,3000); }; timer= setInterval(rollNext,3000); function rollNext(){ if(iNow < aLi.length-1){ iNow++; }else{ iNow = 0; }; move(oUl,{left:-aLi[0].offsetWidth*iNow}); } function getByClass(oParent,sClass){ var aChild = oParent.getElementsByTagName("*"), result = []; for(var i =0;i<aChild.length;i++){ if(aChild[i].className.match(new RegExp("(\\s|^)" + sClass+ "(\\s|$)"))){ //判断是否有该class result.push(aChild[i]); }; }; return result; }; }; </script>
标签:style blog class code java c
原文地址:http://www.cnblogs.com/fyima/p/3722187.html