广告图宽屏显示的效果

news/2024/11/15 2:50:50/

首先看图片:

在这个图片中,我们可以看出,这个效果只要实现的是广告图宽屏显示的效果,当鼠标移动到圆点的时候,广告图能实现淡入淡出的效果;这个效果是我们一直要找的一种插件

最后,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

转载于:https://www.cnblogs.com/chenguiya/p/3279406.html


http://www.ppmy.cn/news/385002.html

相关文章

魔兽争霸III冰封王座宽屏分辨率的修改方法

最近新买了个宽屏的液晶显示器&#xff0c;1440*900的分辨率&#xff0c;无论是看片还是玩游戏都很爽。但是在玩魔兽争霸的时候出了一个小问题&#xff0c;就是这款游戏不支持宽屏的分辨率&#xff0c;在游戏图像设置的选项里根本没有16:9的分辨率&#xff0c;全部是4:3的。因此…

PPT基础(二)宽屏和普屏

宽屏长宽比&#xff08;16&#xff1a;9&#xff09;&#xff0c;普屏长宽比&#xff08;4&#xff1a;3&#xff09; PPT的2013开始&#xff0c;默认页面为16&#xff1a;9 设置宽屏与普屏&#xff1a; 点击菜单栏上的 设计 找到右侧的 幻灯片大小 点击其下拉三角&#xff0c…

php幻灯片调大小,ppt尺寸设置 PPT幻灯片大小更改为标准或宽屏

在早期版本的PowerPoint 中&#xff0c;幻灯片的形状较方 (4:3)。 世界上的许多电视和视频都已采用宽屏和高清格式&#xff0c;PowerPoint 也是如此。现在&#xff0c;默认的幻灯片大小是宽屏 (16:9)。 您可以按照以下方法更改幻灯片大小&#xff1a; 标准 (4:3) 宽屏 (16:9)…

wordpress自适应表格_wordpress响应式移动端完美自适应宽屏主题

WordPress移动宽屏主题HTML5CSS3响应式布局&#xff0c;这款主题在我很久以前就在找的&#xff0c;之前我是比较倾向于特别宽的网站总感觉很窄的网页让人喘不过气&#xff0c;看着很难受&#xff0c;不过可惜那时没有找到&#xff0c;如果当年找到了可能森林之家就不是这个样子…

css宽屏显示_宽屏网络:使用CSS对象适合

css宽屏显示 Most everyone is familiar with the fact that movies are letterboxed, rescaled or cropped as they move from the theater to televisions and tablets. As a web developer, you’ll also be aware of the different ways background images can be made res…

uniapp学习API之—界面之宽屏适配、字体、下拉刷新

#窗口样式相关的 API uni.getTopWindowStyle() 获取 topWindow 的样式 uni.getLeftWindowStyle() 获取 leftWindow 的样式 uni.getRightWindowStyle() 获取 rightWindow 的样式 uni.setTopWindowStyle(OBJECT) 设置 topWindow 的样式 &#xff0c;参数说明 css 样式对…

宽屏自适应php源码,jQuery+H5自适应通栏宽屏banner幻灯片切换特效

jQueryH5自适应通栏宽屏banner幻灯片切换特效 代码片段&#xff1a; function(){ $(this).find(".prev,.next").fadeOut() }); $(".fullSlide").slide({ titCell: ".hd ul", mainCell: ".bd ul", effect: "fold", autoPlay:…

图文详解uni-app PC端宽屏适配方案

图文详解uni-app PC端宽屏适配方案 随着互联网的发展&#xff0c;iOS、Android、H5以及各种小程序快应用层出不穷&#xff0c;随之而来的问题就是如何用一套代码&#xff0c;适配多个平台&#xff0c;其中uni-app表现优异&#xff0c;已经实现了手机端全覆盖&#xff0c;支持i…