`

JQ 极简的轮播图

阅读更多
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link rel="stylesheet" href="base.css" />
<script type="text/javascript" src="jquery-1.10.1.min.js"></script>
<style>
.banner {
	width: 980px;
	margin: 0 auto;
	position: relative;
}
.banner,.banner .bn_box li {
	height: 310px;
}
.bn_box {
	position: relative;
}
.bn_box li {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
}
.banner .b1 {
	background: url(img/banner1.jpg) 0 -45px no-repeat;
}
.banner .b2 {
	background: url(img/banner2.jpg) 0 -45px no-repeat;
}
.banner .b3 {
	background: url(img/banner3.jpg) 0 -45px no-repeat;
}
.banner .bn_box a {
	display: block;
	height: 45px;
	margin: 205px 0 0 30px;
	width: 235px;
}
.banner ul.bn_tab {
	height: 25px;
	position: absolute;
	bottom: 10px;
	z-index: 100;
	left: 0;
	width: 960px;
	text-align: center;
}
.banner .bn_tab li {
	margin: 0 5px;
	display: inline-block;
	*display: inline;
}
.banner .bn_tab li a {
	width: 10px;
	height: 0;
	padding-top: 10px;
	overflow: hidden;
	display: block;
	border: 1px solid #a9a9ab;
	color: #e0e1e3;
	background: #e0e1e3;
	border-radius: 15px;
}
.banner .bn_tab li a:hover {
	border: 1px solid #979797;
	background: #c7c7c7;
}
.banner .bn_tab li.current a {
	border: 1px solid #4794ba;
	background: #3eaee6
}
.banner .prev_next {
	font-size: 20px;
	position: absolute;
	left: 50%;
	top: 50%;
	margin-top: -10px;
	color: #fff;
	cursor: pointer;
}
.banner .prev {
	margin-left: -480px;
}
.banner .next {
	margin-left: 450px;
}
</style>
</head>

<body>
<div class="banner" id="banner">
	<ul class="bn_box">
		<li class="b1">
			<a href="###"></a>
		</li>
		<li class="b2" style="display:none;">
			<a href="###"></a>
		</li>
		<li class="b3" style="display:none;">
			<a href="###" target="_blank"></a>
		</li>
	</ul>
	<ul class="bn_tab">
		<li class="current">
			<a></a>
		</li>
		<li>
			<a></a>
		</li>
		<li>
			<a></a>
		</li>
	</ul>
	<div class="prev_next prev">&lt;</div>
	<div class="prev_next next">&gt;</div>
</div>
<script>
var bn = $("#banner");
var bn_pic = $(".bn_box li", bn);
var len = bn_pic.length;
var bn_tab = $(".bn_tab li", bn);
var prev = $(".prev", bn);
var next = $(".next", bn);

function tab(i, j) {
	bn_pic.eq(j).fadeOut(1000);
	bn_tab.eq(j).attr("class", "");
	bn_pic.eq(i).fadeIn(1000);
	bn_tab.eq(i).attr("class", "current");
}
bn_tab.click(function() {
	var i = bn_tab.index(this);
	var j = bn_tab.index($('#banner .current:eq(0)'));
	if(i != j) {
		tab(i, j);
	}
});

function auto() {
	var j = bn_tab.index($('#banner .current:eq(0)'));
	var i = (j + 1) % len;
	tab(i, j);
}
prev.click(function() {
	var j = bn_tab.index($('#banner .current:eq(0)'));
	var i = (j - 1) % len;
	tab(i, j);
	//alert("dd");
});
next.click(function() {
	var j = bn_tab.index($('#banner .current:eq(0)'));
	var i = (j + 1) % len;
	tab(i, j);
});
//定时切换
var settime = window.setInterval(auto, 5000);
bn_pic.mouseover(function() {
	window.clearInterval(settime);
});
bn_pic.mouseout(function() {
	settime = window.setInterval(auto, 5000);
});
</script>
</body>
</html>

 

效果图:

 

 

 

 

 

 

 

 

 

 

 

  • 大小: 22.9 KB
0
0
分享到:
评论

相关推荐

    WordPress免费唯美极致Qzdy(秋知德雨)主题V5.1

    WordPress免费唯美极致Qzdy(秋知德雨)主题V5.1 ... 2.首次使用主题必须全部重置并保存一遍主题选项才能打开首页,否则可能会报错。...17.优化轮播图新窗口打开开关 18.优化别的主题切换过来之后侧边栏关闭

    大陆仔 iPush 轮播程序 (支持响应式设计)

    高级播放模式:即支持用户任意切换轮播图片。 三种模式,系统均有内置模式,同时也支持用户自定义模式。 极简播放形式 $.dlz_iPush(obj); dlz_iPush 是系统的构造函数,使用iPush程序时候必须调用! 默认方式 ...

    安川MP7系列工控系统源码解析:关键算法与硬件交互揭秘

    内容概要:本文深入剖析了安川MP7系列工业控制系统的关键源码,重点介绍了运动轨迹规划、通信协议处理以及故障处理机制等方面的技术细节。通过对实际代码片段的解读,揭示了该系统在硬件寄存器直接访问、特殊功能码处理等方面的独特之处。同时,文中还分享了一些基于实践经验得出的重要参数设置及其背后的故事,如特定摩擦补偿系数的选择原因等。 适合人群:从事工业自动化领域的工程师和技术人员,尤其是对安川产品有一定了解并希望深入了解其内部工作机制的专业人士。 使用场景及目标:帮助读者掌握安川MP7系列控制器的工作原理,提高对类似系统的维护能力和故障排查效率。对于想要进一步研究或二次开发该系统的开发者来说,也能提供宝贵的参考资料。 其他说明:文章不仅限于理论讲解,还包括了许多来自一线的实际案例和经验教训,使读者能够更好地理解和应用所学知识。

    自动化测试与脚本开发_Python3_pynput_键盘鼠标操作录制执行代码生成工具_用于自动化测试_脚本录制_重复操作模拟_宏命令生成_提高工作效率_支持GUI界面_跨平台兼容_.zip

    自动化测试与脚本开发_Python3_pynput_键盘鼠标操作录制执行代码生成工具_用于自动化测试_脚本录制_重复操作模拟_宏命令生成_提高工作效率_支持GUI界面_跨平台兼容_

    嵌入式八股文面试题库资料知识宝典-深入分析Windows和Linux动态库应用异同.zip

    嵌入式八股文面试题库资料知识宝典-深入分析Windows和Linux动态库应用异同.zip

    嵌入式八股文面试题库资料知识宝典-C语言总结.zip

    嵌入式八股文面试题库资料知识宝典-C语言总结.zip

    风储直流微电网母线电压控制策略与双闭环MPPT技术研究

    内容概要:本文详细探讨了风储直流微电网中母线电压控制的关键技术。首先介绍了风储直流微电网的背景和发展现状,强调了母线电压控制的重要性。接着阐述了永磁风机储能并网技术,解释了永磁风机如何通过直接驱动发电机将风能转化为电能,并确保与电网的同步性和稳定性。然后深入讨论了双闭环控制MPPT技术,这是一种通过内外两个闭环控制系统来实现实时调整发电机运行参数的技术,确保风机始终处于最大功率点附近。最后,文章探讨了储能控制母线电压平衡的方法,即通过储能系统的充放电操作来维持母线电压的稳定。结论部分指出,通过这些技术的有机结合,可以实现对风储直流微电网的有效管理和优化控制。 适合人群:从事新能源技术研发的专业人士、电气工程研究人员、风电系统工程师。 使用场景及目标:适用于希望深入了解风储直流微电网母线电压控制策略的研究人员和技术人员,旨在帮助他们掌握最新的控制技术和方法,以提高系统的稳定性和效率。 其他说明:文章还对未来风储直流微电网的发展进行了展望,指出了智能化和自动化的趋势,以及储能技术的进步对系统性能的影响。

    嵌入式八股文面试题库资料知识宝典-C++object-oriented.zip

    嵌入式八股文面试题库资料知识宝典-C++object-oriented.zip

    【操作系统开发】HarmonyOS目录结构详解:构建高效开发环境与跨设备协同应用

    内容概要:文章详细介绍了HarmonyOS的目录结构及其重要性,从整体框架到核心目录的具体功能进行了全面剖析。HarmonyOS凭借其分布式架构和跨设备协同能力迅速崛起,成为全球操作系统领域的重要力量。文章首先概述了HarmonyOS的背景和发展现状,强调了目录结构对开发的重要性。接着,具体介绍了根目录文件、AppScope、entry和oh_modules等核心目录的功能和作用。例如,AppScope作为全局资源配置中心,存放应用级的配置文件和公共资源;entry目录是应用的核心入口,负责源代码和界面开发。此外,文章还对比了HarmonyOS与Android、iOS目录结构的异同,突出了HarmonyOS的独特优势。最后,通过旅游应用和电商应用的实际案例,展示了HarmonyOS目录结构在资源管理和代码组织方面的应用效果。; 适合人群:具备一定编程基础,尤其是对移动操作系统开发感兴趣的开发者,包括初学者和有一定经验的研发人员。; 使用场景及目标:①帮助开发者快速理解HarmonyOS的目录结构,提高开发效率;②为跨设备应用开发提供理论和技术支持;③通过实际案例学习资源管理和代码组织的最佳实践。; 其他说明:HarmonyOS的目录结构设计简洁明了,模块职责划分明确,有助于开发者更好地管理和组织代码和资源。随着万物互联时代的到来,HarmonyOS有望在开发便利性和生态建设方面取得更大进展,吸引更多开发者加入其生态系统。

    飞轮储能充放电控制Simulink仿真模型:基于永磁同步电机的矢量控制与dq轴解耦

    内容概要:本文详细介绍了飞轮储能充放电控制的Simulink仿真模型,重点在于采用永磁同步电机的矢量控制和dq轴解耦控制策略。充电时,外环控制转速,内环控制dq轴电流;放电时,外环控制直流母线电压,内环同样控制dq轴电流。文中还讨论了硬件与软件环境的选择,以及仿真模型的调试与运行情况,最终得出该模型具有良好的跟随性能和波形完美度。 适用人群:从事电力电子系统、储能技术和Simulink仿真的研究人员和技术人员。 使用场景及目标:适用于需要对飞轮储能系统进行深入研究和仿真的场合,旨在提高充放电效率和稳定性,满足不同应用场景的需求。 其他说明:该仿真模型已调试完成,可以直接用于进一步的研究和实际应用,为未来的飞轮储能技术研发提供了有价值的参考。

    嵌入式八股文面试题库资料知识宝典-北京瑞德方科技.zip

    嵌入式八股文面试题库资料知识宝典-北京瑞德方科技.zip

    嵌入式八股文面试题库资料知识宝典-同方万维硬件测试工程师.zip

    嵌入式八股文面试题库资料知识宝典-同方万维硬件测试工程师.zip

    1_15套python PDF格式.zip

    1_15套python PDF格式.zip

    三相三电平整流器仿真:基于电压电流双闭环控制与SPWM调制的性能分析

    内容概要:本文详细介绍了三相三电平整流器的仿真过程及其性能分析。文中首先概述了三相三电平整流器的基本概念及其在电力系统中的重要作用,接着重点探讨了电压电流双闭环控制方式的工作原理和优势,以及SPWM调制技术的具体应用。通过仿真文件展示了整流器在不同条件下的响应情况,验证了这两种技术的有效性和优越性。最后,作者表达了对未来实际应用的期望。 适合人群:从事电力电子研究的技术人员、高校相关专业师生、对电力控制系统感兴趣的工程爱好者。 使用场景及目标:适用于希望深入了解三相三电平整流器工作原理和技术细节的研究人员;目标是在理论基础上掌握电压电流双闭环控制和SPWM调制的实际应用方法。 其他说明:本文提供的仅为仿真文件,未涉及实物实验数据。

    嵌入式八股文面试题库资料知识宝典-恒光科技.zip

    嵌入式八股文面试题库资料知识宝典-恒光科技.zip

    嵌入式八股文面试题库资料知识宝典-北京天华威视科技有限公司面试题.zip

    嵌入式八股文面试题库资料知识宝典-北京天华威视科技有限公司面试题.zip

    嵌入式八股文面试题库资料知识宝典-微软研究院笔试题目的答案.zip

    嵌入式八股文面试题库资料知识宝典-微软研究院笔试题目的答案.zip

    Arduino UART实验例程【正点原子EPS32S3】

    Arduino UART实验例程,开发板:正点原子EPS32S3,本人主页有详细实验说明可供参考。

    嵌入式八股文面试题库资料知识宝典-朝歌数码.zip

    嵌入式八股文面试题库资料知识宝典-朝歌数码.zip

Global site tag (gtag.js) - Google Analytics