jquery立式陈列柜滑块js代码

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

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

以下是 jquery立式陈列柜滑块js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html lang="en">
    <head>
		<meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
		<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
        <title>jquery立式陈列柜滑块</title>
        <link rel="stylesheet" type="text/css" href="css/style.css" />
		<link href='css/css.css' rel='stylesheet' type='text/css'>
		<script type="text/javascript" src="js/modernizr.custom.79639.js"></script>
		<noscript><link rel="stylesheet" type="text/css" href="css/noscript.css" /></noscript>
		<!--[if lte IE 8]><link rel="stylesheet" type="text/css" href="css/noscript.css" />
		<![endif]-->
    </head>
    <body>
		
		<section id="ps-container" class="ps-container">
			
			<div class="ps-contentwrapper">
			
				<div class="ps-content">
					<h2>Bernhard</h2>
					<span class="ps-price">&pound;100</span>
					<p>With restful springiness in the seat; prevents static sitting and provides enhanced seating comfort. Padded seat and back for enhanced seating comfort. Soft, hardwearing and easy care leather, which ages gracefully.</p>
					<a href="#">Buy this item</a>
				</div>
				
				<div class="ps-content">
					<h2>Tobias</h2>
					<span class="ps-price">&pound;65</span>
					<p>For increased stability, re-tighten the screws about two weeks after assembly. Seat and back with restful flexibility; prevents a static sitting posture and enhances comfort.</p>
					<a href="#">Buy this item</a>
				</div>
				
				<div class="ps-content">
					<h2>P&ouml;ang</h2>
					<span class="ps-price">&pound;140</span>
					<p>Frame made of layer-glued bent birch; a very strong and durable material. High back provides great support for your neck. Sheepskin has natural insulating properties, which make it feel warm and cosy to sit on. Extra cushions are available for variation and renewal.</p>
					<a href="#">Buy this item</a>
				</div>
				
				<div class="ps-content">
					<h2>Mellby</h2>
					<span class="ps-price">&pound;195</span>
					<p>Easy to keep clean; removable, machine washable cover. Seat cushion with a top layer of memory foam; moulds to the precise contours of your body and regains its shape when you get up.</p>
					<a href="#">Buy this item</a>
				</div>
				
				<div class="ps-content">
					<h2>Torbj&ouml;rn</h2>
					<span class="ps-price">&pound;30</span>
					<p>Height adjustable for a comfortable sitting posture. The sloping seat gives a comfortable sitting position when leaning forwards.</p>
					<a href="#">Buy this item</a>
				</div>
				
			</div><!-- /ps-contentwrapper -->
			
			<div class="ps-slidewrapper">
			
				<div class="ps-slides">
					<div style="background-image:url(images/1.jpg);"></div>
					<div style="background-image:url(images/2.jpg);"></div>
					<div style="background-image:url(images/3.jpg);"></div>
					<div style="background-image:url(images/4.jpg);"></div>
					<div style="background-image:url(images/5.jpg);"></div>
				</div>
				
				<nav>
					<a href="#" class="ps-prev" ></a>
					<a href="#" class="ps-next" ></a>
				</nav>
				
			</div><!-- /ps-slidewrapper -->
			
		</section><!-- /ps-container -->
			
		<!-- jQuery if needed -->
        <script type="text/javascript" src="js/jquery.min.js"></script>
		<script type="text/javascript" src="js/slider.js"></script>
		<script type="text/javascript">
			$(function() {
				Slider.init();
			});
</script>
    </body>
</html>

JS代码(modernizr.custom.79639.js):

/* Modernizr 2.6.2 (Custom Build) | MIT & BSD * Build:http://modernizr.com/download/#-csstransitions-touch-shiv-cssclasses-prefixed-teststyles-testprop-testallprops-prefixes-domprefixes-load */
;
	window.Modernizr=function(a,b,c){
	function z(a){
	j.cssText=a}
function A(a,b){
	return z(m.join(a+";
	")+(b||""))}
function B(a,b){
	return typeof a===b}
function C(a,b){
	return!!~(""+a).indexOf(b)}
function D(a,b){
	for(var d in a){
	var e=a[d];
	if(!C(e,"-")&&j[e]!==c)return b=="pfx"?e:!0}
return!1}
function E(a,b,d){
	for(var e in a){
	var f=b[a[e]];
	if(f!==c)return d===!1?a[e]:B(f,"function")?f.bind(d||b):f}
return!1}
function F(a,b,c){
	var d=a.charAt(0).toUpperCase()+a.slice(1),e=(a+" "+o.join(d+" ")+d).split(" ");
	return B(b,"string")||B(b,"undefined")?D(e,b):(e=(a+" "+p.join(d+" ")+d).split(" "),E(e,b,c))}
var d="2.6.2",e={
}
,f=!0,g=b.documentElement,h="modernizr",i=b.createElement(h),j=i.style,k,l={
}
.toString,m=" -webkit- -moz- -o- -ms- ".split(" "),n="Webkit Moz O ms",o=n.split(" "),p=n.toLowerCase().split(" "),q={
}
,r={
}
,s={
}
,t=[],u=t.slice,v,w=function(a,c,d,e){
	var f,i,j,k,l=b.createElement("div"),m=b.body,n=m||b.createElement("body");
	if(parseInt(d,10))while(d--)j=b.createElement("div"),j.id=e?e[d]:h+(d+1),l.appendChild(j);
	return f=["&#173;
	",'<style id="s',h,'">',a,"</style>"].join(""),l.id=h,(m?l:n).innerHTML+=f,n.appendChild(l),m||(n.style.background="",n.style.overflow="hidden",k=g.style.overflow,g.style.overflow="hidden",g.appendChild(n)),i=c(l,a),m?l.parentNode.removeChild(l):(n.parentNode.removeChild(n),g.style.overflow=k),!!i}
,x={
}
.hasOwnProperty,y;
	!B(x,"undefined")&&!B(x.call,"undefined")?y=function(a,b){
	return x.call(a,b)}
:y=function(a,b){
	return b in a&&B(a.constructor.prototype[b],"undefined")}
,Function.prototype.bind||(Function.prototype.bind=function(b){
	var c=this;
	if(typeof c!="function")throw new TypeError;
	var d=u.call(arguments,1),e=function(){
	if(this instanceof e){
	var a=function(){
}
;
	a.prototype=c.prototype;
	var f=new a,g=c.apply(f,d.concat(u.call(arguments)));
	return Object(g)===g?g:f}
return c.apply(b,d.concat(u.call(arguments)))}
;
	return e}
),q.touch=function(){
	var c;
	return"ontouchstart"in a||a.DocumentTouch&&b instanceof DocumentTouch?c=!0:w(["@media (",m.join("touch-enabled),("),h,")","{
	#modernizr{
	top:9px;
	position:absolute}
}
"].join(""),function(a){
	c=a.offsetTop===9}
),c}
,q.csstransitions=function(){
	return F("transition")}
;
	for(var G in q)y(q,G)&&(v=G.toLowerCase(),e[v]=q[G](),t.push((e[v]?"":"no-")+v));
	return e.addTest=function(a,b){
	if(typeof a=="object")for(var d in a)y(a,d)&&e.addTest(d,a[d]);
	else{
	a=a.toLowerCase();
	if(e[a]!==c)return e;
	b=typeof b=="function"?b():b,typeof f!="undefined"&&f&&(g.className+=" "+(b?"":"no-")+a),e[a]=b}
return e}
,z(""),i=k=null,function(a,b){
	function k(a,b){
	var c=a.createElement("p"),d=a.getElementsByTagName("head")[0]||a.documentElement;
	return c.innerHTML="x<style>"+b+"</style>",d.insertBefore(c.lastChild,d.firstChild)}
function l(){
	var a=r.elements;
	return typeof a=="string"?a.split(" "):a}
function m(a){
	var b=i[a[g]];
	return b||(b={
}
,h++,a[g]=h,i[h]=b),b}
function n(a,c,f){
	c||(c=b);
	if(j)return c.createElement(a);
	f||(f=m(c));
	var g;
	return f.cache[a]?g=f.cache[a].cloneNode():e.test(a)?g=(f.cache[a]=f.createElem(a)).cloneNode():g=f.createElem(a),g.canHaveChildren&&!d.test(a)?f.frag.appendChild(g):g}
function o(a,c){
	a||(a=b);
	if(j)return a.createDocumentFragment();
	c=c||m(a);
	var d=c.frag.cloneNode(),e=0,f=l(),g=f.length;
	for(;
	e<g;
	e++)d.createElement(f[e]);
	return d}
function p(a,b){
	b.cache||(b.cache={
}
,b.createElem=a.createElement,b.createFrag=a.createDocumentFragment,b.frag=b.createFrag()),a.createElement=function(c){
	return r.shivMethods?n(c,a,b):b.createElem(c)}
,a.createDocumentFragment=Function("h,f","return function(){
	var n=f.cloneNode(),c=n.createElement;
	h.shivMethods&&("+l().join().replace(/\w+/g,function(a){
	return b.createElem(a),b.frag.createElement(a),'c("'+a+'")'}
)+");
	return n}
")(r,b.frag)}
function q(a){
	a||(a=b);
	var c=m(a);
	return r.shivCSS&&!f&&!c.hasCSS&&(c.hasCSS=!!k(a,"article,aside,figcaption,figure,footer,header,hgroup,nav,section{
	display:block}
mark{
	background:#FF0;
	color:#000}
")),j||p(a,c),a}
var c=a.html5||{
}
,d=/^<|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i,e=/^(?:a|b|code|div|fieldset|h1|h2|h3|h4|h5|h6|i|label|li|ol|p|q|span|strong|style|table|tbody|td|th|tr|ul)$/i,f,g="_html5shiv",h=0,i={
}
,j;
	(function(){
	try{
	var a=b.createElement("a");
	a.innerHTML="<xyz></xyz>",f="hidden"in a,j=a.childNodes.length==1||function(){
	b.createElement("a");
	var a=b.createDocumentFragment();
	return typeof a.cloneNode=="undefined"||typeof a.createDocumentFragment=="undefined"||typeof a.createElement=="undefined"}
()}
catch(c){
	f=!0,j=!0}
}
)();
	var r={
	elements:c.elements||"abbr article aside audio bdi canvas data datalist details figcaption figure footer header hgroup mark meter nav output progress section summary time video",shivCSS:c.shivCSS!==!1,supportsUnknownElements:j,shivMethods:c.shivMethods!==!1,type:"default",shivDocument:q,createElement:n,createDocumentFragment:o}
;
	a.html5=r,q(b)}
(this,b),e._version=d,e._prefixes=m,e._domPrefixes=p,e._cssomPrefixes=o,e.testProp=function(a){
	return D([a])}
,e.testAllProps=F,e.testStyles=w,e.prefixed=function(a,b,c){
	return b?F(a,b,c):F(a,"pfx")}
,g.className=g.className.replace(/(^|\s)no-js(\s|$)/,"$1$2")+(f?" js "+t.join(" "):""),e}
(this,this.document),function(a,b,c){
	function d(a){
	return"[object Function]"==o.call(a)}
function e(a){
	return"string"==typeof a}
function f(){
}
function g(a){
	return!a||"loaded"==a||"complete"==a||"uninitialized"==a}
function h(){
	var a=p.shift();
	q=1,a?a.t?m(function(){
	("c"==a.t?B.injectCss:B.injectJs)(a.s,0,a.a,a.x,a.e,1)}
,0):(a(),h()):q=0}
function i(a,c,d,e,f,i,j){
	function k(b){
	if(!o&&g(l.readyState)&&(u.r=o=1,!q&&h(),l.onload=l.onreadystatechange=null,b)){
	"img"!=a&&m(function(){
	t.removeChild(l)}
,50);
	for(var d in y[c])y[c].hasOwnProperty(d)&&y[c][d].onload()}
}
var j=j||B.errorTimeout,l=b.createElement(a),o=0,r=0,u={
	t:d,s:c,e:f,a:i,x:j}
;
	1===y[c]&&(r=1,y[c]=[]),"object"==a?l.data=c:(l.src=c,l.type=a),l.width=l.height="0",l.onerror=l.onload=l.onreadystatechange=function(){
	k.call(this,r)}
,p.splice(e,0,u),"img"!=a&&(r||2===y[c]?(t.insertBefore(l,s?null:n),m(k,j)):y[c].push(l))}
function j(a,b,c,d,f){
	return q=0,b=b||"j",e(a)?i("c"==b?v:u,a,b,this.i++,c,d,f):(p.splice(this.i++,0,a),1==p.length&&h()),this}
function k(){
	var a=B;
	return a.loader={
	load:j,i:0}
,a}
var l=b.documentElement,m=a.setTimeout,n=b.getElementsByTagName("script")[0],o={
}
.toString,p=[],q=0,r="MozAppearance"in l.style,s=r&&!!b.createRange().compareNode,t=s?l:n.parentNode,l=a.opera&&"[object Opera]"==o.call(a.opera),l=!!b.attachEvent&&!l,u=r?"object":l?"script":"img",v=l?"script":u,w=Array.isArray||function(a){
	return"[object Array]"==o.call(a)}
,x=[],y={
}
,z={
	timeout:function(a,b){
	return b.length&&(a.timeout=b[0]),a}
}
,A,B;
	B=function(a){
	function b(a){
	var a=a.split("!"),b=x.length,c=a.pop(),d=a.length,c={
	url:c,origUrl:c,prefixes:a}
,e,f,g;
	for(f=0;
	f<d;
	f++)g=a[f].split("="),(e=z[g.shift()])&&(c=e(c,g));
	for(f=0;
	f<b;
	f++)c=x[f](c);
	return c}
function g(a,e,f,g,h){
	var i=b(a),j=i.autoCallback;
	i.url.split(".").pop().split("?").shift(),i.bypass||(e&&(e=d(e)?e:e[a]||e[g]||e[a.split("/").pop().split("?")[0]]),i.instead?i.instead(a,e,f,g,h):(y[i.url]?i.noexec=!0:y[i.url]=1,f.load(i.url,i.forceCSS||!i.forceJS&&"css"==i.url.split(".").pop().split("?").shift()?"c":c,i.noexec,i.attrs,i.timeout),(d(e)||d(j))&&f.load(function(){
	k(),e&&e(i.origUrl,h,g),j&&j(i.origUrl,h,g),y[i.url]=2}
)))}
function h(a,b){
	function c(a,c){
	if(a){
	if(e(a))c||(j=function(){
	var a=[].slice.call(arguments);
	k.apply(this,a),l()}
),g(a,j,b,0,h);
	else if(Object(a)===a)for(n in m=function(){
	var b=0,c;
	for(c in a)a.hasOwnProperty(c)&&b++;
	return b}
(),a)a.hasOwnProperty(n)&&(!c&&!--m&&(d(j)?j=function(){
	var a=[].slice.call(arguments);
	k.apply(this,a),l()}
:j[n]=function(a){
	return function(){
	var b=[].slice.call(arguments);
	a&&a.apply(this,b),l()}
}
(k[n])),g(a[n],j,b,n,h))}
else!c&&l()}
var h=!!a.test,i=a.load||a.both,j=a.callback||f,k=j,l=a.complete||f,m,n;
	c(h?a.yep:a.nope,!!i),i&&c(i)}
var i,j,l=this.yepnope.loader;
	if(e(a))g(a,0,l,0);
	else if(w(a))for(i=0;
	i<a.length;
	i++)j=a[i],e(j)?g(j,0,l,0):w(j)?B(j):Object(j)===j&&h(j,l);
	else Object(a)===a&&h(a,l)}
,B.addPrefix=function(a,b){
	z[a]=b}
,B.addFilter=function(a){
	x.push(a)}
,B.errorTimeout=1e4,null==b.readyState&&b.addEventListener&&(b.readyState="loading",b.addEventListener("DOMContentLoaded",A=function(){
	b.removeEventListener("DOMContentLoaded",A,0),b.readyState="complete"}
,0)),a.yepnope=k(),a.yepnope.executeStack=h,a.yepnope.injectJs=function(a,c,d,e,i,j){
	var k=b.createElement("script"),l,o,e=e||B.errorTimeout;
	k.src=a;
	for(o in d)k.setAttribute(o,d[o]);
	c=j?h:c||f,k.onreadystatechange=k.onload=function(){
	!l&&g(k.readyState)&&(l=1,c(),k.onload=k.onreadystatechange=null)}
,m(function(){
	l||(l=1,c(1))}
,e),i?k.onload():n.parentNode.insertBefore(k,n)}
,a.yepnope.injectCss=function(a,c,d,e,g,i){
	var e=b.createElement("link"),j,c=i?h:c||f;
	e.href=a,e.rel="stylesheet",e.type="text/css";
	for(j in d)e.setAttribute(j,d[j]);
	g||(n.parentNode.insertBefore(e,n),m(c,0))}
}
(this,document),Modernizr.load=function(){
	yepnope.apply(window,[].slice.call(arguments,0))}
;

CSS代码(style.css):

@import url('normalize.css');@import url('demo.css');@font-face{font-family:'icon';src:url("font/icon.eot");src:url("font/icon.eot?#iefix") format('embedded-opentype'),url("font/icon.woff") format('woff'),url("font/icon.ttf") format('truetype'),url("font/icon.svg#icon") format('svg');font-weight:normal;font-style:normal;}
.ps-container{position:absolute;width:100%;height:100%;overflow:hidden;text-transform:uppercase;color:#555;background:#fff;}
.ps-container > div{position:absolute;width:50%;}
.ps-container > div > div,.ps-slidewrapper > nav,.ps-slides > div{position:absolute;}
.ps-header{top:0px;left:0px;height:150px;z-index:1001;background:#fff;}
.ps-header h1{color:#ccc;line-height:150px;margin:0;padding:0 50px;font-weight:200;font-size:14px;letter-spacing:10px;}
.ps-contentwrapper{top:150px;bottom:0px;overflow:hidden;z-index:1000;}
.ps-content{background:#fff;width:100%;height:100%;padding:50px;}
.ps-content h2{padding:10px 15px;border-right:1px solid #f2f2f2;border-bottom:1px solid #f2f2f2;letter-spacing:4px;margin:10px 0 30px;text-align:right;font-weight:700;}
.ps-content p{line-height:26px;font-size:12px;letter-spacing:2px;word-spacing:10px;padding:10px 15px;font-weight:400;text-align:justify;border-left:1px solid #f2f2f2;border-top:1px solid #f2f2f2;}
.ps-content span.ps-price{float:left;margin:10px;width:140px;height:140px;line-height:140px;text-align:center;color:#fff;background:#f7cfc6;background:rgba(247,197,185,0.8);font-size:55px;font-weight:200;}
.ps-content a:last-child{font-size:14px;font-weight:700;color:#555;letter-spacing:4px;float:right;border:3px solid #555;padding:3px;text-indent:4px;}
.no-touch .ps-content a:last-child:hover{color:#b2d79d;border-color:#b2d79d;}
.ps-content a:last-child:before{content:'\53';font-family:'icon';font-style:normal;font-weight:normal;speak:none;padding-right:5px;}
.ps-slidewrapper{right:0px;top:0px;height:100%;overflow:hidden;}
.ps-slides{top:0px;bottom:200px;width:100%;}
.ps-slides > div{width:100%;height:100%;box-shadow:inset 0 0 0 9999px rgba(179,157,250,0.1);}
.ps-slidewrapper > nav{width:100%;height:200px;bottom:0px;right:0px;z-index:1000;}
.ps-slidewrapper > nav > a{width:50%;height:100%;position:relative;float:left;box-shadow:inset 0 0 0 9999px rgba(207,227,206,0.8);outline:none;}
.ps-slidewrapper > nav > a:first-child{box-shadow:inset 0 0 0 9999px rgba(233,217,141,0.8);}
.no-touch .ps-slidewrapper > nav > a{-webkit-transition:box-shadow 0.4s ease-in-out;-moz-transition:box-shadow 0.4s ease-in-out;-ms-transition:box-shadow 0.4s ease-in-out;-o-transition:box-shadow 0.4s ease-in-out;transition:box-shadow 0.4s ease-in-out;}
.no-touch .ps-slidewrapper > nav > a:hover{box-shadow:inset 0 0 0 9999px rgba(246,224,121,0.1);}
.no-touch .ps-slidewrapper > nav > a:first-child:hover{box-shadow:inset 0 0 0 9999px rgba(249,15,15,0.1);}
.ps-slidewrapper > nav > a:after{content:'';position:absolute;width:100px;height:100px;top:50%;left:50%;margin:-20px 0 0 -50px;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-o-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);border-left:1px solid #fff;border-top:1px solid #fff;}
.ps-slidewrapper > nav > a:first-child:after{-webkit-transform:rotate(-135deg);-moz-transform:rotate(-135deg);-o-transform:rotate(-135deg);-ms-transform:rotate(-135deg);transform:rotate(-135deg);margin:-80px 0 0 -50px;}
.ps-slides > div,.ps-slidewrapper > nav > a{background-color:#fff;background-position:center top;background-repeat:no-repeat;-webkit-background-size:auto 100%;-moz-background-size:auto 100%;background-size:auto 100%;}
.ps-move{-webkit-transition:top 400ms ease-out;-moz-transition:top 400ms ease-out;-o-transition:top 400ms ease-out;-ms-transition:top 400ms ease-out;transition:top 400ms ease-out;}
@media screen and (max-width:860px){.js .ps-container > div{width:100%;}
.js .ps-header{height:50px;}
.js .ps-header h1{line-height:50px;padding:0px 20px;letter-spacing:4px;}
.js .ps-slides{bottom:320px;top:50px;}
.js .ps-slidewrapper > nav{height:100px;}
.js .ps-contentwrapper{top:auto;height:220px;bottom:100px;}
.js .ps-content{padding:10px;}
.js .ps-content h2{border-right:none;font-size:18px;margin:10px 0;padding-top:0;}
.js .ps-content span.ps-price{font-size:18px;width:50px;height:50px;line-height:50px;font-weight:700;margin-bottom:0;}
.js .ps-content p{line-height:20px;border:none;padding:5px 10px;height:80px;overflow-y:scroll;}
.js .ps-content a:last-child{font-size:13px;margin:10px 20px 0 0;}
}

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