<!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>
效果图：
相关推荐
标题“JQ 最少代码实现多图切换”指的是使用jQuery库来实现一个高效、简洁的多张图片轮播效果。jQuery是一种广泛使用的JavaScript库，它简化了DOM操作、事件处理和动画效果，使得开发者能够用更少的代码完成复杂的...
标题“JQ最少代码实现全选和不全选”涉及到的是如何使用jQuery来控制多选框（checkboxes）的全选与反选功能。这种功能常见于数据管理界面，用户可以快速选择或取消选择所有项目。下面将详细解释这一知识点。 一、...
**标题：“JQ最少代码实现无缝滚动”** 在网页设计中，为了提供用户更好的浏览体验，无缝滚动效果常被用于长列表或者图片展示。JQuery（简称JQ）作为一个轻量级、功能丰富的JavaScript库，提供了简单易用的API来...
以下是一个使用最少代码实现 JQ 选项卡切换的基本步骤和相关知识点： 1. **引入 jQuery**： 在 HTML 文件中，首先需要引入 jQuery 库。这通常通过添加 `<script>` 标签并指定 jQuery CDN（内容分发网络）链接来...
在提供的`demo`文件中，可能包含了实现这个功能的HTML、CSS和JavaScript代码示例，你可以通过查看和运行这些文件来进一步理解这个过程。通过这样的简单实现，我们可以提高网站的用户体验，使得用户在浏览长页面时能...
这个标题提到的“最少代码实现当前的星期加时间”，意味着我们要讨论如何使用jQuery来获取当前日期，并显示星期与时间，而且代码量要尽可能地精简。 在JavaScript中，我们可以使用内置的`Date`对象来获取当前日期和...
标题 "JQ 最少代码实现title标签切换内容" 指的是使用jQuery库来实现一个功能，即在网页上动态地切换元素的`title`属性内容。jQuery是一种广泛使用的JavaScript库，它简化了DOM操作、事件处理、动画效果以及Ajax交互...
在本文中，我们将深入探讨如何使用JavaScript库JQuery（简称JQ）来创建一个高效的、最少代码实现的导航栏下拉菜单。下拉菜单在现代网页设计中是必不可少的元素，它能帮助用户轻松访问网站的多层次结构。下面，我们将...
本篇文章将深入探讨如何利用JQ最少的代码实现中部浮窗（也称中间弹窗或悬浮框）功能。中间浮窗通常用于显示重要的通知、广告或者用户交互内容，它会始终保持在屏幕中央，即使页面滚动也是如此。 首先，我们需要创建...
在这个主题中，“jQuery 带标题的焦点图片轮播切换代码”涉及到如何利用 jQuery 实现一个具有标题功能的图片轮播效果。 首先，我们需要理解基本的 HTML 结构，这通常包括一个容器元素来承载轮播，每个图片和对应的...
综上所述，这个"jQ大屏带导航焦点图 jQuery大屏带导航焦点图代码下载"项目涵盖了前端开发的多个关键领域：jQuery的事件处理和动画、CSS的样式设计和布局、HTML5的语义化元素以及响应式设计。通过学习和实践这个代码...
【描述】中的“代码简单易懂，使用方便，实用性强”说明了这个JQ轮播图的实现代码具有良好的可读性和实用性。简单易懂的代码意味着开发者可以快速理解和应用，而方便的使用性则表明该轮播图插件可能已经封装了必要的...
在这个“jquery四屏带缩略图带箭头滚动对应banner大图切换的焦点图代码”中，我们将深入探讨如何使用jQuery实现一个功能丰富的焦点图组件。 首先，我们来看`index.html`文件，这是网页的主体部分。在这个页面中，...
本资源"上古世纪jQ焦点图 腾讯上古世纪jQuery焦点图代码下载.zip"提供了一个专门针对腾讯上古世纪游戏的jQuery焦点图实现，它可以帮助开发者创建引人注目的动态图像展示效果，提升用户体验。 焦点图，又称轮播图或...
标题中的“jQ键盘控制焦点图”指的是使用jQuery库实现的一种网页交互功能，它允许用户通过键盘导航来切换页面上的高亮焦点区域，通常应用于图片轮播、产品展示等场景。这种功能增强了用户体验，尤其是对于视觉障碍...
本文将深入探讨“jquery图片轮播图多图切换效果（带小图左右箭头）”这一主题，包括其核心技术和实现方式。 首先，jQuery是一个广泛使用的JavaScript库，它简化了DOM操作、事件处理、动画以及Ajax交互。在创建图片...
接下来，我们要知道如何实现带缩略图的焦点图。基本步骤如下： 1. **HTML结构**：创建一个容器用于放置大图和缩略图，大图容器通常包含一个隐藏的图片元素，而缩略图则以列表或其他形式呈现。 2. **CSS样式**：为...
同时，焦点图提供了四个箭头，分别代表上、下、左、右四个方向的切换，用户可以通过点击这些箭头来浏览不同位置的图片，增加用户操作的灵活性和自由度。 【核心知识点】： 1. **jQuery库**：jQuery是一个广泛使用的...
【jQuery五屏上下滚动焦点图代码】是一种使用JavaScript库jQuery实现的网页动态效果，它能够展示多张图片或内容，并且支持用户通过上下滚动来切换不同的屏幕。这种效果常用于网站的首页，以吸引用户的注意力并展示...