<!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>
效果图：