首先看图片:
在这个图片中,我们可以看出,这个效果只要实现的是广告图宽屏显示的效果,当鼠标移动到圆点的时候,广告图能实现淡入淡出的效果;这个效果是我们一直要找的一种插件
最后,Javascript的代码如下
//首页轮播状态
function tabs(se,ll,cur,prev,next,stop){
var $obj=$("#"+se);//所用标签
var len=$obj.length;//个数
var divs="";
var c=1;
for(n=1;n<=len;n++){n==1?divs+="#"+ll+n:divs+=",#"+ll+n;};
function showDiv($num){
$obj.removeClass(cur);
$(divs).fadeOut();
$($obj.get($num-1)).addClass(cur);
$("#"+ll+$num).fadeIn();
};
$obj.each(function(i){
$(this).mouseover(function(){
c=i+1;showDiv(c);
});
});
var interval=setInterval(function() {
c++;c>len?c=1:c;showDiv(c);
}, 5000);
if(stop){
$(stop).mouseover(function(){
clearInterval(interval);
}).mouseout(function(){
interval=setInterval(function() {
c++;c>len?c=1:c;showDiv(c);
}, 5000);
});
}
}
/*public table页效果*/
tabs("bq li","pimg","cur","","",".pimg");
代码文件分享下载网址:http://yunpan.cn/QXSuiiuFRBNvD