之前写了一个焦点图左右轮播的，感觉淡出淡入用得也比较多，就干脆一起放上来啦。这个容器用了百分比宽度，图片始终保持居中处理，定宽或者自适应宽度都是可以的。
兼容到IE6+以上浏览器，有淡出淡入速度和切换间隔两个参数可以改。效果图如下：
Html代码如下：
<!doctype html><htmllang="zh-CN"><head><metacharset="utf-8"><title>淡出淡入焦点图</title><linkhref="CSS/style.css"rel="stylesheet"/><scriptsrc="js/jquery-1.9.1.min.js"></script><scriptsrc="js/common.js"></script></head><body><divclass="wrap"><divclass="banner"><divclass="bannerCon"><!--容器有做自适应宽度处理，下面的图片会保持居中显示，建议使用最大尺寸的图片填充--><ulclass="imgList"><li><ahref="#"><imgsrc="images/banner01.jpg"alt=""/></a></li><li><ahref="#"><imgsrc="images/banner02.jpg"alt=""/></a></li><li><ahref="#"><imgsrc="images/banner03.jpg"alt=""/></a></li></ul><ulclass="btnList"><liclass="cur"><span></span></li><li><span></span></li><li><span></span></li></ul><spanclass="PRe-nex prev"><</span><spanclass="pre-nex next">></span></div></div></div></body></html>
Css样式如下：
@charset "utf-8";/*简单reset*/body, p, ul, ol, li{margin:0;padding:0;
}ul, ol{list-style:none;
}img{border:none; }a,button{outline:none; }.clearfix:after{visibility:hidden;display:block;font-size:0;content:" ";clear:both;height:0;
}/*具体样式*/.banner{height:400px; }.banner .bannerCon{position:relative;width:60%;height:100%;margin:0 auto;overflow:hidden;
}.bannerCon .imgList{width:100%;height:100%;
}.bannerCon .imgList li{display:none;position:absolute;top:0;left:0;width:100%;height:100%;background-color:#e2f6fd;/*这个背景是为了展示宽度大于图片宽度时的区域，可以删除*/z-index:1;
}.bannerCon .imgList li a{display:block;height:100%;text-align:center;
}.imgList li a img{position:absolute;top:0;left:50%;margin-left:-400px;/*这个数值填图片的实际宽度的一半*/}.bannerCon .pre-nex{display:none;position:absolute;top:50%;width:40px;height:60px;margin-top:-40px;font:bold 40px/60px Simsun;color:#ccc;text-align:center;border:none;background:rgba(0,0,0,.30);filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#4c000000, endColorStr=#4c000000);cursor:pointer;z-index:3;
}.bannerCon .pre-nex.show{display:inline-block; }.bannerCon .prev{left:13%; }.bannerCon .next{right:13%; }.bannerCon .btnList{position:absolute;left:0;bottom:20px;width:100%;height:12px;text-align:center;z-index:6;_overflow:hidden;
}.bannerCon .btnList li{display:inline; }.bannerCon .btnList li span{display:inline-block;width:12px;height:12px;margin:0 5px;border-radius:6px;background-color:#14829e;cursor:pointer;
}.bannerCon .btnList li.cur span{background-color:#f30; }
View Code
Js代码如下：
//加载在文本读取之后的js语句 开始 =============================================================functionfadeImg(obj,speed,interval){//父级容器，淡出淡入速度，切换间隔$("."+obj).each(function(){var$box = $(this),
$imgUl= $box.children(".imgList"),
$imgLi= $imgUl.children("li"),
$btnUl= $box.children(".btnList"),
$btnLi= $btnUl.children("li"),
$btnPreNex= $box.children(".pre-nex"),
n=$imgLi.length,
k= 0,
Player= setInterval(function(){fade()},interval);
$imgLi.eq(0).fadeIn(speed);//第一张先淡入functionfade(){//淡出淡入事件k += 1;if(k >=n){
k= 0;
}
$btnLi.removeClass('cur').eq(k).addClass('cur');
$imgLi.fadeOut(speed).eq(k).fadeIn(speed);
};
$btnLi.click(function(){//小圆点点击事件varindex = $btnLi.index(this);
$(this).addClass('cur').siblings('li').removeClass('cur');
$imgLi.fadeOut(speed).eq(index).fadeIn(speed);
k=index;
});
$btnPreNex.click(function(){//左右按钮点击事件if(!$imgLi.is(":animated")){if($(this).hasClass('next')){
k+= 1;if(k >=n){
k= 0;
}
}else{
k+= -1;if(k < 0){
k= n-1;
}
}
$btnLi.removeClass('cur').eq(k).addClass('cur');
$imgLi.fadeOut(speed).eq(k).fadeIn(speed);
}
});
$box.hover(//鼠标移入事件（不用toggle是为了兼容1.9+的JQ库）function(){
clearInterval(Player);
$btnPreNex.addClass('show');
},function(){
Player= setInterval(function(){fade()},interval);
$btnPreNex.removeClass('show');
}
);
});
}
$(function() {//读取轮播事件fadeImg("bannerCon",1000,3000);
});
View Code
jq库用1.7+的都没问题的啦^_^ 。如果觉得对你们有帮助，就给个赞哈~~~