<!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相册特...
基于java的技术大健康综合咨询问诊平台的设计与实现.docx
均包含代码，文章，部分项目包含ppt
均包含代码，文章，部分项目包含ppt
演示地址：https://blog.csdn.net/qq_41221596/article/details/142372140
项目工程资源经过严格测试可直接运行成功且功能正常的情况才上传，可轻松复刻，拿到资料包后可轻松复现出一样的项目，本人系统开发经验充足（全领域），有任何使用问题欢迎随时与我联系，我会及时为您解惑，提供帮助。 【资源内容】：包含完整源码+工程文件+说明（如有）等。答辩评审平均分达到96分，放心下载使用！可轻松复现，设计报告也可借鉴此项目，该资源内项目代码都经过测试运行成功，功能ok的情况下才上传的。 【提供帮助】：有任何使用问题欢迎随时与我联系，我会及时解答解惑，提供帮助 【附带帮助】：若还需要相关开发工具、学习资料等，我会提供帮助，提供资料，鼓励学习进步 【项目价值】：可用在相关项目设计中，皆可应用在项目、毕业设计、课程设计、期末/期中/大作业、工程实训、大创等学科竞赛比赛、初期项目立项、学习/练手等方面，可借鉴此优质项目实现复刻，设计报告也可借鉴此项目，也可基于此项目来扩展开发出更多功能 下载后请首先打开README文件（如有），项目工程可直接复现复刻，如果基础还行，也可在此程序基础上进行修改，以实现其它功能。供开源学习/技术交流/学习参考，勿用于商业用途。质量优质，放心下载使用
基于java留学生交流互动论坛网站设计与实现.docx
点击添加软件，可以添加可执行文件软件，设置启动的时间，也可以设置关闭的时间 注意，时间为00：00：00 等于没设置，这个时间不在设置范围，其他任何时间都可以 1.1更新 1：修复，设置的软件启动时间无法保存到配置文件 2：修复，设置的软件启动时间软件启动自动加载 3：修复，设置跨天，可能出现，无法执行的问题。
92092092092011111111111111111
本系统的集成开发环境是Eclipse，前端使用了html+JavaScript等技术，数据库管理运用了MySQL，Web服务器采用Tomcat，另外还采用SSM框架技术和B/S结构。 系统功能实现是系统编码环节，本系统主要分为三个模板，用户管理模块、稿件信息管理模块、留言管理管理模块 项目关键技术 开发工具：IDEA 、Eclipse 编程语言: Java 数据库: MySQL5.7+ 后端技术：ssm 前端技术：Vue 关键技术：springboot、SSM、vue、MYSQL、MAVEN 数据库工具：Navicat、SQLyog
基于java的旅游资源网站设计与实现.docx
基于java的高校教师科研信息展示网站设计与实现.docx
计算机网络是现代信息社会的重要基础设施，它通过各种通信设备和协议将不同地理位置的计算机连接起来，实现信息的传输、共享和处理。 计算机网络是指利用通信设备和线路将地理位置不同的、功能独立的多个计算机系统互连起来，以功能完善的网络软件（网络通信协议、信息交换方式及网络操作系统等）实现网络中资源共享和信息传递的系统。
1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于人工智能、计算机科学与技术等相关专业，更为适合； 4、下载使用后，可先查看README.md或论文文件（如有），本项目仅用作交流学习参考，请切勿用于商业用途。 5、资源来自互联网采集，如有侵权，私聊博主删除。 6、可私信博主看论文后选择购买源代码。 1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于人工智能、计算机科学与技术等相关专业，更为适合； 4、下载使用后，可先查看README.md或论文文件（如有），本项目仅用作交流学习参考，请切勿用于商业用途。 5、资源来自互联网采集，如有侵权，私聊博主删除。 6、可私信博主看论文后选择购买源代码。 1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于人工智能、计算机科学与技术等相关专业，更为适合； 4、下载使用后，可先查看README.md或论文文件（如有），本项目仅用作交流学习参考，请切勿用于商业用途。 5、资源来自互联网采集，如有侵权，私聊博主删除。 6、可私信博主看论文后选择购买源代码。
2015 APMCM B题
基于java的手办周边商城设计与实现.docx
1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于人工智能、计算机科学与技术等相关专业，更为适合； 4、下载使用后，可先查看README.md或论文文件（如有），本项目仅用作交流学习参考，请切勿用于商业用途。 5、资源来自互联网采集，如有侵权，私聊博主删除。 6、可私信博主看论文后选择购买源代码。 1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于人工智能、计算机科学与技术等相关专业，更为适合； 4、下载使用后，可先查看REaDME.md或论文文件（如有），本项目仅用作交流学习参考，请切勿用于商业用途。 5、资源来自互联网采集，如有侵权，私聊博主删除。 6、可私信博主看论文后选择购买源代码。 、1资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于人工智能、计算机科学与技术等相关专业，更为适合； 4、下载使用后，可先查看README.md或论文文件（如有），本项目仅用作交流学习参考，请切勿用于商业用途。 5、资源来自互联网采集，如有侵权，私聊博主删除。 6、可私信博主看论文后选择购买源代码。
POI产品介绍.pptx
均包含代码，文章，部分项目包含ppt