以下是 jQuery按钮缩略图预览滑块js代码 的示例演示效果:
部分效果截图1:
部分效果截图2:
HTML代码(index.html):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Thumbnails Preview Slider with jQuery</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="description" content="Thumbnails Preview Slider with jQuery" />
<meta name="keywords" content="slider, jquery, preview, thumbnails, animation, zoom, easing"/>
<link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/thumbnail_slider.css" />
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Cantarell">
</head>
<body>
<div class="container">
<div class="content">
<h1>Thumbnails Preview Slider with jQuery</h1>
<div id="demo1" class="demo">
<h2><span>Demo 1</span> with small thumbnails:</h2>
<ul class="ts_container">
<li><a href="#">Image 1</a></li>
<li><a href="#">Image 2</a></li>
<li><a href="#">Image 3</a></li>
<li><a href="#">Image 4</a></li>
<li><a href="#">Image 5</a></li>
<li><a href="#">Image 6</a></li>
<li><a href="#">Image 7</a></li>
<li><a href="#">Image 8</a></li>
<li><a href="#">Image 9</a></li>
<li><a href="#">Image 10</a></li>
<li class="ts_thumbnails"> <!-- animate to slide frame -->
<div class="ts_preview_wrapper">
<ul class="ts_preview"><!-- animate left to slide to the right thumb -->
<li><img src="images/thumbs1/1.jpg" alt="Thumb 1" /></li>
<li><img src="images/thumbs1/2.jpg" alt="Thumb 2" /></li>
<li><img src="images/thumbs1/3.jpg" alt="Thumb 3" /></li>
<li><img src="images/thumbs1/4.jpg" alt="Thumb 4" /></li>
<li><img src="images/thumbs1/5.jpg" alt="Thumb 5" /></li>
<li><img src="images/thumbs1/6.jpg" alt="Thumb 6" /></li>
<li><img src="images/thumbs1/7.jpg" alt="Thumb 7" /></li>
<li><img src="images/thumbs1/8.jpg" alt="Thumb 8" /></li>
<li><img src="images/thumbs1/9.jpg" alt="Thumb 9" /></li>
<li><img src="images/thumbs1/10.jpg" alt="Thumb 10" /></li>
</ul>
</div>
<span></span>
</li>
</ul>
</div>
<div id="demo2" class="demo">
<h2><span>Demo 2</span> with medium thumbnails and easing:</h2>
<ul class="ts_container">
<li><a href="">Image 1</a></li>
<li><a href="">Image 2</a></li>
<li><a href="">Image 3</a></li>
<li><a href="">Image 4</a></li>
<li><a href="">Image 5</a></li>
<li><a href="">Image 6</a></li>
<li><a href="">Image 7</a></li>
<li><a href="">Image 8</a></li>
<li><a href="">Image 9</a></li>
<li><a href="">Image 10</a></li>
<li class="ts_thumbnails">
<div class="ts_preview_wrapper">
<ul class="ts_preview">
<li><img src="images/thumbs2/1.jpg" alt="Thumb 1" /></li>
<li><img src="images/thumbs2/2.jpg" alt="Thumb 2" /></li>
<li><img src="images/thumbs2/3.jpg" alt="Thumb 3" /></li>
<li><img src="images/thumbs2/4.jpg" alt="Thumb 4" /></li>
<li><img src="images/thumbs2/5.jpg" alt="Thumb 5" /></li>
<li><img src="images/thumbs2/6.jpg" alt="Thumb 6" /></li>
<li><img src="images/thumbs2/7.jpg" alt="Thumb 7" /></li>
<li><img src="images/thumbs2/8.jpg" alt="Thumb 8" /></li>
<li><img src="images/thumbs2/9.jpg" alt="Thumb 9" /></li>
<li><img src="images/thumbs2/10.jpg" alt="Thumb 10" /></li>
</ul>
</div>
<span></span>
</li>
</ul>
</div>
<div id="demo3" class="demo">
<h2><span>Demo 3</span> with large thumbnails:</h2>
<ul class="ts_container">
<li><a href="">Image 1</a></li>
<li><a href="">Image 2</a></li>
<li><a href="">Image 3</a></li>
<li><a href="">Image 4</a></li>
<li><a href="">Image 5</a></li>
<li><a href="">Image 6</a></li>
<li class="ts_thumbnails">
<div class="ts_preview_wrapper">
<ul class="ts_preview">
<li><img src="images/thumbs3/1.jpg" alt="Thumb 1" /></li>
<li><img src="images/thumbs3/2.jpg" alt="Thumb 2" /></li>
<li><img src="images/thumbs3/3.jpg" alt="Thumb 3" /></li>
<li><img src="images/thumbs3/4.jpg" alt="Thumb 4" /></li>
<li><img src="images/thumbs3/5.jpg" alt="Thumb 5" /></li>
<li><img src="images/thumbs3/6.jpg" alt="Thumb 6" /></li>
</ul>
</div>
<span></span>
</li>
</ul>
</div>
<div id="demo4" class="demo">
<h2><span>Demo 4</span> with large thumbnails and zoom:</h2>
<ul class="ts_container">
<li><a href="">Image 1</a></li>
<li><a href="">Image 2</a></li>
<li><a href="">Image 3</a></li>
<li><a href="">Image 4</a></li>
<li><a href="">Image 5</a></li>
<li><a href="">Image 6</a></li>
<li class="ts_thumbnails">
<div class="ts_preview_wrapper">
<ul class="ts_preview">
<li><img src="images/thumbs3/1.jpg" alt="Thumb 1" /></li>
<li><img src="images/thumbs3/2.jpg" alt="Thumb 2" /></li>
<li><img src="images/thumbs3/3.jpg" alt="Thumb 3" /></li>
<li><img src="images/thumbs3/4.jpg" alt="Thumb 4" /></li>
<li><img src="images/thumbs3/5.jpg" alt="Thumb 5" /></li>
<li><img src="images/thumbs3/6.jpg" alt="Thumb 6" /></li>
</ul>
</div>
<span></span>
</li>
</ul>
</div>
</div>
</div>
<!-- The JavaScript -->
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript">
(function($) {
$.fn.thumbnailSlider = function(options) {
var opts = $.extend({}, $.fn.thumbnailSlider.defaults, options);
return this.each(function() {
var $this = $(this),
o = $.meta ? $.extend({}, opts, $pxs_container.data()) : opts;
var $ts_container = $this.children('.ts_container'),
$ts_thumbnails = $ts_container.children('.ts_thumbnails'),
$nav_elems = $ts_container.children('li').not($ts_thumbnails),
total_elems = $nav_elems.length,
$ts_preview_wrapper = $ts_thumbnails.children('.ts_preview_wrapper'),
$arrow = $ts_thumbnails.children('span'),
$ts_preview = $ts_preview_wrapper.children('.ts_preview');
/*
calculate sizes for $ts_thumbnails:
width -> width thumbnail + border (2*5)
height -> height thumbnail + border + triangle height(6)
top -> -(height plus margin of 5)
left -> leftDot - 0.5*width + 0.5*widthNavDot
this will be set when hovering the nav,
and the default value will correspond to the first nav dot
*/
var w_ts_thumbnails = o.thumb_width + 2*5,
h_ts_thumbnails = o.thumb_height + 2*5 + 6,
t_ts_thumbnails = -(h_ts_thumbnails + 5),
$first_nav = $nav_elems.eq(0),
l_ts_thumbnails = $first_nav.position().left - 0.5*w_ts_thumbnails + 0.5*$first_nav.width();
$ts_thumbnails.css({
width : w_ts_thumbnails + 'px',
height : h_ts_thumbnails + 'px',
top : t_ts_thumbnails + 'px',
left : l_ts_thumbnails + 'px'
});
/*
calculate the top and left for the arrow of the tooltip
top -> thumb height + border(2*5)
left -> (thumb width + border)/2 -width/2
*/
var t_arrow = o.thumb_height + 2*5,
l_arrow = (o.thumb_width + 2*5) / 2 - $arrow.width() / 2;
$arrow.css({
left : l_arrow + 'px',
top : t_arrow + 'px'
});
/*
calculate the $ts_preview width -> thumb width times number of thumbs
*/
$ts_preview.css('width' , total_elems*o.thumb_width + 'px');
/*
set the $ts_preview_wrapper width and height -> thumb width / thumb height
*/
$ts_preview_wrapper.css({
width : o.thumb_width + 'px',
height : o.thumb_height + 'px'
});
//hover the nav elems
$nav_elems.bind('mouseenter',function(){
var $nav_elem = $(this),
idx = $nav_elem.index();
/*
calculate the new left
for $ts_thumbnails
*/
var new_left = $nav_elem.position().left - 0.5*w_ts_thumbnails + 0.5*$nav_elem.width();
$ts_thumbnails.stop(true)
.show()
.animate({
left : new_left + 'px'
},o.speed,o.easing);
/*
animate the left of the $ts_preview to show the right thumb
*/
$ts_preview.stop(true)
.animate({
left : -idx*o.thumb_width + 'px'
},o.speed,o.easing);
//zoom in the thumb image if zoom is true
if(o.zoom && o.zoomratio > 1){
var new_width = o.zoomratio * o.thumb_width,
new_height = o.zoomratio * o.thumb_height;
//increase the $ts_preview width in order to fit the zoomed image
var ts_preview_w = $ts_preview.width();
$ts_preview.css('width' , (ts_preview_w - o.thumb_width + new_width) + 'px');
$ts_preview.children().eq(idx).find('img').stop().animate({
width : new_width + 'px',
height : new_height + 'px'
},o.zoomspeed);
}
}).bind('mouseleave',function(){
//if zoom set the width and height to defaults
if(o.zoom && o.zoomratio > 1){
var $nav_elem = $(this),
idx = $nav_elem.index();
$ts_preview.children().eq(idx).find('img').stop().css({
width : o.thumb_width + 'px',
height : o.thumb_height + 'px'
});
}
$ts_thumbnails.stop(true)
.hide();
}).bind('click',function(){
var $nav_elem = $(this),
idx = $nav_elem.index();
o.onClick(idx);
});
});
};
$.fn.thumbnailSlider.defaults = {
speed : 100,//speed of each slide animation
easing : 'jswing',//easing effect for the slide animation
thumb_width : 75,//your photos width
thumb_height: 75,//your photos height
zoom : false,//zoom animation for the thumbs
zoomratio : 1.3,//multiplicator for zoom (must be > 1)
zoomspeed : 15000,//speed of zoom animation
onClick : function(){return false;}//click callback
};
})(jQuery);
</script>
<script type="text/javascript">
$(function() {
//demo1
$('#demo1').thumbnailSlider();
//demo2
$('#demo2').thumbnailSlider({
thumb_width : 130,
thumb_height: 87,
easing : 'easeOutExpo',//easeInBack
speed : 600
});
//demo3
$('#demo3').thumbnailSlider({
thumb_width : 174,
thumb_height: 260,
speed : 200
});
//demo4
$('#demo4').thumbnailSlider({
thumb_width : 174,
thumb_height: 260,
speed : 200,
zoom : true,
zoomspeed : 3000,
zoomratio : 1.7
});
});
</script>
</body>
</html>
JS代码(jquery.easing.1.3.js):
/* * jQuery Easing v1.3 - http://gsgd.co.uk/sandbox/jquery/easing/ * * Uses the built in easing capabilities added In jQuery 1.1 * to offer multiple easing options * * TERMS OF USE - jQuery Easing * * Open source under the BSD License. * * Copyright © 2008 George McGinley Smith * All rights reserved. * * Redistribution and use in source and binary forms,with or without modification,* are permitted provided that the following conditions are met:* * Redistributions of source code must retain the above copyright notice,this list of * conditions and the following disclaimer. * Redistributions in binary form must reproduce the above copyright notice,this list * of conditions and the following disclaimer in the documentation and/or other materials * provided with the distribution. * * Neither the name of the author nor the names of contributors may be used to endorse * or promote products derived from this software without specific prior written permission. * * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY * EXPRESS OR IMPLIED WARRANTIES,INCLUDING,BUT NOT LIMITED TO,THE IMPLIED WARRANTIES OF * MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE * COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT,INDIRECT,INCIDENTAL,SPECIAL,* EXEMPLARY,OR CONSEQUENTIAL DAMAGES (INCLUDING,BUT NOT LIMITED TO,PROCUREMENT OF SUBSTITUTE * GOODS OR SERVICES;
LOSS OF USE,DATA,OR PROFITS;
OR BUSINESS INTERRUPTION) HOWEVER CAUSED * AND ON ANY THEORY OF LIABILITY,WHETHER IN CONTRACT,STRICT LIABILITY,OR TORT (INCLUDING * NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE,EVEN IF ADVISED * OF THE POSSIBILITY OF SUCH DAMAGE. **/
// t:current time,b:begInnIng value,c:change In value,d:durationjQuery.easing['jswing'] = jQuery.easing['swing'];
jQuery.extend( jQuery.easing,{
def:'easeOutQuad',swing:function (x,t,b,c,d){
//alert(jQuery.easing.default);
return jQuery.easing[jQuery.easing.def](x,t,b,c,d);
}
,easeInQuad:function (x,t,b,c,d){
return c*(t/=d)*t + b;
}
,easeOutQuad:function (x,t,b,c,d){
return -c *(t/=d)*(t-2) + b;
}
,easeInOutQuad:function (x,t,b,c,d){
if ((t/=d/2) < 1) return c/2*t*t + b;
return -c/2 * ((--t)*(t-2) - 1) + b;
}
,easeInCubic:function (x,t,b,c,d){
return c*(t/=d)*t*t + b;
}
,easeOutCubic:function (x,t,b,c,d){
return c*((t=t/d-1)*t*t + 1) + b;
}
,easeInOutCubic:function (x,t,b,c,d){
if ((t/=d/2) < 1) return c/2*t*t*t + b;
return c/2*((t-=2)*t*t + 2) + b;
}
,easeInQuart:function (x,t,b,c,d){
return c*(t/=d)*t*t*t + b;
}
,easeOutQuart:function (x,t,b,c,d){
return -c * ((t=t/d-1)*t*t*t - 1) + b;
}
,easeInOutQuart:function (x,t,b,c,d){
if ((t/=d/2) < 1) return c/2*t*t*t*t + b;
return -c/2 * ((t-=2)*t*t*t - 2) + b;
}
,easeInQuint:function (x,t,b,c,d){
return c*(t/=d)*t*t*t*t + b;
}
,easeOutQuint:function (x,t,b,c,d){
return c*((t=t/d-1)*t*t*t*t + 1) + b;
}
,easeInOutQuint:function (x,t,b,c,d){
if ((t/=d/2) < 1) return c/2*t*t*t*t*t + b;
return c/2*((t-=2)*t*t*t*t + 2) + b;
}
,easeInSine:function (x,t,b,c,d){
return -c * Math.cos(t/d * (Math.PI/2)) + c + b;
}
,easeOutSine:function (x,t,b,c,d){
return c * Math.sin(t/d * (Math.PI/2)) + b;
}
,easeInOutSine:function (x,t,b,c,d){
return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b;
}
,easeInExpo:function (x,t,b,c,d){
return (t==0) ? b:c * Math.pow(2,10 * (t/d - 1)) + b;
}
,easeOutExpo:function (x,t,b,c,d){
return (t==d) ? b+c:c * (-Math.pow(2,-10 * t/d) + 1) + b;
}
,easeInOutExpo:function (x,t,b,c,d){
if (t==0) return b;
if (t==d) return b+c;
if ((t/=d/2) < 1) return c/2 * Math.pow(2,10 * (t - 1)) + b;
return c/2 * (-Math.pow(2,-10 * --t) + 2) + b;
}
,easeInCirc:function (x,t,b,c,d){
return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b;
}
,easeOutCirc:function (x,t,b,c,d){
return c * Math.sqrt(1 - (t=t/d-1)*t) + b;
}
,easeInOutCirc:function (x,t,b,c,d){
if ((t/=d/2) < 1) return -c/2 * (Math.sqrt(1 - t*t) - 1) + b;
return c/2 * (Math.sqrt(1 - (t-=2)*t) + 1) + b;
}
,easeInElastic:function (x,t,b,c,d){
var s=1.70158;
var p=0;
var a=c;
if (t==0) return b;
if ((t/=d)==1) return b+c;
if (!p) p=d*.3;
if (a < Math.abs(c)){
a=c;
var s=p/4;
}
else var s = p/(2*Math.PI) * Math.asin (c/a);
return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
}
,easeOutElastic:function (x,t,b,c,d){
var s=1.70158;
var p=0;
var a=c;
if (t==0) return b;
if ((t/=d)==1) return b+c;
if (!p) p=d*.3;
if (a < Math.abs(c)){
a=c;
var s=p/4;
}
else var s = p/(2*Math.PI) * Math.asin (c/a);
return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
}
,easeInOutElastic:function (x,t,b,c,d){
var s=1.70158;
var p=0;
var a=c;
if (t==0) return b;
if ((t/=d/2)==2) return b+c;
if (!p) p=d*(.3*1.5);
if (a < Math.abs(c)){
a=c;
var s=p/4;
}
else var s = p/(2*Math.PI) * Math.asin (c/a);
if (t < 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b;
}
,easeInBack:function (x,t,b,c,d,s){
if (s == undefined) s = 1.70158;
return c*(t/=d)*t*((s+1)*t - s) + b;
}
,easeOutBack:function (x,t,b,c,d,s){
if (s == undefined) s = 1.70158;
return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
}
,easeInOutBack:function (x,t,b,c,d,s){
if (s == undefined) s = 1.70158;
if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
}
,easeInBounce:function (x,t,b,c,d){
return c - jQuery.easing.easeOutBounce (x,d-t,0,c,d) + b;
}
,easeOutBounce:function (x,t,b,c,d){
if ((t/=d) < (1/2.75)){
return c*(7.5625*t*t) + b;
}
else if (t < (2/2.75)){
return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
}
else if (t < (2.5/2.75)){
return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
}
else{
return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
}
}
,easeInOutBounce:function (x,t,b,c,d){
if (t < d/2) return jQuery.easing.easeInBounce (x,t*2,0,c,d) * .5 + b;
return jQuery.easing.easeOutBounce (x,t*2-d,0,c,d) * .5 + c*.5 + b;
}
}
);
/* * * TERMS OF USE - EASING EQUATIONS * * Open source under the BSD License. * * Copyright © 2001 Robert Penner * All rights reserved. * * Redistribution and use in source and binary forms,with or without modification,* are permitted provided that the following conditions are met:* * Redistributions of source code must retain the above copyright notice,this list of * conditions and the following disclaimer. * Redistributions in binary form must reproduce the above copyright notice,this list * of conditions and the following disclaimer in the documentation and/or other materials * provided with the distribution. * * Neither the name of the author nor the names of contributors may be used to endorse * or promote products derived from this software without specific prior written permission. * * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY * EXPRESS OR IMPLIED WARRANTIES,INCLUDING,BUT NOT LIMITED TO,THE IMPLIED WARRANTIES OF * MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE * COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT,INDIRECT,INCIDENTAL,SPECIAL,* EXEMPLARY,OR CONSEQUENTIAL DAMAGES (INCLUDING,BUT NOT LIMITED TO,PROCUREMENT OF SUBSTITUTE * GOODS OR SERVICES;
LOSS OF USE,DATA,OR PROFITS;
OR BUSINESS INTERRUPTION) HOWEVER CAUSED * AND ON ANY THEORY OF LIABILITY,WHETHER IN CONTRACT,STRICT LIABILITY,OR TORT (INCLUDING * NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE,EVEN IF ADVISED * OF THE POSSIBILITY OF SUCH DAMAGE. * */
CSS代码(style.css):
*{margin:0;padding:0;}
html,body{margin:0;padding:0;height:100%;}
body{font-family:'Trebuchet MS','Myriad Pro',Arial,sans-serif;font-size:14px;background:#f4f4f4 url(../images/bg_grid.png) repeat top left;color:#333;text-shadow:1px 1px 1px #fff;}
.header{text-align:center;display:block;position:relative;height:35px;clear:both;background:#000 url(../images/stripe.gif) repeat top left;margin-bottom:30px;border-bottom:7px solid #ccc;font-size:11px;line-height:35px;text-align:right;font-style:italic;overflow:hidden;width:100%;}
.header a{color:#aaa;text-shadow:1px 1px 1px #000;padding:0px 20px;outline:none;}
.header a:hover{color:#fff;}
.header a.back{color:#1B80B5;font-weight:bold;display:block;float:right;}
.header a.back:hover{color:#fff;}
.container{position:relative;/* needed for footer positioning*/
margin:0 auto;/* center,not in IE5 */
width:100%;height:auto !important;/* real browsers */
height:100%;/* IE6:treaded as min-height*/
min-height:100%;/* real browsers */
}
.left{float:left;}
.right{float:right;}
h1{font-size:42px;font-family:'Cantarell';font-weight:100;letter-spacing:-1px;}
h2{font-size:20px;text-indent:4px;font-weight:normal;font-style:italic;color:#a1a1a1;padding:5px 0px 20px 0px;}
h2 span{color:#444;}
a{color:#777;text-decoration:none;}
a:hover{color:#222;}
p{padding:5px 0px;}
.content{width:960px;margin:0 auto;padding-bottom:50px;/* Footer Padding */
}
.footer{position:absolute;width:100%;height:50px;line-height:50px;bottom:0;/* stick to bottom */
background:#f0f0f0;border-top:7px solid #ccc;text-align:center;text-shadow:1px 1px 1px #000;color:#fff;background:#000 url(../images/stripe.gif) repeat top left;}
.footer a{color:#aaa;padding:0px 10px;text-shadow:1px 1px 1px #000;}
.footer a:hover{color:#fff;text-shadow:0px 0px 1px #fff;}
.demo{margin:30px 0px;padding:20px;border:1px solid #ddd;background:#f4f4f4;-moz-box-shadow:0px 0px 1px #fff;-webkit-box-shadow:0px 0px 1px #fff;box-shadow:0px 0px 1px #fff;}
分享到QQ
分享到微博
微信扫一扫
