jq圆形缩略图预览轮播滚动切换特效代码

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

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

以下是 jq圆形缩略图预览轮播滚动切换特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>jquery+css3圆形缩略图预览</title>
        <meta http-equiv="Content-Type" content="text/html; 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"> 
        <link rel="stylesheet" type="text/css" href="css/demo.css" />
        <link rel="stylesheet" type="text/css" href="css/style.css" />
        <!--<link href='http://fonts.googleapis.com/css?family=Rochester' rel='stylesheet' type='text/css' />-->
        <noscript>
            <style>
                .cn-images img{position: relative;display: block;border-bottom: 5px solid #d0ab47;} 
                .cn-slideshow{height: auto;}
            </style>
        </noscript>
		<script id="barTmpl" type="text/x-jquery-tmpl">
            <div class="cn-bar">
                <div class="cn-nav">
					<a href="#" class="cn-nav-prev">
                        <span>Previous</span>
						<div style="background-image:url(${prevSource});"></div> 
					</a>
					<a href="#" class="cn-nav-next">
                        <span>Next</span>
						<div style="background-image:url(${nextSource});"></div>
					</a>
                </div><!-- cn-nav -->
                <div class="cn-nav-content">
                    <div class="cn-nav-content-prev">
                        <span>Previous image</span>
                        <h3>${prevTitle}</h3>
                    </div>
                    <div class="cn-nav-content-current">
                        <span>Currently viewing</span>
                        <h2>${currentTitle}</h2>
                    </div>
                    <div class="cn-nav-content-next">
                        <span>Next image</span>
                        <h3>${nextTitle}</h3>
                    </div>
                </div><!-- cn-nav-content -->
            </div><!-- cn-bar -->
		</script>
    </head>
    <body>
        <div class="container">
            <h1>jquery+css3圆形缩略图预览</h1>
            <div class="wrapper">
                <div id="cn-slideshow" class="cn-slideshow">
                    <div class="cn-images">
                        <img src="images/large/1.jpg" alt="image01" title="Beautiful Scenery 1" data-thumb="images/thumbs/1.jpg" style="display:block;"/>
                        <img src="images/large/2.jpg" alt="image02" title="Beautiful Scenery 2" data-thumb="images/thumbs/2.jpg"/>
                        <img src="images/large/3.jpg" alt="image03" title="Beautiful Scenery 3" data-thumb="images/thumbs/3.jpg"/>
                        <img src="images/large/4.jpg" alt="image04" title="Beautiful Scenery 4" data-thumb="images/thumbs/4.jpg"/>
                    </div><!-- cn-images -->
                </div><!-- cn-slideshow -->
            </div>
        </div>
        <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
		<script type="text/javascript" src="js/jquery.tmpl.min.js"></script>
		<script type="text/javascript" src="js/jquery.slideshow.js"></script>
        <script type="text/javascript">
            $(function() {
				$('#cn-slideshow').slideshow();
            });
        </script>
    </body>
</html>

JS代码(jquery.tmpl.min.js):

(function(a){
	var r=a.fn.domManip,d="_tmplitem",q=/^[^<]*(<[\w\W]+>)[^>]*$|\{
	\{
	\! /,b={
}
,f={
}
,e,p={
	key:0,data:{
}
}
,h=0,c=0,l=[];
	function g(e,d,g,i){
	var c={
	data:i||(d?d.data:{
}
),_wrap:d?d._wrap:null,tmpl:null,parent:d||null,nodes:[],calls:u,nest:w,wrap:x,html:v,update:t}
;
	e&&a.extend(c,e,{
	nodes:[],parent:d}
);
	if(g){
	c.tmpl=g;
	c._ctnt=c._ctnt||c.tmpl(a,c);
	c.key=++h;
	(l.length?f:b)[h]=c}
return c}
a.each({
	appendTo:"append",prependTo:"prepend",insertBefore:"before",insertAfter:"after",replaceAll:"replaceWith"}
,function(f,d){
	a.fn[f]=function(n){
	var g=[],i=a(n),k,h,m,l,j=this.length===1&&this[0].parentNode;
	e=b||{
}
;
	if(j&&j.nodeType===11&&j.childNodes.length===1&&i.length===1){
	i[d](this[0]);
	g=this}
else{
	for(h=0,m=i.length;
	h<m;
	h++){
	c=h;
	k=(h>0?this.clone(true):this).get();
	a.fn[d].apply(a(i[h]),k);
	g=g.concat(k)}
c=0;
	g=this.pushStack(g,f,i.selector)}
l=e;
	e=null;
	a.tmpl.complete(l);
	return g}
}
);
	a.fn.extend({
	tmpl:function(d,c,b){
	return a.tmpl(this[0],d,c,b)}
,tmplItem:function(){
	return a.tmplItem(this[0])}
,template:function(b){
	return a.template(b,this[0])}
,domManip:function(d,l,j){
	if(d[0]&&d[0].nodeType){
	var f=a.makeArray(arguments),g=d.length,i=0,h;
	while(i<g&&!(h=a.data(d[i++],"tmplItem")));
	if(g>1)f[0]=[a.makeArray(d)];
	if(h&&c)f[2]=function(b){
	a.tmpl.afterManip(this,b,j)}
;
	r.apply(this,f)}
else r.apply(this,arguments);
	c=0;
	!e&&a.tmpl.complete(b);
	return this}
}
);
	a.extend({
	tmpl:function(d,h,e,c){
	var j,k=!c;
	if(k){
	c=p;
	d=a.template[d]||a.template(null,d);
	f={
}
}
else if(!d){
	d=c.tmpl;
	b[c.key]=c;
	c.nodes=[];
	c.wrapped&&n(c,c.wrapped);
	return a(i(c,null,c.tmpl(a,c)))}
if(!d)return[];
	if(typeof h==="function")h=h.call(c||{
}
);
	e&&e.wrapped&&n(e,e.wrapped);
	j=a.isArray(h)?a.map(h,function(a){
	return a?g(e,c,d,a):null}
):[g(e,c,d,h)];
	return k?a(i(c,null,j)):j}
,tmplItem:function(b){
	var c;
	if(b instanceof a)b=b[0];
	while(b&&b.nodeType===1&&!(c=a.data(b,"tmplItem"))&&(b=b.parentNode));
	return c||p}
,template:function(c,b){
	if(b){
	if(typeof b==="string")b=o(b);
	else if(b instanceof a)b=b[0]||{
}
;
	if(b.nodeType)b=a.data(b,"tmpl")||a.data(b,"tmpl",o(b.innerHTML));
	return typeof c==="string"?(a.template[c]=b):b}
return c?typeof c!=="string"?a.template(null,c):a.template[c]||a.template(null,q.test(c)?c:a(c)):null}
,encode:function(a){
	return(""+a).split("<").join("&lt;
	").split(">").join("&gt;
	").split('"').join("&#34;
	").split("'").join("&#39;
	")}
}
);
	a.extend(a.tmpl,{
	tag:{
	tmpl:{
	_default:{
	$2:"null"}
,open:"if($notnull_1){
	_=_.concat($item.nest($1,$2));
}
"}
,wrap:{
	_default:{
	$2:"null"}
,open:"$item.calls(_,$1,$2);
	_=[];
	",close:"call=$item.calls();
	_=call._.concat($item.wrap(call,_));
	"}
,each:{
	_default:{
	$2:"$index,$value"}
,open:"if($notnull_1){
	$.each($1a,function($2){
	with(this){
	",close:"}
}
);
}
"}
,"if":{
	open:"if(($notnull_1) && $1a){
	",close:"}
"}
,"else":{
	_default:{
	$1:"true"}
,open:"}
else if(($notnull_1) && $1a){
	"}
,html:{
	open:"if($notnull_1){
	_.push($1a);
}
"}
,"=":{
	_default:{
	$1:"$data"}
,open:"if($notnull_1){
	_.push($.encode($1a));
}
"}
,"!":{
	open:""}
}
,complete:function(){
	b={
}
}
,afterManip:function(f,b,d){
	var e=b.nodeType===11?a.makeArray(b.childNodes):b.nodeType===1?[b]:[];
	d.call(f,b);
	m(e);
	c++}
}
);
	function i(e,g,f){
	var b,c=f?a.map(f,function(a){
	return typeof a==="string"?e.key?a.replace(/(<\w+)(?=[\s>])(?![^>]*_tmplitem)([^>]*)/g,"$1 "+d+'="'+e.key+'" $2'):a:i(a,e,a._ctnt)}
):e;
	if(g)return c;
	c=c.join("");
	c.replace(/^\s*([^<\s][^<]*)?(<[\w\W]+>)([^>]*[^>\s])?\s*$/,function(f,c,e,d){
	b=a(e).get();
	m(b);
	if(c)b=j(c).concat(b);
	if(d)b=b.concat(j(d))}
);
	return b?b:j(c)}
function j(c){
	var b=document.createElement("div");
	b.innerHTML=c;
	return a.makeArray(b.childNodes)}
function o(b){
	return new Function("jQuery","$item","var $=jQuery,call,_=[],$data=$item.data;
	with($data){
	_.push('"+a.trim(b).replace(/([\\'])/g,"\\$1").replace(/[\r\t\n]/g," ").replace(/\$\{
	([^\}
]*)\}
/g,"{
	{
	= $1}
}
").replace(/\{
	\{
	(\/?)(\w+|.)(?:\(((?:[^\}
]|\}
(?!\}
))*?)?\))?(?:\s+(.*?)?)?(\(((?:[^\}
]|\}
(?!\}
))*?)\))?\s*\}
\}
/g,function(m,l,j,d,b,c,e){
	var i=a.tmpl.tag[j],h,f,g;
	if(!i)throw"Template command not found:"+j;
	h=i._default||[];
	if(c&&!/\w$/.test(b)){
	b+=c;
	c=""}
if(b){
	b=k(b);
	e=e?","+k(e)+")":c?")":"";
	f=c?b.indexOf(".")>-1?b+c:"("+b+").call($item"+e:b;
	g=c?f:"(typeof("+b+")==='function'?("+b+").call($item):("+b+"))"}
else g=f=h.$1||"null";
	d=k(d);
	return"');
	"+i[l?"close":"open"].split("$notnull_1").join(b?"typeof("+b+")!=='undefined' && ("+b+")!=null":"true").split("$1a").join(g).split("$1").join(f).split("$2").join(d?d.replace(/\s*([^\(]+)\s*(\((.*?)\))?/g,function(d,c,b,a){
	a=a?","+a+")":b?")":"";
	return a?"("+c+").call($item"+a:d}
):h.$2||"")+"_.push('"}
)+"');
}
return _;
	")}
function n(c,b){
	c._wrap=i(c,true,a.isArray(b)?b:[q.test(b)?b:a(b).html()]).join("")}
function k(a){
	return a?a.replace(/\\'/g,"'").replace(/\\\\/g,"\\"):null}
function s(b){
	var a=document.createElement("div");
	a.appendChild(b.cloneNode(true));
	return a.innerHTML}
function m(o){
	var n="_"+c,k,j,l={
}
,e,p,i;
	for(e=0,p=o.length;
	e<p;
	e++){
	if((k=o[e]).nodeType!==1)continue;
	j=k.getElementsByTagName("*");
	for(i=j.length-1;
	i>=0;
	i--)m(j[i]);
	m(k)}
function m(j){
	var p,i=j,k,e,m;
	if(m=j.getAttribute(d)){
	while(i.parentNode&&(i=i.parentNode).nodeType===1&&!(p=i.getAttribute(d)));
	if(p!==m){
	i=i.parentNode?i.nodeType===11?0:i.getAttribute(d)||0:0;
	if(!(e=b[m])){
	e=f[m];
	e=g(e,b[i]||f[i],null,true);
	e.key=++h;
	b[h]=e}
c&&o(m)}
j.removeAttribute(d)}
else if(c&&(e=a.data(j,"tmplItem"))){
	o(e.key);
	b[e.key]=e;
	i=a.data(j.parentNode,"tmplItem");
	i=i?i.key:0}
if(e){
	k=e;
	while(k&&k.key!=i){
	k.nodes.push(j);
	k=k.parent}
delete e._ctnt;
	delete e._wrap;
	a.data(j,"tmplItem",e)}
function o(a){
	a=a+n;
	e=l[a]=l[a]||g(e,b[e.parent.key+n]||e.parent,null,true)}
}
}
function u(a,d,c,b){
	if(!a)return l.pop();
	l.push({
	_:a,tmpl:d,item:this,data:c,options:b}
)}
function w(d,c,b){
	return a.tmpl(a.template(d),c,b,this)}
function x(b,d){
	var c=b.options||{
}
;
	c.wrapped=d;
	return a.tmpl(a.template(b.tmpl),b.data,c,b.item)}
function v(d,c){
	var b=this._wrap;
	return a.map(a(a.isArray(b)?b.join(""):b).filter(d||"*"),function(a){
	return c?a.innerText||a.textContent:a.outerHTML||s(a)}
)}
function t(){
	var b=this.nodes;
	a.tmpl(null,null,null,this).insertBefore(b[0]);
	a(b).remove()}
}
)(jQuery)

CSS代码(demo.css):

@import url('reset.css');/* General Demo Style */
body{background:#edeae2 url(../images/cardboard.jpg) repeat top left;color:#000;font-family:'PT Sans Narrow','Arial Narrow',Arial,sans-serif;font-size:13px;min-height:800px;}
a{color:#000;text-decoration:none;}
.clr{clear:both;}
.wrapper{width:90%;margin:30px auto;}
.wrapper p{font-family:Georgia,serif;font-style:italic;padding:30px 0px 10px 0px;text-align:center;}
h1{margin:20px 20px 10px 20px;font-size:42px;color:#202020;font-family:'Rochester',Georgia,serif;text-align:left;font-weight:400;text-shadow:1px 1px 1px #fff;text-align:center;}
h1 span{font-size:22px;display:block;color:#8b6a12;padding-top:10px;}
/* Header Style */
.header{height:25px;line-height:24px;font-size:13px;background:#000;opacity:0.9;text-transform:uppercase;z-index:4;-moz-box-shadow:1px 0px 2px #000;-webkit-box-shadow:1px 0px 2px #000;box-shadow:1px 0px 2px #000;}
.header a{padding:5px 10px;letter-spacing:1px;color:#ddd;text-align:right;}
.header a:hover{color:#fff;}
.header a span{font-weight:bold;}
.header span.right_ab{position:absolute;right:4px;}
.more{font-family:Georgia,serif;position:relative;font-style:italic;clear:both;}
.more ul{display:block;height:32px;text-align:center;}
.more ul li{display:inline;padding:2px;}
.more ul li.selected a,.more ul li.selected a:hover{background:#9a8448;color:#fff;text-shadow:none;}
.more ul li a{text-shadow:1px 1px 1px #fff;color:#555;background:#fbf9f5;padding:3px 6px;-moz-box-shadow:1px 1px 2px #aaa;-webkit-box-shadow:1px 1px 2px #aaa;box-shadow:1px 1px 2px #aaa;}
.more ul li a:hover{background:#c2a967;color:#fff;text-shadow:none;}

CSS代码(reset.css):

/* CSS reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
html,body{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
input{border:1px solid #b0b0b0;padding:3px 5px 4px;color:#979797;width:190px;}
address,caption,cite,code,dfn,th,var{font-style:normal;font-weight:normal;}
ol,ul{list-style:none;}
caption,th{text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
q:before,q:after{content:'';}
abbr,acronym{border:0;}

CSS代码(style.css):

.cn-slideshow{width:820px;height:410px;position:relative;margin:0 auto;background:#fff;border-top:5px solid #d0ab47;-webkit-box-shadow:1px 1px 3px rgba(0,0,0,0.2);-moz-box-shadow:1px 1px 3px rgba(0,0,0,0.2);box-shadow:1px 1px 3px rgba(0,0,0,0.2);}
.cn-loading{position:absolute;z-index:999;text-indent:-9000px;opacity:0.6;top:50%;left:50%;margin:-25px 0 0 -25px;width:50px;height:50px;background:#000 url(../images/ajax-loader.gif) no-repeat center center;-moz-border-radius:25px;-webkit-border-radius:25px;border-radius:25px;}
.cn-images{width:100%;height:100%;overflow:hidden;position:relative;}
.cn-images img{position:absolute;top:0px;left:0px;display:none;}
.cn-bar{background:transparent url(../images/bar.png) repeat top left;height:74px;position:absolute;bottom:0px;right:50px;left:50px;color:#f8f8f8;z-index:999;}
.cn-nav-content{position:absolute;top:0px;height:100%;right:70px;left:70px;overflow:hidden;text-shadow:1px 1px 1px rgba(0,0,0,0.2);}
.cn-nav-content div{float:left;width:130px;color:#aaa;}
.cn-nav-content span{color:#777;}
.cn-nav-content div.cn-nav-content-current{text-align:center;width:280px;position:absolute;top:0px;left:50%;margin-left:-140px;}
.cn-nav-content h2,.cn-nav-content h3{padding:0;margin:0;font-size:12px;line-height:24px;font-family:Georgia,serif;font-style:italic;}
.cn-nav-content h2{font-size:18px;color:#fff;}
.cn-nav-content-current span{color:#d0ab47;}
.cn-nav-content div.cn-nav-content-prev{margin-left:20px;}
.cn-nav-content div.cn-nav-content-next{text-align:right;margin-right:20px;float:right;}
.cn-nav-content div span{display:block;padding-top:18px;text-transform:uppercase;font-weight:bold;letter-spacing:2px;}
.cn-nav > a{position:absolute;top:0px;height:70px;width:70px;}
a.cn-nav-prev{left:0px;}
a.cn-nav-next{right:0px;}
.cn-nav a span{width:46px;height:46px;display:block;text-indent:-9000px;-moz-border-radius:23px;-webkit-border-radius:23px;border-radius:23px;cursor:pointer;opacity:0.9;position:absolute;top:50%;left:50%;background-size:17px 25px;margin:-23px 0 0 -23px;-webkit-transition:all 0.4s ease;-moz-transition:all 0.4s ease;-o-transition:all 0.4s ease;-ms-transition:all 0.4s ease;transition:all 0.4s ease;}
.cn-nav a.cn-nav-prev span{background:#666 url(../images/prev.png) no-repeat center center;}
.cn-nav a.cn-nav-next span{background:#666 url(../images/next.png) no-repeat center center;}
.cn-nav a div{width:0px;height:0px;position:absolute;top:50%;left:50%;overflow:hidden;background-size:100% 100%;background-position:center center;background-repeat:no-repeat;margin:0px;-moz-border-radius:0px;-webkit-border-radius:0px;border-radius:0px;-webkit-transition:all 0.2s ease-out;-moz-transition:all 0.2s ease-out;-o-transition:all 0.2s ease-out;-ms-transition:all 0.2s ease-out;transition:all 0.2s ease-out;}
.cn-nav a:hover span{width:100px;height:100px;-moz-border-radius:50px;-webkit-border-radius:50px;border-radius:50px;opacity:0.6;margin:-50px 0 0 -50px;background-size:22px 32px;background-color:#a8872d;}
.cn-nav a:hover div{width:90px;height:90px;background-size:120% 120%;margin:-45px 0 0 -45px;-moz-border-radius:45px;-webkit-border-radius:45px;border-radius:45px;}

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