广告图宽屏显示的效果
首先看图片:
在这个图片中,我们可以看出,这个效果只要实现的是广告图宽屏显示的效果,当鼠标移动到圆点的时候,广告图能实现淡入淡出的效果;这个效果是我们一直要找的一种插件
最后,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
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步