在项目开发中，有一些经常会用到的效果，比如焦点图轮播，效果虽已司空见惯，但对于初学者来说，还是没有思路，只能网上下载，下载的一大堆代码又看不明白，无论布局还是js控制，只能撞大运式移置到项目上，不但影响了工作效率，还影响了项目的质量。以下是我在项目中自己开发的一个焦点图轮播效果，其实这个效果有两个要点：
1.布局，要知道在网页上动的物体一般都是通过position:absolute的定位方式，然后在它的外面有个position:relative的父级
2.脚本，找到要移动的元素，用定时器间隔一定时间修改它的left或top的值
效果图：
具体代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>焦点图</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.scrollparent {
width: 310px;
height: 232px;
margin: 50px auto;
border: 1px solid lime;
position: relative;
overflow: hidden;
}
.scrollbanner {
position: absolute;
left: 0;
top: 0;
}
.scrollbanner img {
float: left;
}
.scrolldots {
height: 15px;
position: absolute;
bottom: 10px;
}
.scrolldots li {
width: 12px;
height: 12px;
list-style: none;
border-radius: 50%;
background-color: red;
margin: 0 5px;
float: left;
cursor: pointer;
}
.scrolldots .active {
background-color: white;
}
</style>
</head>
<body>
<div class="scrollparent">
<div class="scrollbanner">
<img src="1.jpg" width="310" height="232">
<img src="2.jpg" width="310" height="232">
<img src="3.jpg" width="310" height="232">
<img src="4.jpg" width="310" height="232">
<img src="5.jpg" width="310" height="232">
<img src="6.jpg" width="310" height="232">
</div>
<div class="scrolldots">
<ul>
<li class="active"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
<script src="jquery-1.11.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="jquery.pixviewer.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>
jquery.pixviewer.js
(function($) {
var i = 1,
$scroll = $('.scrollbanner'),
$img=$scroll.find('img'),
count = $img.length,
w=$img.width(),
timer = null,
interval = 5000;
//滚动部分宽度
$('.scrollparent .scrollbanner').width(w*count);
//序列宽度
var lt=($('.scrollparent').width()-$('.scrollparent .scrolldots').width())/2;
$('.scrollparent .scrolldots').css('left',lt+'px');
//滚动动画
function scrollBanner() {
if (!$scroll.is(':animated')) {
$scroll.animate({
left: -w * i
}, 'fast', function() {
$('.scrolldots li').removeClass('active').eq(i).addClass('active');
i++;
if (i == count) {
i = 0;
}
});
}
}
timer = setInterval(scrollBanner, interval);
$scroll.hover(function() {
clearInterval(timer);
}, function() {
timer = setInterval(scrollBanner, interval);
});
$('.scrolldots li').on('click', function() {
i = $(this).index();
$('.scrolldots li').removeClass('active').eq(i).addClass('active');
scrollBanner();
});
})(jQuery);
jquery的代码就不提供了，用户可以自行在网上下载，到此，大家可以拷贝以上代码放心使用了。
无js的焦点图效果，请点击：http://blog.csdn.net/pvfhv/article/details/5644179
![主流浏览器四大综合性能测试[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)