当前位置:首页 > 日记 > 正文

jQuery实现图像旋转木马效果

jQuery实现图像旋转木马效果
{原理}
下面是整个过程。

1,除第一幅图片外,隐藏所有图片,

2,获取第一张图片的alt信息显示在信息栏中,并添加到单击事件中。

3、添加点击收听4个按钮,点击相应的按钮,并与淡出的画面显示,显示方法

4、设置setInterval,执行开关功能正常

{代码描述}

筛选器():获取所有可见元素

Unbind():从匹配的元素中删除绑定事件

兄弟姐妹:获取一个元素集合,其中包含匹配元素集合中每个元素的所有唯一对等元素。

例如:找到所有的同辈元素类的名字在每个区选择
HelloHello AgainAnd再次
执行$()
{你好,再}
{源代码}

HTML的一部分:





CSS部分:
#旗帜{位置:相对;宽度:478px;身高:286px;边框1px solid # 666;溢出:隐藏;}
# banner_list img { border: 0px;}
# banner_bg {位置:绝对的;下:0;背景颜色:# 000;高度:30px;过滤器:α(不透明度30);不透明度:0.3;Z指数:1000;
鼠标指针;宽度:478px;}
# banner_info {位置:绝对的;下:0;左:5px;身高:22px;颜色:# FFF;Z指数:1001;鼠标指针}
# banner_text {位置:绝对;宽度:120px;Z指数:1002;右:3px;底:3px;}
#旗帜UL {位置:绝对;列表样式类型:无;过滤器:α(不透明度80);不透明度:0.8;border: 1px solid # FFF;Z指数:1002;
保证金:0;padding: 0;底:3px;右:5px;}
#旗帜UL Li {填充:0px 8px;浮动:左;显示:块;颜色:# FFF;边界:# e5eaff 1px solid;背景:# 6f4f67;
#旗帜UL li.on { 900 } #背景:
# banner_list一{位置:绝对的;}
js的一部分:
var = n = 0,计数;
$(文档)Ready(函数(){)
数= $(# banner_list 的长度);
$(# banner_list:不(:第一个孩子))藏();
$(# banner_info ).html($(# banner_list:第一个孩子)。找到(IMG)。Attr('alt '));
$(# banner_info)。Click(function(){ window.open($(# banner_list:第一个孩子)。Attr('href),_blank )});
$(#横幅里)。Click(function(){)
var i = $(this)。文本(- 1);在LI元素值中获得,即1, 2, 3,4。
N = i;
如果(i =计数)返回;
$(# banner_info ).html($(# banner_list ),Eq(我),(IMG)。Attr('alt '));
$(# banner_info)。Unbind(),Click(函数(){ window.open($(# banner_list ),Eq(我),Attr('href),_blank )})
$(# banner_list )。滤波器(:可见)。FadeOut(500)。母()。孩子们()。Eq(我)FadeIn(1000);
document.getelementbyid(旗帜)。风格。背景= ;
$(this).ToggleClass (on);
$(这),兄弟姐妹()。RemoveAttr(类);
});
T = setInterval(showauto()
$(#旗帜)。Hover(function(){ clearInterval(T)},{ T = setInterval()函数(showauto()
})

showauto()函数
{
N(计数- 1)= 0 = ++;
$(#横幅里)。情商(N)。Trigger(听到咔哒声);
}
以上是jQuery实现的全画面旋转木马,希望能帮助大家学习。

相关文章

PS做一个朦胧的日本杂志风格照片

PS做一个朦胧的日本杂志风格照片

照片,做一个,日本,朦胧,风格,本教程是介绍一个朋友给PS创建一个朦胧美杂志风格的照片方法。教程制作的照片非常漂亮,而且非常实用。建议像你这样的朋友过来看看。 PS日本风格的照片现在很流行。日本图片的感觉有点朦胧和美丽。这个PS创建一…

520浪漫爱情幸福QQ签名快乐个性签

520浪漫爱情幸福QQ签名快乐个性签

个性签名,浪漫爱情,快乐,电脑软件,QQ,520 5月20日,我爱你浪漫的日子。相对于她,他在你心中表现你的感情吗我希望你有喜欢的人物签名,欢迎阅读。 1。牵着你的手,每天早晚,牵着你的手,等待明天,牵着你的手,穿过生命,握住你的手,一代又一代。 2、在这样…

PS制作策展人动画表达课程主任

PS制作策展人动画表达课程主任

动画,主任,课程,电脑软件,PS,这个教程介绍给我的朋友PS,他写了策展人的卡通表情。本教程制作的动画非常好,很难。建议你喜欢你的朋友一起学习。 在各大网站最近几年基姆的表达是非常受欢迎的,同时加上一个或两个黄金已经成为草根的娱乐项目,包…

你如何在幻灯片中播放照片QQ常见问

你如何在幻灯片中播放照片QQ常见问

常见问题,照片,幻灯,片中,如何在,你如何在幻灯片中播放照片 1,登录到你的QQ空间,点击在导航上;相册; 2,打开需要浏览的相册,点击页面顶部的幻灯片;可以通过幻灯片观看。…

整理PHP防注入和XSS攻击一般滤波

整理PHP防注入和XSS攻击一般滤波

防注入,电脑软件,PHP,XSS,有许多网站推出的XSS攻击,一些内置的过滤功能只使用PHP是无法处理的,即使你将filter_var,mysql_real_escape_string,htmlentities,htmlspecialchars,对这些功能的使用strip_tags将不能保证绝对安全。 因此如何防止XSS注…

如何制作十字绣效果图PPT制作课程

如何制作十字绣效果图PPT制作课程

效果图,十字绣,课程,电脑软件,PPT,咸莱武世绣十字绣成品框,他挂在墙上,还有成就感有!但实际上,用十字绣不是件简单的事,但需要极大的勇气和耐心!但我们会偷偷懒,影响十字绣设计绘画萧边今天教你PPT自己看中的直接使用。 1、切换到插入选项卡,在图像…

PS图象处理软件设计和制造黑科技的

PS图象处理软件设计和制造黑科技的

黑科技,图象处理,软件设计,按钮图标,电脑软件,在做一个按钮之前,我们需要彻底分析这个结构,然后我们从底部的工具开始,用形状工具画出想要的图形。通过合并或减去多个形状可以得到更为复杂的形状。然后我们可以添加图层样式的颜色和纹理。 在…

PS滑稽地看了馆长的头,或修改了馆长

PS滑稽地看了馆长的头,或修改了馆长

修改,馆长,看了,滑稽,表情,网上到处都有黄金馆长的表情,表达爱意收藏不是你想让自己看起来像基姆先生,下面的小修改为黄金馆长表情文字,介绍PS的方法,制作滑稽的黄金策展人表达或非常简单,有兴趣的朋友可以参考本文。 基姆馆长的表情近年来在各…

Excel的基础是什么

Excel的基础是什么

基础,电脑软件,Excel,你认为Excel只是一种工具吗也许我会把Excel作为我生活的一部分,因为我没有Excel表格就不能工作。也许你是一个优秀的球员,寻找你自己还没有掌握的技能。也许你只是一个刚入门的初学者。我想知道更多关于表的知识,早日进入…

在QQ空间操作中,为什么会出现验证码

在QQ空间操作中,为什么会出现验证码

验证码,空间,操作,常见问题,电脑软件,验证码是确保用户使用安全,防止恶意黑客对您的帐户的操作设置,系统会根据你的QQ号码,如果QQ号码检测在不同的地方,很多时候,会有一种异常情况,及密码信息就会提示。同时,如果一个QQ号码经常发送大量邮件或在短…

PS合成恐怖城堡下的夜晚

PS合成恐怖城堡下的夜晚

城堡,夜晚,恐怖,电脑软件,PS,今天,小编辑教你如何用PS合成一个可怕的城堡。这个教程有点复杂,但是效果很好,有兴趣的朋友可以一起看看。 效果图实际上是夜间效果,但所用的材料都是白天拍摄的。当我们合成时,我们需要对材料着色,使用曲线等来加深…

如何实现交错excel2010教程在Excel

如何实现交错excel2010教程在Excel

教程,如何实现,电脑软件,microsoftexcel2010可以帮你做出分析,更好、更明智的决策管理和信息共享比以往更多。新的分析和可视化工具,帮助你跟踪和突出显示重要的数据趋势。你可以从几乎所有的Web浏览器或智能手机移动办公访问您的重要数据。 …