闲的无事，看到拉钩网图片切换效果不错，拿来练练。效果如下：
代码如下
<!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 time = 4000 //自动切换间隔时间
var iNow = 0;
for(var i = 0;i < aBtn.length;i++){
aBtn[0].className = ‘cur‘
aBtn[iNow].onmouseover = function(){
imgSwitch();
}
}
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});
}
setInterval(function(){
iNow++;
console.log(iNow)
if(iNow > aBtn.length-1){
iNow =0;
}
imgSwitch();
},time)
//获取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;}
时间： 2024-10-06 19:12:37