jQuery图片横向滚动特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery图片横向滚动特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>jQuery图片横向滚动</title>
	<link rel="stylesheet" href="css/reset.css">
	<link rel="stylesheet" href="css/jquery.scrollgallery.css">
	<script src="js/jquery.min.js" type="text/javascript"></script>
	<script src="js/jquery.easing.min.js" type="text/javascript"></script>
	<script src="js/jquery.scrollgallery.min.js" type="text/javascript"></script>
	<script>
		jQuery(document).ready(function($) {
			$('.wrapper').scrollGallery();
		});
	</script>
</head>

<body>
<div class="wrapper">
	<div class="gallery-container">
		<div class="gallery">
			<div class="image-item gallery-info">
				<h2>Photography Information</h2>
				<p>Click the image to navigate.</p>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum, error, magnam reprehenderit molestias deleniti quam vitae molestiae similique aspernatur saepe praesentium eveniet delectus rem ut eaque numquam in optio! Eos!</p>
				<p>Lorem ipsum dolor sit amet, consectetur hyperlink adipisicing elit. Rerum, error, magnam reprehenderit molestias deleniti quam vitae molestiae similique aspernatur saepe praesentium eveniet delectus rem ut eaque numquam in optio! Eos!</p>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum, error, magnam reprehenderit molestias deleniti quam vitae molestiae similique aspernatur saepe praesentium eveniet delectus rem ut eaque numquam in optio! Eos!</p>
			</div>
			<img src="images/flickr_people/5271697131_90375a1da9_b_d.jpg" alt="image" class="image-item" />
			<div class="image-item">
				<img src="images/flickr_people/6992105054_eeedf0d502_o_d.jpg" alt="image" />
				<p class="caption">Fugiat, nisi, similique, odio eos quidem impedit facilis tenetur saepe aliquam eligendi aperiam.</p>
			</div>
			<div class="image-item">
				<img src="images/flickr_people/7134946449_064fceb7f4_o_d.jpg" alt="image" />
				<p class="caption">Some little information here. Support hyperlink too.</p>
			</div>
			<img src="images/flickr_people/5629018757_ce2fb64798_b_d.jpg" alt="image" class="image-item" />
			<img src="images/flickr_people/7730175960_fe582d68df_h_d.jpg" alt="image" class="image-item" />
			<img src="images/flickr_people/5679223548_883af87e9d_b_d.jpg" alt="image" class="image-item" />
			<img src="images/flickr_people/5725788340_4d2447a80a_b_d.jpg" alt="image" class="image-item" />
		</div>
		<div class="gallery">
			<div class="image-item gallery-info">
				<h2>Cards 01</h2>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum, error, magnam reprehenderit molestias deleniti quam vitae molestiae similique aspernatur saepe praesentium eveniet delectus rem ut eaque numquam in optio! Eos!</p>
				<p>Lorem ipsum dolor sit amet, consectetur hyperlink adipisicing elit. Rerum, error, magnam reprehenderit molestias deleniti quam vitae molestiae similique aspernatur saepe praesentium eveniet delectus rem ut eaque numquam in optio! Eos!</p>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum, error, magnam reprehenderit molestias deleniti quam vitae molestiae similique aspernatur saepe praesentium eveniet delectus rem ut eaque numquam in optio! Eos!</p>
			</div>

			<img src="images/cards/card02.jpg" alt="image" class="image-item" />
			<img src="images/cards/card04.jpg" alt="image" class="image-item" />
			<img src="images/cards/card05.jpg" alt="image" class="image-item" />
			<img src="images/cards/card06.jpg" alt="image" class="image-item" />
			<img src="images/cards/card07.jpg" alt="image" class="image-item" />
			<img src="images/cards/card08.jpg" alt="image" class="image-item" />
			<img src="images/cards/card09.jpg" alt="image" class="image-item" />
			<img src="images/cards/card12.jpg" alt="image" class="image-item" />
		</div>
		<div class="gallery">
			<img src="images/cards/card13.jpg" alt="image" class="image-item" />
			<img src="images/cards/card14.jpg" alt="image" class="image-item" />
			<img src="images/cards/card15.jpg" alt="image" class="image-item" />
			<img src="images/cards/card16.jpg" alt="image" class="image-item" />
			<img src="images/cards/card17.jpg" alt="image" class="image-item" />
			<img src="images/cards/card18.jpg" alt="image" class="image-item" />
			<div class="image-item gallery-info">
				<h2>You can put it in the end too</h2>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum, error, magnam reprehenderit molestias deleniti quam vitae molestiae similique aspernatur saepe praesentium eveniet delectus rem ut eaque numquam in optio! Eos!</p>
				<p>Lorem ipsum dolor sit amet, consectetur hyperlink adipisicing elit. Rerum, error, magnam reprehenderit molestias deleniti quam vitae molestiae similique aspernatur saepe praesentium eveniet delectus rem ut eaque numquam in optio! Eos!</p>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum, error, magnam reprehenderit molestias deleniti quam vitae molestiae similique aspernatur saepe praesentium eveniet delectus rem ut eaque numquam in optio! Eos!</p>
			</div>

		</div>
		<div class="gallery">
			<img src="images/books/book01.jpg" alt="image" class="image-item" />
			<img src="images/books/book02.jpg" alt="image" class="image-item" />
			<img src="images/books/book03.jpg" alt="image" class="image-item" />
			<img src="images/books/book04.jpg" alt="image" class="image-item" />
			<img src="images/books/book05.jpg" alt="image" class="image-item" />
			<img src="images/books/book06.jpg" alt="image" class="image-item" />
			<img src="images/books/book07.jpg" alt="image" class="image-item" />
		</div>
		<div class="gallery">
			<img src="images/books/moo01.jpg" alt="image" class="image-item" />
			<img src="images/books/moo02.jpg" alt="image" class="image-item" />
			<img src="images/books/moo03.jpg" alt="image" class="image-item" />
			<img src="images/books/moo04.jpg" alt="image" class="image-item" />
			<img src="images/books/moo05.jpg" alt="image" class="image-item" />
			<img src="images/books/moo06.jpg" alt="image" class="image-item" />
			<img src="images/books/moo07.jpg" alt="image" class="image-item" />
			<img src="images/books/moo08.jpg" alt="image" class="image-item" />
			<img src="images/books/moo09.jpg" alt="image" class="image-item" />
			<img src="images/books/moo10.jpg" alt="image" class="image-item" />
			<img src="images/books/moo11.jpg" alt="image" class="image-item" />
			<img src="images/books/moo12.jpg" alt="image" class="image-item" />
			<img src="images/books/moo13.jpg" alt="image" class="image-item" />
		</div>
	</div>
</div>
</body>
</html>

JS代码(jquery.easing.min.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代码(jquery.scrollgallery.css):

/*Author:http://codecanyon.net/user/sike?ref=sike*/
body{font-family:"Lucida Grande","Lucida Sans Unicode",helvetica,verdana,arial,sans-serif;min-width:640px;font-size:13px;background:#EFEFEF;overflow:hidden;margin:0;padding:0;}
.wrapper{background:#000;}
a{color:#0066ff;text-decoration:none;}
a:hover{color:#0066ff;text-decoration:underline;}
.navigate-menu{margin:40px 0;}
.navigate-menu ul{list-style:none;}
.caption{width:480px;padding:4px 16px;}
.caption p{margin:0;padding:0;}
.menu-item{display:block;float:left;margin-right:8px;}
.menu-item a{display:inline-block;color:#fff;background:#333;padding:8px;}
.menu-item a.active{color:#fff;background:#B22222;border:none;outline:none;}
.gallery-container{position:absolute;left:0;top:84px;background:#EFEFEF;background-image:-webkit-radial-gradient(center,circle cover,#efefef,#666666);background-image:-moz-radial-gradient(center,circle cover,#efefef,#666666);background-image:-o-radial-gradient(center,circle cover,#efefef,#666666);background-image:radial-gradient(center,circle cover,#efefef,#666666);}
.gallery{position:absolute;display:none;width:33600px;height:640px;margin-left:40px;}
.image-item{display:block;float:left;margin:auto;padding:4px;background:#FFF;margin-right:24px;cursor:pointer;}
.gallery-info{width:480px;height:560px;background:#fff url(../images/retina_wood.png) 0 0 repeat;}
.gallery-info h2,.gallery-info p{padding:10px 16px;}

附件:下载该文件资源,减少时间成本(增值服务)