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

基于jQuery的淡入淡出效果图

基于jQuery的淡入淡出效果图
用javascript做的平滑切换焦点旋转贴图后,用jQuery写的一个简单淡入淡出的旋转图,代码没有优化做,html结构稍微调整,图片部分替换后才使用div与UL。
HTML的结构如下所示:

>

CSS设置:
* {
保证金:0;
填充:0;
文字装饰:无;
}
UL {
列表样式:无;
}
#容器{
职位:相对;
宽度:400px;
身高:200px;
保证金:20px汽车;
}

图片作者:{
位置:绝对;
顶部:0;
左:0;
显示:无;
}
img {照片里。
宽度:400px;
身高:200px;
}
#位置{
位置:绝对;
底部:0;
权利:0;
保证金:0;
背景:# 000;
不透明性:0.4;
宽度:400px;
文本对齐:中心;
}
#位置李{
宽度:10px;
身高:10px;
保证金:0 2px;
显示:内联块;
WebKit的边界半径:5px;
边界半径:5px;
背景颜色:# afafaf;
}
# Cur {位置。
背景颜色:# FF0000;
}

{。箭头
光标:指针;
显示:无;
行高:39px;
文本对齐:中心;
字体大小:36px;
字体粗细:粗体;
宽度:40px;
身高:40px;
位置:绝对;
Z指数:2;
顶部:50%;
边距:- 20px * / *宽度的一半;
背景颜色:RGBA(0,0,0,。3);
颜色:# FFF;
}
{箭头:悬停
背景颜色:RGBA(0,0,0,。7);
}
#容器:hover.arrow {
显示块;
}
{ #沪指
左:20px;
}
{ #下
右:20px;
}

Javascript代码:
$(函数(){())
第一个显示
$()。EQ(0);
鼠标在手动开关上,淡入淡出
$(#位置里)。Mouseover(function(){)
$(这)。AddClass('cur)。兄弟姐妹()。RemoveClass(我);
var索引= $(this);
i =索引; /没有这个句子有bug,鼠标出了一个小点,点后自动旋转不是一个
();
$(。照片里)。情商(指数),FadeIn(500)。兄弟姐妹()FadeOut(500);
});
自动/旋转木马
var I=0;
VaR定时器= setInterval(,2000);
右/开关
函数(){
++;
我= 20:我;
$(#位置里),Eq(我),AddClass('cur)。兄弟姐妹()。RemoveClass(我);
$(。照片里),Eq(我),FadeIn(500)。兄弟姐妹()FadeOut(500);
}
左/左开关
playleft =函数(){ var
我--;
i = i < 02:我;
$(#位置里),Eq(我),AddClass('cur)。兄弟姐妹()。RemoveClass(我);
$(。照片里),Eq(我),FadeIn(500)。兄弟姐妹()FadeOut(500);
}
鼠标移动无效
$(#容器)。Hover(function(){)
ClearInterval(定时器);
}函数(){()
定时器= setInterval(,2000);
});
右击可切换
$(# prev)。Click(function(){)
playleft();
})
$(#下)。Click(function(){)
游戏();
})
})
以上是本文的全部内容,希望能对您有所帮助,希望大家多多支持。

相关文章

浏览器中javascript解析器的工作原理分析

浏览器中javascript解析器的工作原理分析

解析器,原理分析,浏览,器中,工作,当浏览器读取HTML文件时,它只会唤醒所谓的Javascript解析器,在遇到标签时才开始工作。 Javascript分析器工作步骤: 1。发现的东西:VaR,功能,参数;(也叫preparsing) 注:如果名称分为以下两种情况: 满足相同的变量和函数,只保留函…

javascript中捕获异常捕获机制的使用分析

javascript中捕获异常捕获机制的使用分析

机制,捕获异常,电脑软件,javascript,本文演示了Javascript中试用捕获异常捕获机制的用法,供您参考,如下所示: 1、喜欢java,Javascript也有尝试的异常捕获机制catch块。 (1)一个典型的catch语句 尝试{ } 抓住{ } 最后{ } 像java,最典型的try-catch语句的JS也…

如何5.7.17MySQL的密码忘了

如何5.7.17MySQL的密码忘了

密码,电脑软件,MySQL,1。添加跳过授权表到my.ini文件并重新启动MySQL服务器 2。由管理员输入cmd,或与数据库管理工具,我用Navicat连接数据库,在这里 连接名是随意填写的,密码是空的,单击是确定的。 3、双击mysql数据库,单击菜单栏查询,新建查询 …

PS图象处理软件简单地绘制一个空心

PS图象处理软件简单地绘制一个空心

绘制,图象,处理软件,简单,电脑软件,当使用PS图象处理软件操作,你要使用PS图象处理软件画一个空心的圆。你是怎么画的Here is an example of the use of Photoshop to explain the use of hollow circle method, come together to see it! …

使用Oracle导出和导入来自Oracle数

使用Oracle导出和导入来自Oracle数

数据,数据库,电脑软件,Oracle,本文的示例是让您共享使用Oracle导出和导入Oracle数据库中的数据以供参考的方法。 1。出口数据: 模式1:工具>导出用户对象>导出SQL文件 注意:这是导出语句和存储过程语句的一种方式。 方式二:工具>导出表 注意:这…

ppt如何使用公式编辑器输入公式图

ppt如何使用公式编辑器输入公式图

教程,公式编辑器,输入,如何使用,公式,为了方便公式的输入,PPT制作时通常使用公式编辑器,新手则不做。让我们告诉你如何使用PPT编辑器输入公式。 ppt编辑器输入公式的方法 1。安装公式编辑器 在控制面板中输入添加或删除程序窗口;在找到安装…

在Javascript中,定时控制油门,消抖,立即

在Javascript中,定时控制油门,消抖,立即

控制,油门,电脑软件,Javascript,消抖,前言 我们称这些行为事件(事件),和响应的回调函数(回调)。事件的连续流动称为事件流(事件流)。这些行为的速度没有手动控制,但我们可以控制何时以及如何激活正确的响应,也有一些技术,为我们提供了精确的控制。 …

PS图象处理软件路径添加弧平滑光

PS图象处理软件路径添加弧平滑光

平滑,路径,图象,处理软件,电脑软件,先看一下原始地图。 设计素描 uff1a 创建PS图象处理软件的一个新图层,然后使用钢笔工具画一个曲线,根据背景。 (记住钢笔是在路径模式下工作的,而不是形状工具模式)。 然后一些细微的笔刷,选择白色,当StrokePat…

MySQL的安装提示,请键入nethelpmsg3

MySQL的安装提示,请键入nethelpmsg3

安装,提示,更多,电脑软件,MySQL,今天安装MySQL会提示以下错误: 我在网上找到了很多时间。 所以最终的解决方案是: 在bin目录下输入指令:mysqld -初始化 如下图所示: 以上是本文的全部内容,希望能对您有所帮助,希望大家多多支持。…

HTML5拖放效果的实现代码

HTML5拖放效果的实现代码

拖放,效果,代码,电脑软件,拖放 拖放是一个常见的特性,在对象被抓取后被拖到另一个位置。 在HTML5中,拖放是标准的一部分,任何元素都可以拖放。 Internet Explorer 9 +,Firefox,Opera,Chrome和Safari支持拖动。 注:Safari 5.1.2不支持拖动。 例子: …

利用oracle字符函数检测汉字的方法

利用oracle字符函数检测汉字的方法

字符函数,方法,检测,汉字,电脑软件,-验证汉字是否包含汉字。 创建测试表(一个VARCHAR2(10)); 插入测试值(‘'); 插入测试值(‘深刻'); 插入测试值('AAA'); 插入测试值({BBB}); 插入测试值(b鸟BB); 从测试中选择*; 全宽度,ASCII值范围是 uff00 - UFFFF 选择一…

展示2008张奥运门票照片

展示2008张奥运门票照片

照片,门票,奥运,电脑软件,到北京来工作很好,只要敢参加今年的奥运会,还买了一张奥运会入场券。举重比赛于8月10日上午10点在航空航天大学举行。 图片:北京奥运会门票公布工作人员公布其照片:北京奥运会门票门票公布五种家庭肖像 图片:北京奥运会…