拉勾网图片切换效果
闲的无事，看到拉钩网图片切换效果不错，拿来练练。效果如下：
代码如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>拉钩网图片切换</title> </head> <body> <div id="banner"> <ul class="banner-img"> <li><a href="javascript:;"><img src="http://www.lagou.com/upload/indexPromotionImage/ff8080814d661121014d848153410440.jpg" /></a></li> <li><a href="javascript:;"><img src="http://www.lagou.com/upload/indexPromotionImage/ff8080814d661121014d80c042810438.jpg" /></a></li> <li><a href="javascript:;"><img src="http://www.lagou.com/upload/indexPromotionImage/ff8080814d661121014d8b175d3604ab.jpg" /></a></li> </ul> <div class="banner-control"> <ul> <li><span></span><img src="http://www.lagou.com/upload/indexPromotionSmallImage/ff8080814d661121014d8481902b0441.jpg" /></li> <li><span></span><img src="http://www.lagou.com/upload/indexPromotionSmallImage/ff8080814d661121014d80c058180439.png" /></li> <li><span></span><img src="http://www.lagou.com/upload/indexPromotionSmallImage/ff8080814d661121014d8b1772b904ac.jpg" /></li> </ul> <strong></strong> </div> </div> </body> </html>
window.onload = function(){ var oBanner = document.getElementById('banner'); var imgBox = getByClass(oBanner,'banner-img')[0]; var oControl = getByClass(oBanner,'banner-control')[0]; var aBtn =oControl.getElementsByTagName('ul')[0].children; var oString = oBanner.getElementsByTagName('strong')[0]; var timer = null; var time = 3000 //自动切换间隔时间 var iNow = 0; for(var i = 0;i < aBtn.length;i++){ aBtn[i].index = i; aBtn[0].className = 'cur'; aBtn[i].onmouseover = function(){ iNow = this.index; imgSwitch(); } } oBanner.onmouseover = function(){ clearInterval(timer) } oBanner.onmouseout = function(){ timer = setInterval(next,time) } function imgSwitch(){ for(var i = 0;i < aBtn.length;i++){ aBtn[i].className= ""; } aBtn[iNow].className = 'cur'; move(oString,{top:iNow*55},{duration:400}); move(imgBox,{top:-iNow*imgBox.children[0].offsetHeight},{duration:400}); } timer = setInterval(next,time) function next(){ iNow++ if(iNow == aBtn.length){ iNow = 0; } imgSwitch(); } //获取Class function getByClass(oParent, sClass){ if(oParent.getElementsByClassName){ return oParent.getElementsByClassName(sClass); }else{ var aEle=oParent.getElementsByTagName('*'); var re=new RegExp('\\b'+sClass+'\\b'); var result=[]; for(var i=0;i<aEle.length;i++){ if(aEle[i].className.search(re)!=-1){ result.push(aEle[i]); } } return result; } } //获取样式 function getStyle(obj,value){ return obj.currentStyle?obj.currentStyle[value]:getComputedStyle(obj,false)[value]; } //运动 function move(obj,json,options){ options = options || {}; options.duration = options.duration || 700; options.easing = options.easing || 'ease-out'; var start = {}; var dis = {}; for(var name in json){ start[name] = parseFloat(getStyle(obj,name)); dis[name] = json[name] - start[name]; } var count = Math.round(options.duration / 30); var n = 0; clearInterval(obj.timer) obj.timer = setInterval(function(){ n++; for(var name in json){ switch(options.easing){ case 'linear': var a = n/count; var cur = start[name] + dis[name]*a; break; case 'ease-in': var a = n/count; var cur = start[name] + dis[name]*a*a*a; break; case 'ease-out': var a = 1-n/count; var cur = start[name] + dis[name]*(1-a*a*a); break; } if(name == 'opactiy'){ obj.style.opacity = cur; obj.style.filter = 'alpha(opacity:'+cur*100+')'; }else{ obj.style[name] = cur + 'px' } } if(n == count){ clearInterval(obj.timer) options.complete && options.complete(); } },30) } }
*{margin:0;padding:0;} ul{list-style: none;} img{vertical-align: top;border:none;} #banner{width:744px;height:160px;overflow: hidden;position: relative;} .banner-img{width:612px;height:160px;float:left;position:absolute;top:0;left:0;} .banner-control{float:right;width:121px;position:relative;cursor: pointer} .banner-control li{height:42px;border: 4px solid #d3d3d3;margin-bottom:5px;position:relative;} .banner-control li span{position: absolute;width:100%;height:42px;background:#000;filter:alpha(opacity=50);opacity:0.5;top:0;left:0;} .banner-control strong{width:127px;height:50px;background: url(http://www.lagou.com/images/control_current.png) no-repeat;position: absolute;right:0;top:0;} .banner-control .cur span{background:none;}
