网站焦点图是一种网站内容的展现形式，可简单理解为一张图片或多张图片展现在网页上就是网站焦点图。在网站很明显的位置，用图片组合播放的形式，类似焦点新闻的意思只不过加上了图片。一般多使用在网站首页版面或频道首页版面，因为是通过图片的形式，所以有一定的吸引性、视觉吸引性。容易引起访问者的点击，据国外的设计机构调查统计，网站焦点图的点击率明显高于纯文字，转化率高于文字标题5倍。由此看来焦点图的能让游客对企业的第一印象大大提升，下面就给大家介绍一个我们项目中封装使用的漂亮大气的全屏焦点图。如下图所示：
/*
* jQuery图片轮播(焦点图)插件
*/
(function ($) {
$.fn.slideBox = function (options) {
var defaults = {
direction: 'left',
duration: 0.6,
easing: 'swing',
delay: 3,
startIndex: 0,
hideClickBar: true,
clickBarRadius: 5,
hideBottomBar: false
};
var settings = $.extend(defaults, options || {});
var wrapper = $(this),
ul = wrapper.children('ul.items'),
lis = ul.find('li'),
firstPic = lis.first().find('img');
var li_num = lis.size(),
li_height = 0,
li_width = 0;
var order_by = 'ASC';
var init = function () {
if (!wrapper.size()) return false;
li_height = lis.first().height();
li_width = lis.first().width();
wrapper.css({
width: li_width + 'px',
height: li_height + 'px'
});
lis.css({
width: li_width + 'px',
height: li_height + 'px'
});
if (settings.direction == 'left') {
ul.css('width', li_num * li_width + 'px')
} else {
ul.css('height', li_num * li_height + 'px')
};
ul.find('li:eq(' + settings.startIndex + ')').addClass('active');
if (!settings.hideBottomBar) {
var tips = $('<div class="tips"></div>').css('opacity', 0.6).appendTo(wrapper);
var title = $('<div class="title"></div>').html(function () {
var active = ul.find('li.active').find('a'),
text = active.attr('title'),
href = active.attr('href');
return $('<a>').attr('href', href).text(text)
}).appendTo(tips);
var nums = $('<div class="nums"></div>').hide().appendTo(tips);
lis.each(function (i, n) {
var a = $(n).find('a'),
text = a.attr('title'),
href = a.attr('href'),
css = '';
i == settings.startIndex && (css = 'active');
$('<a>').attr('href', href).text(text).addClass(css).css('borderRadius',
settings.clickBarRadius + 'px').mouseover(function () {
$(this).addClass('active').siblings().removeClass('active');
ul.find('li:eq(' + $(this).index() + ')').addClass('active').siblings
().removeClass('active');
start();
stop()
}).appendTo(nums)
});
if (settings.hideClickBar) {
tips.hover(function () {
nums.animate({
top: '0px'
},
'fast')
},
function () {
nums.animate({
top: tips.height() + 'px'
},
'fast')
});
nums.show().delay(2000).animate({
top: tips.height() + 'px'
},
'fast')
} else {
nums.show()
}
};
lis.size() > 1 && start()
};
var start = function () {
var active = ul.find('li.active'),
active_a = active.find('a');
var index = active.index();
if (settings.direction == 'left') {
offset = index * li_width * -1;
param = {
'left': offset + 'px'
}
} else {
offset = index * li_height * -1;
param = {
'top': offset + 'px'
}
};
wrapper.find('.nums').find('a:eq(' + index + ')').addClass('active').siblings().removeClass
('active');
wrapper.find('.title').find('a').attr('href', active_a.attr('href')).text(active_a.attr
('title'));
ul.stop().animate(param, settings.duration * 1000, settings.easing,
function () {
active.removeClass('active');
if (order_by == 'ASC') {
if (active.next().size()) {
active.next().addClass('active')
} else {
order_by = 'DESC';
active.prev().addClass('active')
}
} else if (order_by == 'DESC') {
if (active.prev().size()) {
active.prev().addClass('active')
} else {
order_by = 'ASC';
active.next().addClass('active')
}
}
});
wrapper.data('timeid', window.setTimeout(start, settings.delay * 1000))
};
var stop = function () {
window.clearTimeout(wrapper.data('timeid'))
};
wrapper.hover(function () {
stop()
},
function () {
start()
});
var imgLoader = new Image();
imgLoader.onload = function () {
imgLoader.onload = null;
init()
};
imgLoader.src = firstPic.attr('src')
}
})(jQuery);
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="Scripts/sliderbox.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$(".slideBox").slideBox();
})
</script>
</head>
<body>
<div class="slideBox" >
<ul class="items">
<li><a href="#" title="这里是测试标题一"><img src="/image/1.png" width="1000" height="300"></a></li>
<li><a href="#" title="这里是测试标题2"><img src="/image/2.png" width="1000" height="300"></a></li>
<li><a href="#" title="这里是测试标题3"><img src="/image/3.png" width="1000" height="300"></a></li>
<li><a href="#" title="这里是测试标题4"><img src="/image/4.png" width="1000" height="300"></a></li>
<li><a href="#" title="这里是测试标题5"><img src="/image/5.png" width="1000" height="300"></a></li>
</ul>
</div>
</body>
</html>
