jquery ui图片滑块幻灯片展示特效代码下载


jquery ui图片滑块幻灯片展示特效代码下载
jquery ui图片滑块幻灯片展示特效代码下载以及图片滑块、幻灯片展示等js/jquery网页特效代码下载。

1. 引入CSS

<link rel="stylesheet" href="css/jquery.ui.theme.css" type="text/css" media="all" />
<link rel="stylesheet" href="css/jquery.ui.core.css" type="text/css" media="all" />
<link rel="stylesheet" href="css/jquery.ui.slider.css" type="text/css" media="all" />
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>
<link rel="stylesheet" href="css/thumbnail_slider.css" type="text/css" media="screen"/>

2. 引入JS

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/jquery.ba-hashchange.min.js"></script>
<script type="text/javascript" src="js/jquery-mousewheel-3.0.4/jquery.mousewheel.min.js"></script>

3. HTML代码

<div class="header">
	<h1>图片滑块幻灯片</h1>
	<div id="pg_scrollWrapper" class="pg_scrollWrapper">
		<div id="slider" class="slider"></div>
	</div>
	<a href="https://www.51qianduan.com/">51前端</a>
</div>
<div class="wall">
	<div id="pg_container" class="pg_container">
		<ul id="pg_photos" class="pg_photos"><!-- calculate top-->
			<li><a href="#1"><img src="images/1.jpg" alt="Here comes a description"/></a></li>
			<li><a href="#2"><img src="images/2.jpg" alt="A description"/></a></li>
			<li><a href="#3"><img src="images/3.jpg" alt="Another descritpion of the image"/></a></li>
			<li><a href="#4"><img src="images/4.jpg" alt="Here comes a description"/></a></li>
			<li><a href="#5"><img src="images/5.jpg" alt="Here comes a description"/></a></li>
			<li><a href="#6"><img src="images/6.jpg" alt="Here comes a description"/></a></li>
			<li><a href="#7"><img src="images/7.jpg" alt="Here comes a description"/></a></li>
			<li><a href="#8"><img src="images/8.jpg" alt="Here comes a description"/></a></li>
			<li><a href="#9"><img src="images/9.jpg" alt="Here comes a description"/></a></li>
			<li><a href="#10"><img src="images/10.jpg" alt="Here comes a description"/></a></li>
			<li><a href="#11"><img src="images/11.jpg" alt="Here comes a description"/></a></li>
			<li><a href="#12"><img src="images/12.jpg" alt="Here comes a description"/></a></li>
			<li><a href="#13"><img src="images/13.jpg" alt="Here comes a description"/></a></li>
			<li><a href="#14"><img src="images/14.jpg" alt="Here comes a description"/></a></li>
			<li><a href="#15"><img src="images/1.jpg" alt="Here comes a description"/></a></li>
			<li><a href="#16"><img src="images/2.jpg" alt="Here comes a description"/></a></li>
			<li><a href="#17"><img src="images/3.jpg" alt="Here comes a description"/></a></li>
			<li><a href="#18"><img src="images/4.jpg" alt="Here comes a description"/></a></li>
			<li><a href="#19"><img src="images/5.jpg" alt="Here comes a description"/></a></li>
			<li><a href="#20"><img src="images/6.jpg" alt="Here comes a description"/></a></li>
			<li><a href="#21"><img src="images/7.jpg" alt="Here comes a description"/></a></li>
			<li><a href="#22"><img src="images/8.jpg" alt="Here comes a description"/></a></li>
			<li><a href="#23"><img src="images/9.jpg" alt="Here comes a description"/></a></li>
			<li><a href="#24"><img src="images/10.jpg" alt="Here comes a description"/></a></li>
			<li><a href="#25"><img src="images/11.jpg" alt="Here comes a description"/></a></li>
			<li><a href="#26"><img src="images/12.jpg" alt="Here comes a description"/></a></li>
			<li><a href="#27"><img src="images/13.jpg" alt="Here comes a description"/></a></li>
			<li><a href="#28"><img src="images/14.jpg" alt="Here comes a description"/></a></li>
		</ul>
	</div>
</div>
<div class="footer">
	<div class="thumbnailSlider" id="thumbnailSlider">
		<ul class="ts_container">
			<li><a href="#1">Image 1</a></li>
			<li><a href="#2">Image 2</a></li>
			<li><a href="#3">Image 3</a></li>
			<li><a href="#4">Image 4</a></li>
			<li><a href="#5">Image 5</a></li>
			<li><a href="#6">Image 6</a></li>
			<li><a href="#7">Image 7</a></li>
			<li><a href="#8">Image 8</a></li>
			<li><a href="#9">Image 9</a></li>
			<li><a href="#10">Image 10</a></li>
			<li><a href="#11">Image 11</a></li>
			<li><a href="#12">Image 12</a></li>
			<li><a href="#13">Image 13</a></li>
			<li><a href="#14">Image 14</a></li>
			<li><a href="#15">Image 1</a></li>
			<li><a href="#16">Image 2</a></li>
			<li><a href="#17">Image 3</a></li>
			<li><a href="#18">Image 4</a></li>
			<li><a href="#19">Image 5</a></li>
			<li><a href="#20">Image 6</a></li>
			<li><a href="#21">Image 7</a></li>
			<li><a href="#22">Image 8</a></li>
			<li><a href="#23">Image 9</a></li>
			<li><a href="#24">Image 10</a></li>
			<li><a href="#25">Image 11</a></li>
			<li><a href="#26">Image 12</a></li>
			<li><a href="#27">Image 13</a></li>
			<li><a href="#28">Image 14</a></li>
			<li class="ts_thumbnails">
				<div class="ts_preview_wrapper">
					<ul class="ts_preview">
						<li><img src="images/thumbs/1.jpg" alt="Thumb 1" /></li>
						<li><img src="images/thumbs/2.jpg" alt="Thumb 2" /></li>
						<li><img src="images/thumbs/3.jpg" alt="Thumb 3" /></li>
						<li><img src="images/thumbs/4.jpg" alt="Thumb 4" /></li>
						<li><img src="images/thumbs/5.jpg" alt="Thumb 5" /></li>
						<li><img src="images/thumbs/6.jpg" alt="Thumb 6" /></li>
						<li><img src="images/thumbs/7.jpg" alt="Thumb 7" /></li>
						<li><img src="images/thumbs/8.jpg" alt="Thumb 8" /></li>
						<li><img src="images/thumbs/9.jpg" alt="Thumb 9" /></li>
						<li><img src="images/thumbs/10.jpg" alt="Thumb 10" /></li>
						<li><img src="images/thumbs/11.jpg" alt="Thumb 11" /></li>
						<li><img src="images/thumbs/12.jpg" alt="Thumb 12" /></li>
						<li><img src="images/thumbs/13.jpg" alt="Thumb 13" /></li>
						<li><img src="images/thumbs/14.jpg" alt="Thumb 14" /></li>
						<li><img src="images/thumbs/1.jpg" alt="Thumb 1" /></li>
						<li><img src="images/thumbs/2.jpg" alt="Thumb 2" /></li>
						<li><img src="images/thumbs/3.jpg" alt="Thumb 3" /></li>
						<li><img src="images/thumbs/4.jpg" alt="Thumb 4" /></li>
						<li><img src="images/thumbs/5.jpg" alt="Thumb 5" /></li>
						<li><img src="images/thumbs/6.jpg" alt="Thumb 6" /></li>
						<li><img src="images/thumbs/7.jpg" alt="Thumb 7" /></li>
						<li><img src="images/thumbs/8.jpg" alt="Thumb 8" /></li>
						<li><img src="images/thumbs/9.jpg" alt="Thumb 9" /></li>
						<li><img src="images/thumbs/10.jpg" alt="Thumb 10" /></li>
						<li><img src="images/thumbs/11.jpg" alt="Thumb 11" /></li>
						<li><img src="images/thumbs/12.jpg" alt="Thumb 12" /></li>
						<li><img src="images/thumbs/13.jpg" alt="Thumb 13" /></li>
						<li><img src="images/thumbs/14.jpg" alt="Thumb 14" /></li>
					</ul>
				</div>
				<span></span>
			</li>
		</ul>
	</div>
</div>
<script type="text/javascript">
	/*
	the images preload plugin
	*/
	(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);
				$('<img/>').load(function(i){
					++l;
					if(l == c) o.onComplete();
				}).attr('src',$i.attr('src'));	
			});
		};
		$.fn.preload.defaults = {
			onComplete	: function(){return false;}
		};
	})(jQuery);
</script>
<script type="text/javascript">
	/*
	the thumbnail slider plugin
	*/
	(function($) {
		var methods = {
			init 	: 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(e){
					var $nav_elem	= $(this),
					idx			= $nav_elem.index();
					$nav_elems.removeClass('selected').eq(idx).addClass('selected');
					o.onClick(idx);
						//e.preventDefault();
				});
			});
			},
			update 	: function(idx) {
				return this.each(function(){
					var $this 			= $(this),
						$ts_container	= $this.children('.ts_container'),
						$ts_thumbnails	= $ts_container.children('.ts_thumbnails'),
						$nav_elems		= $ts_container.children('li').not($ts_thumbnails);
					$nav_elems.removeClass('selected').eq(idx).addClass('selected');
				});	
			}
		};
		$.fn.thumbnailSlider = function(method) {
			if ( methods[method] ) {
				return methods[method].apply( this, Array.prototype.slice.call( arguments, 1 ));
			} else if ( typeof method === 'object' || ! method ) {
				return methods.init.apply( this, arguments );
			} else {
				$.error( 'Method ' +  method + ' does not exist on jQuery.thumbnailSlider' );
			}  
		};
		$.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() {
		var $thumbnailSlider= $('#thumbnailSlider'),
			$slider			= $('#slider'),
			$pg_photos		= $('#pg_photos'),
			$pg_container	= $('#pg_container'),
			$pg_scrollWrapper	= $('#pg_scrollWrapper'),
			$pg_photos_elem	= $pg_photos.children(),
			$pg_photos_img	= $pg_photos_elem.find('img'),
			is_safari = navigator.userAgent.toLowerCase().indexOf('safari') > -1 
						&& 
							  navigator.userAgent.toLowerCase().indexOf('chrome') == -1,
			pg_photos_width	= 0;				  
		//preload the images				
		$pg_photos_img.preload({
			onComplete	: function(){
				init();
				//force the hashchange event
				//so that it slides to the image passed in the url
				$(window).hashchange();
			}
		});
		function init(){
			initThumbnailSlider();
			configGallery();
			initSlider();
			initEvents();
		}
		//init the thumbs slider plugin
		function initThumbnailSlider(){
			$thumbnailSlider.thumbnailSlider({
					thumb_width	: 75,
				thumb_height: 75
				});
		}
		function configGallery(){
			$('BODY').css('overflow-x','hidden');
			//we need to set the width of the $pg_photos,
			//which is the sum of its childrens width
				$pg_photos.children().each(function(){
					pg_photos_width += $(this).outerWidth(true);
				});
				$pg_photos.css('width',pg_photos_width+'px');
		}
		function initSlider(){
			$pg_scrollWrapper.show();
				//innitialize the slider
			var old_value 	= 0, //last value of the slider
				dir			= 1; //direction 	
				$slider.slider('destroy').slider({
					orientation	: 'horizontal',
					max			: pg_photos_width - $pg_photos.children(':last').outerWidth(true),
					min			: 0,
					value		: 0,
					slide		: function(event, ui) {
						$pg_photos.css('left',-ui.value+'px');						
					//the 3d effect
						if(is_safari){
						//the dir will define the value for the rotationY (negative or positive)
						dir 		= (old_value < ui.value) ? 1 : -1;
						old_value 	= ui.value;	
							if(dir == 1 && !$pg_container.hasClass('turnLeft'))	
							$pg_container.addClass('turnLeft')
										 .removeClass('turnRight flat');
							else if(dir == -1 && !$pg_container.hasClass('turnRight'))	
							$pg_container.addClass('turnRight')
										 .removeClass('turnLeft flat');
						}	
					},
					stop: function(event, ui) {
						if(is_safari){
							$pg_container.addClass('flat')
									 .removeClass('turnLeft turnRight');
						}			 
					}
				});
		}
		function initEvents(){
			//if we mouse over a photo, show the description sored in the alt attr
			$pg_photos_elem.bind('mouseenter',function(e){
				var $e		= $(this);
					$img	= $e.find('img'),
					descr	= $img.attr('alt');
				$('<span>'+ descr +'</span>').hide().insertAfter($img).fadeIn();
			}).bind('mouseleave',function(e){
				var $e		= $(this);
					$descr	= $e.find('span');
				$descr.fadeOut();
		});
			//slide as we scroll with the mouse
				$pg_container.mousewheel(function(e, delta) {
				var speed	= 450,
					inc 	= -delta*speed,
						min	= $slider.slider('option','min'),
						max = $slider.slider('option','max');
					var val = $slider.slider('value') + inc;
					if(val < min)
						val = min;
					else if(val > max)
						val = max;
					$slider.slider('value', val);
				$pg_photos.stop().animate({
						left	: -(val) + 'px'
				},800,'easeOutExpo',function(){
					if(is_safari){
						$pg_container.addClass('flat')
									 .removeClass('turnLeft turnRight');
					}	
				});
				if(is_safari){
					if(delta < 0 && !$pg_container.hasClass('turnLeft'))	
						$pg_container.addClass('turnLeft')
									 .removeClass('turnRight flat');
					else if(delta > 0 && !$pg_container.hasClass('turnRight'))	
						$pg_container.addClass('turnRight')
									 .removeClass('turnLeft flat');
				}
					return false;
				});
				$(window).hashchange( function(){
				//the index in the url hash
					var idx 			= location.hash.split('#')[1];
				if(!idx){
					//we assume the current is the first one,
					//so set the first thumb nav elem as selected
					$thumbnailSlider.thumbnailSlider('update',0);
					return;
				}
				//set the thumb nav elem as selected
				$thumbnailSlider.thumbnailSlider('update',idx-1);
				//based on the current left value for the pg_photos, 
				//and the left of the element, we know how much to slide
					var	current_left 	= parseFloat($pg_photos.css('left'),10),
					elem_left		= $pg_photos_elem.eq(idx-1).offset().left;
				//update the ui slider 
					$slider.slider('value',Math.abs(parseInt(current_left - elem_left,10)));
				//slide to element
					$pg_photos.stop().animate({
						left	: current_left - elem_left + 'px'
					},800,'easeInOutExpo');
				});
			}
	});
</script>

相关推荐

发表评论

相关文章