jQuery焦點(diǎn)圖切換特效插件封裝實(shí)例
更新時(shí)間：2013年08月18日 17:18:40 作者：
這篇文章介紹了jQuery焦點(diǎn)圖切換特效插件封裝實(shí)例，有需要的朋友可以參考一下
網(wǎng)站焦點(diǎn)圖是一種網(wǎng)站內(nèi)容的展現(xiàn)形式，可簡(jiǎn)單理解為一張圖片或多張圖片展現(xiàn)在網(wǎng)頁(yè)上就是網(wǎng)站焦點(diǎn)圖。在網(wǎng)站很明顯的位置，用圖片組合播放的形式，類似焦點(diǎn)新聞的意思只不過(guò)加上了圖片。一般多使用在網(wǎng)站首頁(yè)版面或頻道首頁(yè)版面，因?yàn)槭峭ㄟ^(guò)圖片的形式，所以有一定的吸引性、視覺(jué)吸引性。容易引起訪問(wèn)者的點(diǎn)擊，據(jù)國(guó)外的設(shè)計(jì)機(jī)構(gòu)調(diào)查統(tǒng)計(jì)，網(wǎng)站焦點(diǎn)圖的點(diǎn)擊率明顯高于純文字，轉(zhuǎn)化率高于文字標(biāo)題5倍。由此看來(lái)焦點(diǎn)圖的能讓游客對(duì)企業(yè)的第一印象大大提升，下面就給大家介紹一個(gè)我們項(xiàng)目中封裝使用的漂亮大氣的全屏焦點(diǎn)圖。如下圖所示：
可添加多個(gè) 圖片，設(shè)定圖片鏈接，導(dǎo)航隨鼠標(biāo)移動(dòng)切換圖片，在發(fā)布文章的時(shí)候把圖片壓縮了有點(diǎn)失真。
使用本特效首先需要引入對(duì)jquery的使用，插件已經(jīng)封裝成jquery函數(shù)，代碼如下：
復(fù)制代碼 代碼如下:
/*
* jQuery圖片輪播(焦點(diǎn)圖)插件
*/
(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);
下面是圖片焦點(diǎn)圖的css樣式;
復(fù)制代碼 代碼如下:
div.slideBox{ position:relative;height:300px; overflow:hidden; margin:0 auto;}
div.slideBox ul.items{ position:absolute; float:left; background:none; list-style:none; padding:0px; margin:0px;}
div.slideBox ul.items li{ float:left; background:none; list-style:none; padding:0px; margin:0px;}
div.slideBox ul.items li a{ float:left; line-height:normal !important; padding:0px !important; border:none/*For IE.ADD.JENA.201206300844*/;}
div.slideBox ul.items li a img{ margin:0px !important; padding:0px !important; display:block; border:none/*For IE.ADD.JENA.201206300844*/;}
div.slideBox div.tips{ position:absolute; bottom:0px; width:100%; height:50px; background-color:#000; overflow:hidden;}
div.slideBox div.tips div.title{ position:absolute; left:0px; top:0px; height:100%;}
div.slideBox div.tips div.title a{ color:#FFF; font-size:18px; line-height:50px; margin-left:10px; text-decoration:none;}
div.slideBox div.tips div.title a:hover{ text-decoration:underline !important;}
div.slideBox div.tips div.nums{ position:absolute; right:0px; top:0px; height:100%;}
div.slideBox div.tips div.nums a{ display:inline-block; >float:left/*For IE.ADD.JENA.201206300844*/; width:20px; height:20px; background-color:#FFF; text-indent:-99999px; margin:15px 10px 0px 0px;}
div.slideBox div.tips div.nums a.active{ background-color:#093;}
頁(yè)面配置：
復(fù)制代碼 代碼如下:
<!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="這里是測(cè)試標(biāo)題一"><img src="/image/1.png" width="1000" height="300"></a></li>
<li><a href="#" title="這里是測(cè)試標(biāo)題2"><img src="/image/2.png" width="1000" height="300"></a></li>
<li><a href="#" title="這里是測(cè)試標(biāo)題3"><img src="/image/3.png" width="1000" height="300"></a></li>
<li><a href="#" title="這里是測(cè)試標(biāo)題4"><img src="/image/4.png" width="1000" height="300"></a></li>
<li><a href="#" title="這里是測(cè)試標(biāo)題5"><img src="/image/5.png" width="1000" height="300"></a></li>
</ul>
</div>
</body>
</html>
只需引入js并在頁(yè)面中調(diào)用$(選擇器).slideBox();便可實(shí)現(xiàn)如上效果，同時(shí)我們也可以在sliebox({})里面指定操作，比如起始圖片，方向等。
這個(gè)是在前段時(shí)間一個(gè)項(xiàng)目中用到的圖片輪播器插件，感覺(jué)還可以的可以直接拿來(lái)用。
相關(guān)文章
jQuery+css3實(shí)現(xiàn)文字跟隨鼠標(biāo)的上下抖動(dòng)
這篇文章主要介紹了jQuery+css3實(shí)現(xiàn)文字跟隨鼠標(biāo)的上下抖動(dòng)的相關(guān)資料,需要的朋友可以參考下2015-07-07
jQuery藍(lán)色風(fēng)格滑動(dòng)導(dǎo)航欄代碼分享
這篇文章主要為大家詳細(xì)介紹了jQuery藍(lán)色風(fēng)格滑動(dòng)導(dǎo)航欄特效，實(shí)現(xiàn)滑塊跟隨鼠標(biāo)左右滑動(dòng)，簡(jiǎn)單、時(shí)尚、大方，有需要的小伙伴可以參考下2015-08-08
剛看到個(gè)問(wèn)題，如何得知同時(shí)按下了哪幾個(gè)鍵以及按鍵順序（難道是格斗游戲的組合鍵？），其實(shí)jQuery實(shí)現(xiàn)起來(lái)是很簡(jiǎn)單的。2010-03-03
jQuery實(shí)現(xiàn)動(dòng)態(tài)表單驗(yàn)證時(shí)文本框抖動(dòng)效果完整實(shí)例
這篇文章主要介紹了jQuery實(shí)現(xiàn)動(dòng)態(tài)表單驗(yàn)證時(shí)文本框抖動(dòng)效果,可實(shí)現(xiàn)表單元素左右晃動(dòng)的抖動(dòng)功能,涉及jquery中元素的匹配與動(dòng)畫(huà)animate效果實(shí)現(xiàn)技巧,需要的朋友可以參考下2015-08-08
jQuery學(xué)習(xí)筆記(2)--用jquery實(shí)現(xiàn)各種模態(tài)提示框代碼及項(xiàng)目構(gòu)架
想實(shí)現(xiàn)一個(gè)模態(tài)的框框，找了很多的jquery插件，都沒(méi)有碰到自己滿意的于是自己摸索了一個(gè)，接下來(lái)為大家介紹下實(shí)現(xiàn)的思路及代碼，希望對(duì)你有所幫助2013-04-04
jQuery基礎(chǔ)知識(shí)點(diǎn)總結(jié)(必看)
下面小編就為大家?guī)?lái)一篇jQuery基礎(chǔ)知識(shí)點(diǎn)總結(jié)(必看)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-05-05
使用jQuery同時(shí)控制四張圖片的伸縮實(shí)現(xiàn)代碼
控制圖片的伸縮想必大家都有看到過(guò)吧，不過(guò)同時(shí)控制四張圖片的伸縮卻不是那么的常見(jiàn)吧，接下來(lái)為大家詳細(xì)介紹下jQuery同時(shí)控制四張圖片的伸縮2013-04-04
利用jquery動(dòng)畫(huà)特效和css打造的側(cè)邊彈出垂直導(dǎo)航
這是一款側(cè)邊彈出垂直導(dǎo)航，整個(gè)彈出過(guò)程比較流暢，而且代碼很簡(jiǎn)單,需要的朋友可以參考下2014-04-04
本篇文章為大家分析了在ajax進(jìn)行數(shù)據(jù)請(qǐng)求的時(shí)候遇到的問(wèn)題以及解決辦法，一起參考學(xué)習(xí)下。2018-01-01
基于jquery實(shí)現(xiàn)的一個(gè)選擇中國(guó)大學(xué)的彈框 (數(shù)據(jù)、步驟、代碼)
基于jquery實(shí)現(xiàn)的一個(gè)選擇中國(guó)大學(xué)的彈框，需要的朋友可以參考下2012-07-07