这是一款效果炫酷的jQuery缩略图翻转全屏响应式幻灯片插件。该插件可以通过鼠标滚轮和键盘上下键进行导航。在缩略图上有一个放大缩小的按钮可以使背景图片退出全屏模式。它还是响应式的，你可以缩放浏览器看看效果。
在这个幻灯片插件中使用了图片翻转插件 Flip 来制作缩略图的翻转效果。使用 jQuery Mousewheel Plugin 来实现鼠标滚轮的控制。
插件中的精美插图“植物大战僵尸”来自于花瓣。
HTML
首先添加一个loading元素用于加载图片时显示：
<div id="tf_loading" class="tf_loading"></div>
使用一个全屏大小的div包住所有的图片：
<div id="tf_bg" class="tf_bg">
<img src="images/1.jpg" alt="Image 1" longdesc="images/thumbs/1.jpg" />
<img src="images/2.jpg" alt="Image 2" longdesc="images/thumbs/2.jpg"/>
<img src="images/3.jpg" alt="Image 3" longdesc="images/thumbs/3.jpg"/>
<img src="images/4.jpg" alt="Image 4" longdesc="images/thumbs/4.jpg"/>
<img src="images/5.jpg" alt="Image 5" longdesc="images/thumbs/5.jpg"/>
<img src="images/6.jpg" alt="Image 6" longdesc="images/thumbs/6.jpg"/>
<div class="tf_pattern"></div>
</div>
这里使用一个“longdesc”自定义属性来指定缩略图的位置。最后一个div用于叠加模式。
接着用一个div tf_content_wrapper来制作左边的图片描述信息。
<div id="tf_content_wrapper" class="tf_content_wrapper">
<div class="tf_content" id="content1" style="display:block;">
<h2>Dreamer</h2>
<p>Far far away, behind the word mountains, ... </p>
</div>
<div class="tf_content" id="content2">
...
</div>
...
</div>
右边的缩略图的结构如下：
<div id="tf_thumbs" class="tf_thumbs">
<span id="tf_zoom" class="tf_zoom"></span>
<img src="images/thumbs/1.jpg" alt="Thumb1"/>
</div>
span中的class tf_zoom或tf_fullscreen用于控制是否全屏模式。
最后添加一对前后导航按钮。
<div id="tf_next" class="tf_next"></div>
<div id="tf_prev" class="tf_prev"></div>
JAVASCRIPT
首先要引入jQuery和相关的js文件：
<script type="text/javascript" src="http://ajax.useso.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.useso.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/jquery.flip.js"></script>
<script type="text/javascript" src="js/jquery-mousewheel-3.0.4/jquery.mousewheel.min.js"></script>
添加预加载图片函数：
(function($) {
$.fn.preload = function(options) {
var opts = $.extend({}, $.fn.preload.defaults, options);
o = $.meta ? $.extend({}, opts, this.data()) : opts;
var c = this.length,
l = 0;
return this.each(function() {
var $i = $(this);
$('
').load(function(i){
++l;
if(l == c) o.onComplete();
}).attr('src',$i.attr('src'));
});
};
$.fn.preload.defaults = {
onComplete : function(){return false;}
};
})(jQuery);
接着设置一些变量参数：
var $tf_bg = $('#tf_bg'),
$tf_bg_images = $tf_bg.find('img'),
$tf_bg_img = $tf_bg_images.eq(0),
$tf_thumbs = $('#tf_thumbs'),
total = $tf_bg_images.length,
current = 0,
$tf_content_wrapper = $('#tf_content_wrapper'),
$tf_next = $('#tf_next'),
$tf_prev = $('#tf_prev'),
$tf_loading = $('#tf_loading');
接下来预加载图片：
$tf_bg_images.preload({
onComplete : function(){
$tf_loading.hide();
init();
}
});
然后使用参数函数显示第一张图片和初始化一些事件：
function init(){
//get dimentions for the image, based on the windows size
var dim = getImageDim($tf_bg_img);
//set the returned values and show the image
$tf_bg_img.css({
width : dim.width,
height : dim.height,
left : dim.left,
top : dim.top
}).fadeIn();
//resizing the window resizes the $tf_bg_img
$(window).bind('resize',function(){
var dim = getImageDim($tf_bg_img);
$tf_bg_img.css({
width : dim.width,
height : dim.height,
left : dim.left,
top : dim.top
});
});
//expand and fit the image to the screen
$('#tf_zoom').live('click',
function(){
if($tf_bg_img.is(':animated'))
return false;
var $this = $(this);
if($this.hasClass('tf_zoom')){
resize($tf_bg_img);
$this.addClass('tf_fullscreen')
.removeClass('tf_zoom');
}
else{
var dim = getImageDim($tf_bg_img);
$tf_bg_img.animate({
width : dim.width,
height : dim.height,
top : dim.top,
left : dim.left
},350);
$this.addClass('tf_zoom')
.removeClass('tf_fullscreen');
}
}
);
//click the arrow down, scrolls down
$tf_next.bind('click',function(){
if($tf_bg_img.is(':animated'))
return false;
scroll('tb');
});
//click the arrow up, scrolls up
$tf_prev.bind('click',function(){
if($tf_bg_img.is(':animated'))
return false;
scroll('bt');
});
//mousewheel events - down / up button trigger the scroll down / up
$(document).mousewheel(function(e, delta) {
if($tf_bg_img.is(':animated'))
return false;
if(delta > 0)
scroll('bt');
else
scroll('tb');
return false;
});
//key events - down / up button trigger the scroll down / up
$(document).keydown(function(e){
if($tf_bg_img.is(':animated'))
return false;
switch(e.which){
case 38:
scroll('bt');
break;
case 40:
scroll('tb');
break;
}
});
}
“scroll”函数用于控制前一张和后一张图片的显示：
function scroll(dir){
//if dir is "tb" (top -> bottom) increment current,
//else if "bt" decrement it
current = (dir == 'tb')?current + 1:current - 1;
//we want a circular slideshow,
//so we need to check the limits of current
if(current == total) current = 0;
else if(current ';
content +='<img src="' + $tf_bg_images.eq(current).attr('longdesc') + '" alt="Thumb' + (current+1) + '"/>';
$tf_thumbs.html(content);
}
});
//we get the next image
var $tf_bg_img_next = $tf_bg_images.eq(current),
//its dimentions
dim = getImageDim($tf_bg_img_next),
//the top should be one that makes the image out of the viewport
//the image should be positioned up or down depending on the direction
top = (dir == 'tb')?$(window).height() + 'px':-parseFloat(dim.height,10) + 'px';
//set the returned values and show the next image
$tf_bg_img_next.css({
width : dim.width,
height : dim.height,
left : dim.left,
top : top
}).show();
//now slide it to the viewport
$tf_bg_img_next.stop().animate({
top : dim.top
},1000);
//we want the old image to slide in the same direction, out of the viewport
var slideTo = (dir == 'tb')?-$tf_bg_img.height() + 'px':$(window).height() + 'px';
$tf_bg_img.stop().animate({
top : slideTo
},1000,function(){
//hide it
$(this).hide();
//the $tf_bg_img is now the shown image
$tf_bg_img = $tf_bg_img_next;
//show the description for the new image
$tf_content_wrapper.children()
.eq(current)
.show();
});
//hide the current description
$tf_content_wrapper.children(':visible')
.hide()
}
“resize”函数用于控制屏幕缩小放大时图片的响应式效果：
function resize($img){
var w_w = $(window).width(),
w_h = $(window).height(),
i_w = $img.width(),
i_h = $img.height(),
r_i = i_h / i_w,
new_w,new_h;
if(i_w > i_h){
new_w = w_w;
new_h = w_w * r_i;
if(new_h > w_h){
new_h = w_h;
new_w = w_h / r_i;
}
}
else{
new_h = w_w * r_i;
new_w = w_w;
}
$img.animate({
width : new_w + 'px',
height : new_h + 'px',
top : '0px',
left : '0px'
},350);
}
最后一个函数“getImageDim”用于获取图片的位置：
function getImageDim($img){
var w_w = $(window).width(),
w_h = $(window).height(),
r_w = w_h / w_w,
i_w = $img.width(),
i_h = $img.height(),
r_i = i_h / i_w,
new_w,new_h,
new_left,new_top;
if(r_w > r_i){
new_h = w_h;
new_w = w_h / r_i;
}
else{
new_h = w_w * r_i;
new_w = w_w;
}
return {
width : new_w + 'px',
height : new_h + 'px',
left : (w_w - new_w) / 2 + 'px',
top : (w_h - new_h) / 2 + 'px'
};
}
css代码请参考下载文件。
版权声明
版权说明： 仅限用于学习和研究目的；不得将上述内容用于商业和非法用途！否则一切后果自负。我们非常重视版权问题，如有侵权请邮件至（171373236#qq.com）与我们联系处理，敬请谅解！
