網站焦點圖是一種網站內容的展現形式，可簡單理解為一張圖片或多張圖片展現在網頁上就是網站焦點圖。在網站很明顯的位置，用圖片組合播放的形式，類似焦點新聞的意思只不過加上了圖片。一般多使用在網站首頁版面或頻道首頁版面，因為是通過圖片的形式，所以有一定的吸引性、視覺吸引性。容易引起訪問者的點擊，據國外的設計機構調查統計，網站焦點圖的點擊率明顯高于純文字，轉化率高于文字標題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>
