jQuery缩略图翻转全屏响应式幻灯片插件
来源：htmleaf
阅读：13
时间：2018-02-04 01:25
这是一款效果炫酷的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 < 0)="" current="total" -="" 1;="" flip="" the="" thumb="" $tf_thumbs.flip({="" direction="" :="" dir,="" speed="" :="" 400,="" onbefore="" :="" function(){="" the="" new="" thumb="" is="" set="" here="" var="" content='' ;="" content="" +='<img src="' +="" $tf_bg_images.eq(current).attr('longdesc')="" +="" '"="" alt="Thumb' + (current+1) + '" gt;';="" $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代码请参考下载文件。
版权所有 爱编程 © Copyright 2012. All Rights Reserved.
闽ICP备12017094号-3
闽ICP备12017094号-3