<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JQ 最少代码实现带数字和箭头的焦点图</title>
<link rel="stylesheet" href="base.css" />
<script type="text/javascript" src="jquery-1.10.1.min.js" ></script>
<style type="text/css">
.t-banner {
position: relative;
width: 500px;
height: 350px;
margin: 40px auto;
}
.m-banner {
float: left;
position: absolute;
overflow: hidden;
width: 500px;
height: 350px;
}
.ui-banner {
position: absolute;
overflow: hidden;
width: 2000px;
}
.ui-banner img {
float: left;
width: 500px;
height: 350px;
}
.ui-number {
position: absolute;
bottom: 15px;
left: 210px;
width: 200px;
}
.ui-number li {
float: left;
width: 20px;
height: 20px;
line-height: 20px;
text-align: center;
margin-right: 5px;
border: 1px solid #ddd;
border-radius: 5px;
font-size: 14px;
background: #fff;
cursor: pointer;
}
.ui-number li.lb-number-current {
background: #f60;
color: #fff;
}
.ui-arrows {
color: #666;
font-size: 40px;
font-weight: bold;
}
.ui-arrows a {
background: rgba(0,0,0,0.2);
display: inline-block;
width: 30px;
height: 70px;
text-align: center;
color: #fff;
line-height: 70px;
}
.ui-arrows a:hover {
background: rgba(0,0,0,0.5);
color: #fff;
}
.lb-arrows-pre {
position: absolute;
top: 120px;
left: 0;
}
.lb-arrows-next {
position: absolute;
top: 120px;
right: 0;
}
</style>
</head>
<body>
<div class="t-banner">
<div class="m-banner">
<ul class="ui-banner">
<li><img src="img/aaa.png"/></li>
<li><img src="img/bbb.png"/></li>
<li><img src="img/ccc.png"/></li>
<li><img src="img/ddd.png"/></li>
</ul>
<p class="ui-arrows">
<a class="lb-arrows-pre"><</a>
<a class="lb-arrows-next">></a>
</p>
<ol class="ui-number">
<li class="lb-number-current">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ol>
</div>
</div>
<script>
$(function(){
//焦点图
focusMap();
});
function focusMap(){
var now = 0;
var banner = $(".ui-banner");
var num = $(".ui-number li");
var wid = $(".m-banner").eq(0).width();
//数字对应着图片
num.click(function(){
var index = $(this).index();
$(this).addClass("lb-number-current").siblings().removeClass();
banner.animate({'left': -wid * index}, 500);
})
//左右箭头轮播
$(".lb-arrows-pre").click(function(){
now>=1 ? now-- : now=num.size()-1;
ani();
});
$(".lb-arrows-next").click(function(){
now==num.size()-1 ? now = 0 : now++;
ani();
});
//动画效果
function ani(){
num.eq(now).addClass("lb-number-current").siblings().removeClass();
banner.animate({'left': -wid * now}, 500);
}
//定时器
var isInterval=setInterval(getIndex,2000);
function getIndex(){
now == num.size()-1 ? now = 0 : now++;
ani();
}
//鼠标停留在画面时停止自动动画，离开恢复
$(".m-banner").mouseover(function(){
clearTimeout(isInterval);
});
$(".m-banner").mouseout(function(){
isInterval=setInterval(getIndex,2000);
});
}
</script>
</body>
</html>
效果图：
相关推荐
QQ音乐10屏带缩略图JS焦点图代码 select css实现.htm s关键字球状旋转效果 仿MAC苹果系统跟随滚动条飘浮网页下方的 天气图标 宽幅的JS幻灯片放映特效代码 对话框.htm 小球碰撞叠加 带分类和缩略图显示的jquery相册特...
内容概要：本文详细介绍了使用COMSOL多物理场仿真软件，在热流固耦合框架下，研究二氧化碳驱替甲烷过程中的煤层变形、孔渗变化及其对甲烷产量和二氧化碳封存量的影响。首先，文章解释了二氧化碳驱替甲烷作为一种关键技术的意义，然后逐步展示了模型的构建方法，包括设定煤层作为多孔介质、考虑其复杂物理特性（如渗透率、孔隙度）以及模拟二氧化碳注入和甲烷释放过程。接着，通过对模拟结果的分析，揭示了煤层在二氧化碳注入后的明显变形、孔渗特性的显著变化，最终得出甲烷产量与煤层孔渗特性紧密相关，而二氧化碳封存量受煤层变形和孔渗变化影响的结论。最后，强调了该模型对未来理解和优化驱替过程的重要性。 适合人群：从事能源领域研究的专业人士，尤其是关注二氧化碳驱替甲烷技术的研究人员和技术人员。 使用场景及目标：适用于需要深入了解二氧化碳驱替甲烷过程中煤层变形和孔渗变化机理的研究项目，旨在提高甲烷产量和二氧化碳封存量的理解和优化。 其他说明：文中提供了详细的建模步骤和代码分析，有助于读者掌握COMSOL多物理场仿真的具体操作方法。
少儿编程scratch项目源代码文件案例素材-我的世界 守卫者.zip
内容概要：本文详细探讨了制造业工厂中两条交叉轨道（红色和紫色）上的自动导引车（AGV）调度问题。系统包含2辆红色轨道AGV和1辆紫色轨道AGV，它们需完成100个运输任务。文章首先介绍了AGV系统的背景和目标，即最小化所有任务的完成时间，同时考虑轨道方向性、冲突避免、安全间隔等约束条件。随后，文章展示了Python代码实现，涵盖了轨道网络建模、AGV初始化、任务调度核心逻辑、电池管理和模拟运行等多个方面。为了优化调度效果，文中还提出了冲突避免机制增强、精确轨道建模、充电策略优化以及综合调度算法等改进措施。最后，文章通过可视化与结果分析，进一步验证了调度系统的有效性和可行性。 适合人群：具备一定编程基础和对自动化物流系统感兴趣的工程师、研究人员及学生。 使用场景及目标：①适用于制造业工厂中多AGV调度系统的开发与优化；②帮助理解和实现复杂的AGV调度算法，提高任务完成效率和系统可靠性；③通过代码实例学习如何构建和优化AGV调度模型，掌握冲突避免、路径规划和电池管理等关键技术。 其他说明：此资源不仅提供了详细的代码实现和理论分析，还包括了可视化工具和性能评估方法，使读者能够在实践中更好地理解和应用AGV调度技术。此外，文章还强调了任务特征分析的重要性，并提出了基于任务特征的动态调度策略，以应对高峰时段和卸载站拥堵等情况。
内容概要：本文介绍了一个使用MATLAB编写的基于FDTD（时域有限差分）方法的电磁波在自由空间中传播的仿真系统。该系统采用了ABC（吸收边界条件）和正弦脉冲激励源，并附有详细的代码注释。文中首先介绍了关键参数的选择依据及其重要性，如空间步长(dx)和时间步长(dt)，并解释了它们对算法稳定性和精度的影响。接着阐述了电场和磁场的初始化以及Yee网格的布局方式，强调了电场和磁场分量在网格中的交错排列。然后详细讲解了吸收边界的实现方法，指出其简单而有效的特性，并提醒了调整衰减系数时需要注意的问题。最后，描述了正弦脉冲激励源的设计思路，包括脉冲中心时间和宽度的选择，以及如何将高斯包络与正弦振荡相结合以确保频带集中。此外，还展示了时间步进循环的具体步骤，说明了磁场和电场分量的更新顺序及其背后的物理意义。 适合人群：对电磁波传播模拟感兴趣的科研人员、高校学生及工程技术人员，尤其是那些希望深入了解FDTD方法及其具体实现的人群。 使用场景及目标：适用于教学演示、学术研究和技术开发等领域，旨在帮助使用者掌握FDTD方法的基本原理和实际应用，为后续深入研究打下坚实基础。 阅读建议：由于本文涉及较多的专业术语和技术细节，建议读者提前熟悉相关背景知识，如电磁理论、MATLAB编程等。同时，可以通过动手实践代码来加深理解和记忆。
少儿编程scratch项目源代码文件案例素材-小鸡会飞.zip
房地产 -云南农博园项目一组团（河尾村）产业规划构思.pptx
haproxy-2.2.17
少儿编程scratch项目源代码文件案例素材-音乐飞翔.zip
少儿编程scratch项目源代码文件案例素材-信仰.zip
scratch少儿编程逻辑思维游戏源码-锯切片.zip
scratch少儿编程逻辑思维游戏源码-货车.zip
scratch少儿编程逻辑思维游戏源码-火箭动力超级鱿鱼.zip
scratch少儿编程逻辑思维游戏源码-滚动的天空.zip
scratch少儿编程逻辑思维游戏源码-极速求生.zip
scratch少儿编程逻辑思维游戏源码-火柴人战争.zip
内容概要：本文详细介绍了MATLAB一维PCHE微通道换热器模型在能源工质系统中的应用。首先，文章阐述了PCHE的设计与模型建立，强调了进出口节点温度参数对确定PCHE长度和换热量的重要性。接着，文中采用了湍流型长直半圆通道Gnielinki方程来计算流动换热的努塞尔数，从而评估PCHE的换热性能。最后，通过MATLAB调用Refprop物性库求解普朗特数，进一步优化PCHE的设计，提升其换热效率。研究表明，这种模型有助于提高能源工质系统的换热性能，推动微通道换热器在能源领域的广泛应用。 适合人群：从事能源工程、热力学、换热器设计等相关领域的研究人员和技术人员。 使用场景及目标：适用于需要精确计算和优化微通道换热器性能的研究项目，旨在提高能源利用效率并减少环境污染。 其他说明：随着计算机技术的发展，一维PCHE微通道换热器模型将进一步完善，为能源领域的发展提供更强有力的支持。
少儿编程scratch项目源代码文件案例素材-星际飞船.zip
少儿编程scratch项目源代码文件案例素材-外星异形战跑.zip