以下是 jquery焦点图轮播插件excoloSlider轮播滚动切换特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jquery焦点图轮播插件excoloSlider</title>
<link href="css/960.min.css" rel="stylesheet" />
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/jquery.excoloSlider.js"></script>
<link href="css/jquery.excoloSlider.css" rel="stylesheet" />
<script src="js/adapt.min.js"></script>
<script>
$(function () {
$("#sliderA").excoloSlider();
});
</script>
</head>
<body>
<div class="h20"></div>
<div class="container_12">
<div class="grid_8">
<div id="sliderA" class="slider">
<img src="images/image1.jpg" data-plugin-slide-caption="This is a <b>caption</b> in slide 1. <a href='#/jiaoben/' target='_blank' title='Link to the photographer of the photos used in examples'>Photo by Fursik</a>" />
<img src="images/image2.jpg" />
<img src="images/image3.jpg" />
<div style="background-color: #ff7500" data-plugin-slide-caption="This is the caption of a <b>DIV</b> slide.">
<h2>A DIV slide</h2><img style="width:60%;border:1px solid #fff;background-color: #fff;float:right;margin: 10px;padding: 10px;" src="images/image4.jpg" /></div>
<img src="images/image5.jpg" />
<img src="images/image6.jpg" />
<img src="images/image7.jpg" />
<img src="images/image8.jpg" />
</div>
</div>
</div>
</body>
</html>JS代码(adapt.min.js):
(function(a,b,c,d){
function m(a,b){
l.href=e,f=e,h&&h(a,b)}
function n(){
clearTimeout(g);
for(var c,h,n,o,p,q,a=b.documentElement?b.documentElement.clientWidth:0,r=k,s=k-1;
r--;
)if(e="",c=j[r].split("="),h=c[0],q=c[1]?c[1].replace(/\s/g,""):d,p=h.match("to"),n=p?parseInt(h.split("to")[0],10):parseInt(h,10),o=p?parseInt(h.split("to")[1],10):d,!o&&r===s&&a>n||a>n&&o>=a){
q&&(e=i+q);
break}
f?f!==e&&m(r,a):(m(r,a),i&&(b.head||b.getElementsByTagName("head")[0]).appendChild(l))}
function o(){
clearTimeout(g),g=setTimeout(n,16)}
if(c){
var e,f,g,h="function"==typeof c.callback?c.callback:d,i=c.path?c.path:"",j=c.range,k=j.length,l=b.createElement("link");
l.rel="stylesheet",l.media="screen",n(),c.dynamic&&(a.addEventListener?a.addEventListener("resize",o,!1):a.attachEvent?a.attachEvent("onresize",o):a.onresize=o)}
}
)(this,this.document,ADAPT_CONFIG);
JS代码(jquery.excoloSlider.min.js):
/*! * Excolo Slider - A simple jquery slider * * Examples and documentation at:* http://excolo.github.io/Excolo-Slider/ * * Author:Nikolaj Dam Larsen * Version:1.0.5 (30-JUNE-2013) * * Released under the MIT license * https://github.com/Excolo/ExcoloSlider/blob/master/MIT-LICENSE */
;
(function(d,c,a,e){
var b;
b=(function(){
function f(h,g){
this.elem=h;
this.$elem=d(h);
this.options=g;
this.metadata=this.$elem.data("plugin-options")}
return f}
)();
b.prototype={
defaults:{
width:800,height:530,autoSize:true,touchNav:true,mouseNav:true,prevnextNav:true,prevnextAutoHide:true,pagerNav:true,startSlide:1,autoPlay:true,delay:0,interval:3000,repeat:true,playReverse:false,hoverPause:true,captionAutoHide:false,animationCssTransitions:true,animationDuration:500,animationTimingFunction:"linear",prevButtonClass:"slide-prev",nextButtonClass:"slide-next",prevButtonImage:"Images/prev.png",nextButtonImage:"Images/next.png",activeSlideClass:"es-active",slideCaptionClass:"es-caption",pagerClass:"es-pager",pagerImage:"Images/pagericon.png"}
,init:function(){
var f,m,h,i,g,k,o,j,l,n;
f=this;
f.config=d.extend({
}
,f.defaults,f.options,f.metadata);
f.data=d.data(f);
d.data(f,"currentSlide",f.config.playReverse&&f.config.startSlide==1?f.$elem.children().length-1:f.config.startSlide-1);
d.data(f,"nextSlide",f.data.currentSlide);
d.data(f,"totalslides",f.$elem.children().length);
d.data(f,"browserEnginePrefix",f._getBrowserEnginePrefix());
d.data(f,"isPlaying",false);
d.data(f,"isAnimating",false);
d.data(f,"playPaused",false);
d.data(f,"justTouched",false);
d.data(f,"isMoving",false);
d.data(f,"width",f.config.width);
f.$elem.addClass("slider");
f.$elem.css({
position:"relative"}
);
f.$elem.wrapInner("<div class='slide-wrapper'>",f.$elem).children();
f.$elem.wrapInner("<div class='slide-container'>",d(".slide-wrapper",f.$elem)).children();
f.$elem.wrapInner("<div class='slide-dragcontainer'>",d(".slide-container",f.$elem)).children();
d(".slide-container",f.$elem).css({
position:"relative"}
);
n=d(".slide-dragcontainer",f.$elem);
j=d(".slide-wrapper",f.$elem);
l=j.children();
if(f.config.prevnextNav){
j.after("<div class='"+f.config.nextButtonClass+"'>");
j.after("<div class='"+f.config.prevButtonClass+"'>");
i=d("."+f.config.nextButtonClass,f.$elem);
h=d("."+f.config.prevButtonClass,f.$elem);
i.append("<img src='"+f.config.nextButtonImage+"'>");
h.append("<img src='"+f.config.prevButtonImage+"'>");
g=i.add(h);
if(f.config.prevnextAutoHide){
g.hide();
f.$elem.hover(function(){
g.fadeIn("fast")}
,function(){
g.fadeOut("fast")}
)}
h.on("click",function(p){
f.previous()}
);
i.on("click",function(p){
f.next()}
)}
if(f.config.pagerNav){
f.$elem.append("<ul class='"+f.config.pagerClass+"'>");
l.each(function(){
d("<li />").appendTo(d("."+f.config.pagerClass,f.$elem)).attr("rel",d(this).index()).css({
"background-image":"url('"+f.config.pagerImage+"')"}
).on("click",function(){
d.data(f,"nextSlide",parseInt(d(this).attr("rel")));
f._prepareslides(true);
f._slide(true);
f._manualInterference()}
)}
)}
l.each(function(){
k=d(this);
o=k.data("plugin-slide-caption");
if(o===e){
return}
if(this.tagName=="IMG"){
k.wrap("<div>");
k.after("<div class='"+f.config.slideCaptionClass+"'>");
k.next().append(o)}
else{
k.append("<div class='"+f.config.slideCaptionClass+"'>");
k.children().last().append(o)}
if(f.config.captionAutoHide){
d("."+f.config.slideCaptionClass,f.$elem).hide();
f.$elem.hover(function(){
d("."+f.config.slideCaptionClass,f.$elem).fadeIn("fast")}
,function(){
d("."+f.config.slideCaptionClass,f.$elem).fadeOut("fast")}
)}
}
);
j.children().addClass("slide").css({
position:"absolute",top:0,left:0,width:f.data.width,height:f.config.height,zIndex:0,display:"none",webkitBackfaceVisibility:"hidden"}
);
m=l.height();
j.css({
position:"relative",left:0,height:m}
);
d(".slide-container",f.$elem).css({
width:f.data.width,overflow:"hidden",height:m}
);
if(f.config.touchNav){
n.on("touchstart",function(q){
var p=q.originalEvent.touches[0];
q.preventDefault();
f._onMoveStart(p.pageX,p.pageY);
return q.stopPropagation()}
);
n.on("touchmove",function(q){
var p=q.originalEvent.touches[0];
q.preventDefault();
f._onMove(p.pageX,p.pageY);
return q.stopPropagation()}
);
n.on("touchend",function(p){
p.preventDefault();
f._onMoveEnd();
return p.stopPropagation()}
)}
if(f.config.mouseNav){
n.css("cursor","pointer");
n.on("dragstart",function(p){
return false}
);
n.on("mousedown",function(p){
f._onMoveStart(p.clientX,p.clientY);
d(c).attr("unselectable","on").on("selectstart",false).css("user-select","none").css("UserSelect","none").css("MozUserSelect","none");
return p.stopPropagation()}
);
d(c).on("mousemove",function(p){
f._onMove(p.clientX,p.clientY);
return p.stopPropagation()}
);
d(c).on("mouseup",function(p){
f._onMoveEnd();
d(c).removeAttr("unselectable").unbind("selectstart").css("user-select",null).css("UserSelect",null).css("MozUserSelect",null);
return p.stopPropagation()}
)}
if(f.config.autoSize){
setTimeout(function(){
f._resize()}
,50);
d(c).resize(function(){
return setTimeout(function(){
f._resize()}
,50)}
)}
f._prepareslides();
f.gotoSlide(f.data.currentSlide);
if(f.config.autoPlay){
setTimeout(function(){
f.start()}
,f.config.delay)}
return this}
,previous:function(){
var f,g;
f=this;
d.data(f,"slideDirection","previous");
g=(f.data.nextSlide-1)%f.data.totalslides;
if(!f.config.repeat&&(f.data.nextSlide-1)<0){
if(f.config.playReverse){
d.data(f,"playPaused",true);
f.stop()}
return}
else{
if(f.data.playPaused&&(f.data.nextSlide-1)>0){
d.data(f,"playPaused",false);
f.start()}
}
d.data(f,"nextSlide",g);
return this._slide()}
,next:function(){
var f,g;
f=this;
d.data(f,"slideDirection","next");
g=(f.data.nextSlide+1)%f.data.totalslides;
if(!f.config.repeat&&(f.data.nextSlide+1)>(f.data.totalslides-1)){
if(!f.config.playReverse){
d.data(f,"playPaused",true);
f.stop()}
return}
else{
if(f.data.playPaused&&(f.data.nextSlide+1)<(f.data.totalslides-1)){
d.data(f,"playPaused",false);
f.start()}
}
d.data(f,"nextSlide",g);
return this._slide()}
,start:function(){
var g,f,h;
g=this;
f=d(".slide-container",g.$elem);
if(g.data.isPlaying&&g.data.playTimer){
clearInterval(g.data.playTimer)}
h=setInterval((function(){
if(g.config.playReverse){
g.previous()}
else{
g.next()}
}
),g.config.interval);
d.data(g,"playTimer",h);
if(g.config.hoverPause){
f.unbind();
f.hover(function(){
d.data(g,"playPaused",true);
return g.stop()}
,function(){
d.data(g,"playPaused",false);
return g.start()}
)}
d.data(g,"isPlaying",true)}
,stop:function(){
var g,f;
g=this;
f=d(".slide-container",g.$elem);
clearInterval(g.data.playTimer);
d.data(g,"playTimer",null);
if(g.config.hoverPause&&!g.data.playPaused){
f.unbind()}
d.data(g,"isPlaying",false)}
,gotoSlide:function(k){
var h,g,l,j,i,f;
h=this;
d.data(h,"nextSlide",(k)%h.data.totalslides);
g=(k)%h.data.totalslides;
d.data(h,"currentSlide",g);
l=d(".slide-wrapper",h.$elem);
j=l.children();
i=l.children(":eq("+g+")");
f=i.position().left;
h._setActive(j,i);
if(h.config.animationCssTransitions&&h.data.browserEnginePrefix){
h._transition((-f),0)}
else{
l.position().left=-f}
h._alignSlides(f)}
,_manualInterference:function(){
var f=this;
if(f.data.isPlaying){
f.stop();
f.start()}
}
,_prepareslides:function(f){
var k,m,l,h,j,g;
k=this;
m=d(".slide-wrapper",k.$elem);
l=m.children();
h=k.data.width;
j=Math.floor(k.data.totalslides/2);
g=0;
l.each(function(){
d(this).css({
display:"block",left:h*g,zIndex:10}
);
g++;
if(!f&&k.config.repeat&&g>j){
g=k.data.totalslides%2?-j:-(j-1)}
}
)}
,_onMoveStart:function(f,h){
var g=this;
if(!g.data.isMoving){
d.data(g,"touchTime",Number(new Date()))}
d.data(g,"touchedX",f);
d.data(g,"touchedY",h);
d.data(g,"isMoving",true);
if(g.data.isPlaying){
d.data(g,"playPaused",true);
g.stop()}
}
,_onMove:function(m,l){
var f,n,j,i,k,g,h;
f=this;
if(!f.data.isMoving){
return}
n=d(".slide-wrapper",f.$elem);
d.data(f,"scrolling",Math.abs(m-f.data.touchedX)<Math.abs(l-f.data.touchedY));
if(!f.data.scrolling&&!f.data.isAnimating){
j=n.children(":eq("+f.data.nextSlide+")");
i=j.position().left;
k=f.data.browserEnginePrefix.css;
g=m-f.data.touchedX;
h=f.data.width*0.1;
if(!f.config.repeat){
if(f.data.currentSlide<=0&&-g<-h){
g=h}
else{
if(f.data.currentSlide>=(f.data.totalslides-1)&&-g>h){
g=-h}
}
}
f._transition(-i+g,0)}
}
,_onMoveEnd:function(){
var j,l,k,g,i,f,h;
j=this;
if(!j.data.isMoving){
return}
l=d(".slide-wrapper",j.$elem);
d.data(j,"justTouched",true);
k=l.children(":eq("+j.data.nextSlide+")");
g=k.position().left;
i=j.data.width*0.5;
f=j.data.width*0.1;
h=(Number(new Date())-j.data.touchTime<250);
if(!j.config.repeat&&(l.position().left<-(g)&&j.data.currentSlide>=(j.data.totalslides-1)||l.position().left>(-g)&&j.data.currentSlide<=0)){
j._transition((-g),0.15)}
else{
if(l.position().left>(-g+i)||(l.position().left>(-g+f)&&h)){
this.previous()}
else{
if(l.position().left<-(g+i)||(l.position().left<-(g+f)&&h)){
this.next()}
else{
j._transition((-g),0.15)}
}
}
j._alignSlides(g);
d.data(j,"isMoving",false);
d.data(j,"justTouched",false);
if(j.data.playPaused){
j.start()}
}
,_alignSlides:function(p){
var g,q,o,m,r,h,f,j,l,k,n;
g=this;
if(!g.config.repeat){
return}
q=d(".slide-wrapper",g.$elem);
o=q.children();
if(p===e){
m=q.children(":eq("+g.data.nextSlide+")");
p=m.position().left}
p=Math.round(p,0);
r=Math.ceil(g.data.totalslides/2);
h=g.data.width;
f=0;
o.each(function(){
var i=d(this).position().left;
if(i>p-h){
f++}
}
);
j=r-f;
if(j<0){
j=g.data.totalslides%2==0?j+1:j}
for(l=0;
l<Math.abs(j);
l++){
k=[].reduce.call(o,function(i,s){
return d(i).offset().left<d(s).offset().left?i:s}
);
n=[].reduce.call(o,function(i,s){
return d(i).offset().left>d(s).offset().left?i:s}
);
if(j>0){
d(k).css("left",Math.round(d(n).position().left+h))}
else{
d(n).css("left",Math.round(d(k).position().left-h))}
}
}
,_slide:function(f){
var i,h,l,k,j,g;
i=this;
h=i.data.nextSlide;
l=d(".slide-wrapper",i.$elem);
k=l.children();
j=l.children(":eq("+h+")");
g=Math.round(j.position().left);
i._setActive(k,j);
if(!f){
i._alignSlides(g)}
d.data(i,"isAnimating",true);
if(i.config.animationCssTransitions&&i.data.browserEnginePrefix){
i._transition((-g),(i.data.justTouched?0.5:1));
l.on("transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd",function(){
d.data(i,"currentSlide",h);
l.unbind("transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd");
if(f){
i._alignSlides(g)}
}
)}
else{
l.stop().animate({
left:-g}
,i.config.animationDuration,function(){
d.data(i,"currentSlide",h);
d.data(i,"isAnimating",false);
d.data(i,"justTouched",false)}
)}
}
,_transition:function(g,i){
var k,m,j,f,l,h;
k=this;
m=d(".slide-wrapper",k.$elem);
if(i===e||i<0){
i=1}
j=k.data.browserEnginePrefix.css;
f=j+"Transform";
l=j+"TransitionDuration";
h=j+"TransitionTimingFunction";
m[0].style[l]=(k.config.animationDuration*i)+"ms";
m[0].style[h]=k.config.animationTimingFunction;
m[0].style[f]="translateX("+g+"px)";
m.on("transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd",function(){
d.data(k,"isAnimating",false);
d.data(k,"justTouched",false);
m.unbind("transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd")}
)}
,_setActive:function(j,i){
var h=this,g,f;
g=h.config.activeSlideClass;
j.removeClass(g);
i.addClass(g);
if(h.config.pagerNav){
f=d("."+h.config.pagerClass,h.$elem);
f.children().removeClass("act");
f.find("[rel="+i.index()+"]").addClass("act")}
}
,_resize:function(){
var j,f,h,g,i;
j=this;
if(j.data.isPlaying){
d.data(j,"playPaused",true);
j.stop()}
f=j.$elem.width();
h=j.config.height/j.config.width;
g=f*h;
d.data(j,"width",f);
d(".slide",j.$elem).css({
width:f,height:g}
);
i=d(".slide-wrapper",j.$elem).children().height();
d(".slide-wrapper",j.$elem).css({
height:i}
);
d(".slide-container",j.$elem).css({
width:f,height:i}
);
if(j.data.playPaused){
d.data(j,"playPaused",false);
j.start()}
j._prepareslides();
j.gotoSlide(j.data.currentSlide)}
,_getBrowserEnginePrefix:function(){
var g,h,f;
g="Transition";
h=["Moz","Webkit","Khtml","O","ms"];
f=0;
while(f<h.length){
if(typeof a.body.style[h[f]+g]==="string"){
return{
css:h[f]}
}
f++}
return false}
}
;
b.defaults=b.prototype.defaults;
d.fn.excoloSlider=function(f){
return this.each(function(){
new b(this,f).init()}
)}
}
)(jQuery,window,document);
CSS代码(960.min.css):
a{color:#0099ff;text-decoration:none;}
a:hover{color:#0a6eb0;}
body{min-width:650px}
.container_12{margin-left:auto;margin-right:auto;width:650px}
.grid_1,.grid_2,.grid_3,.grid_4,.grid_5,.grid_6,.grid_7,.grid_8,.grid_9,.grid_10,.grid_11,.grid_12{display:inline;float:left;margin-left:10px;margin-right:10px}
.push_1,.pull_1,.push_2,.pull_2,.push_3,.pull_3,.push_4,.pull_4,.push_5,.pull_5,.push_6,.pull_6,.push_7,.pull_7,.push_8,.pull_8,.push_9,.pull_9,.push_10,.pull_10,.push_11,.pull_11{position:relative}
.alpha{margin-left:0}
.omega{margin-right:0}
.container_12 .grid_1{width:60px}
.container_12 .grid_2{width:140px}
.container_12 .grid_3{width:220px}
.container_12 .grid_4{width:300px}
.container_12 .grid_5{width:380px}
.container_12 .grid_6{width:460px}
.container_12 .grid_7{width:540px}
.container_12 .grid_8{width:620px}
.container_12 .grid_9{width:700px}
.container_12 .grid_10{width:780px}
.container_12 .grid_11{width:860px}
.container_12 .grid_12{width:940px}
.container_12 .prefix_1{padding-left:80px}
.container_12 .prefix_2{padding-left:160px}
.container_12 .prefix_3{padding-left:240px}
.container_12 .prefix_4{padding-left:320px}
.container_12 .prefix_5{padding-left:400px}
.container_12 .prefix_6{padding-left:480px}
.container_12 .prefix_7{padding-left:560px}
.container_12 .prefix_8{padding-left:640px}
.container_12 .prefix_9{padding-left:720px}
.container_12 .prefix_10{padding-left:800px}
.container_12 .prefix_11{padding-left:880px}
.container_12 .suffix_1{padding-right:80px}
.container_12 .suffix_2{padding-right:160px}
.container_12 .suffix_3{padding-right:240px}
.container_12 .suffix_4{padding-right:320px}
.container_12 .suffix_5{padding-right:400px}
.container_12 .suffix_6{padding-right:480px}
.container_12 .suffix_7{padding-right:560px}
.container_12 .suffix_8{padding-right:640px}
.container_12 .suffix_9{padding-right:720px}
.container_12 .suffix_10{padding-right:800px}
.container_12 .suffix_11{padding-right:880px}
.container_12 .push_1{left:80px}
.container_12 .push_2{left:160px}
.container_12 .push_3{left:240px}
.container_12 .push_4{left:320px}
.container_12 .push_5{left:400px}
.container_12 .push_6{left:480px}
.container_12 .push_7{left:560px}
.container_12 .push_8{left:640px}
.container_12 .push_9{left:720px}
.container_12 .push_10{left:800px}
.container_12 .push_11{left:880px}
.container_12 .pull_1{left:-80px}
.container_12 .pull_2{left:-160px}
.container_12 .pull_3{left:-240px}
.container_12 .pull_4{left:-320px}
.container_12 .pull_5{left:-400px}
.container_12 .pull_6{left:-480px}
.container_12 .pull_7{left:-560px}
.container_12 .pull_8{left:-640px}
.container_12 .pull_9{left:-720px}
.container_12 .pull_10{left:-800px}
.container_12 .pull_11{left:-880px}
.clear{clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0}
.clearfix:before,.clearfix:after,.container_12:before,.container_12:after{content:'.';display:block;overflow:hidden;visibility:hidden;font-size:0;line-height:0;width:0;height:0}
.clearfix:after,.container_12:after{clear:both}
.clearfix,.container_12{zoom:1}
CSS代码(jquery.excoloSlider.css):
/* slider----------------------------------------------------------*/
.slider{border:1px solid #ccc;padding:10px;}
.slide > *{max-width:100%;}
.slider .slide-prev{cursor:pointer;height:48px;width:48px;position:absolute;left:0;top:50%;margin-top:-24px;background-color:rgba(255,255,255,0.8);padding:0px;}
.slider .slide-next{cursor:pointer;height:48px;width:48px;position:absolute;right:0;top:50%;margin-top:-24px;background-color:rgba(255,255,255,0.8);padding:0px;}
.slider .slide-next:hover,.slider .slide-prev:hover{background-color:rgba(255,255,255,0.9);}
.slider .slide-next img,.slider .slide-prev img{position:relative;top:0;left:0;max-height:100%;max-width:100%;}
.es-caption{position:absolute;bottom:0;text-align:center;background-color:rgba(0,0,0,0.8);color:#fff;font-size:14px;padding:16px;margin:10px;width:auto;left:0;right:0;border-radius:6px;-moz-border-radius:6px;-webkit-border-radius:6px;-khtml-border-radius:6px;border:1px solid rgba(255,255,255,0.3);}
ul.es-pager{display:block;width:100%;text-align:center;margin:5px 0 0 0;padding:0;line-height:0px;}
ul.es-pager li{display:inline-block;margin:0;padding:0;height:16px;width:16px;/*background-image:url("../Images/pagericon.png");*/
background-repeat:no-repeat;background-position:0 -16px;cursor:pointer;}
ul.es-pager li:hover,ul.es-pager li.act{background-position:0 0;}
ul.es-pager li.act{cursor:default;}
分享到QQ
分享到微博
微信扫一扫
