以下是 jquery图片轮播插件anoslide轮播滚动切换特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html>
<html>
<head>
<title>jqueryͼ</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<!-- CDN -->
<link href="css/reset.css" rel="stylesheet" type="text/css" />
<link href="css/import.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.10.2.min.js"></script>
<!-- /.CDN -->
<script type="text/javascript" src="js/jquery.anoslide.js"></script>
<style type="text/css">
.carousel { position:relative; min-height: 20px; height:auto !important; height: 20px; background:url(images/loader.gif) center center no-repeat; }
.carousel .next,
.carousel .prev { display:none; width:56px; height:56px; position:absolute; bottom:20px; left:50%; margin-top:-28px; z-index:9999; cursor:pointer; }
.carousel .prev { margin-left:-60px; background:url(images/prev.png) 0 0 no-repeat; }
.carousel .next { margin-right:-60px; background:url(images/next.png) 0 0 no-repeat; }
.carousel li { display:none; }
.carousel li img { width:100%; height:auto; }
.paging { position:absolute; z-index:9998; }
.paging > a { display:block; cursor:pointer; width:40px; height:40px; float:left; background:url(images/dots.png) 0px -40px no-repeat; }
.paging > a:hover,
.paging > a.current { background:url(images/dots.png) 0px 0px no-repeat; }
.badge { display:block; width:104px; height:104px; background:url(images/badge.png) 0 0 no-repeat; z-index:9000; position:absolute; top:-3px; left:-3px; }
img {
-webkit-user-select: none; /* Chrome all / Safari all */
-moz-user-select: none; /* Firefox all */
-ms-user-select: none; /* IE 10+ */
-o-user-select: none;
user-select: none;
}
/* Figure */
</style>
<!--[if lt IE 9]>
<script>
document.createElement('header');
document.createElement('nav');
document.createElement('section');
document.createElement('article');
document.createElement('aside');
document.createElement('footer');
document.createElement('figure');
</script>
<![endif]-->
</head>
<body>
<div class="wrapper">
<h2>1. Mixed content demo (One visible item)<em>Resize your browser to review responsive effect</em></h2>
<div class="carousel">
<a class="prev" data-prev-mixed></a>
<ul>
<li>
<figure><img data-src="images/slides/1.jpg" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" /></figure>
</li>
<li>
<figure><img data-src="images/slides/2.jpg" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" /></figure>
</li>
<li>
<figure><img data-src="images/slides/3.jpg" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" /></figure>
</li>
<li>
<figure><img data-src="images/slides/4.jpg" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" /></figure>
</li>
<li>
<figure><img data-src="images/slides/5.jpg" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" /></figure>
</li>
<li>
<figure><img data-src="images/slides/6.jpg" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" /></figure>
</li>
<li>
<figure><img data-src="images/slides/7.jpg" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" /></figure>
</li>
</ul>
<a class="next" data-next-mixed></a>
<a class="badge"></a>
</div>
</div>
<script type="text/javascript">
$('.carousel ul').anoSlide(
{
items: 1,
speed: 500,
prev: 'a.prev[data-prev-mixed]',
next: 'a.next[data-next-mixed]',
lazy: true
})
</script>
<div class="wrapper">
<h2>2. Multiple items<em>Resize your browser to review responsive effect</em></h2>
<div class="carousel" data-mixed>
<a class="prev" data-prev></a>
<ul>
<li>
<div class="wrap"><figure><img data-src="images/slides/thumbnails/1.jpg" src=data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="" /></figure></div>
</li>
<li>
<div class="wrap"><figure><img data-src="images/slides/thumbnails/2.jpg" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" /></figure></div>
</li>
<li>
<div class="wrap"><figure><img data-src="images/slides/thumbnails/3.jpg" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" /></figure></div>
</li>
<li>
<div class="wrap"><figure><img data-src="images/slides/thumbnails/4.jpg" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" /></figure></div>
</li>
<li>
<div class="wrap"><figure><img data-src="images/slides/thumbnails/5.jpg" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" /></figure></div>
</li>
<li>
<div class="wrap"><figure><img data-src="images/slides/thumbnails/6.jpg" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" /></figure></div>
</li>
<li>
<div class="wrap"><figure><img data-src="images/slides/thumbnails/7.jpg" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" /></figure></div>
</li>
</ul>
<a class="next" data-next></a>
<a class="badge"></a>
</div>
</div>
<script type="text/javascript">
$('.carousel[data-mixed] ul').anoSlide(
{
items: 5,
speed: 500,
prev: 'a.prev[data-prev]',
next: 'a.next[data-next]',
lazy: true,
delay: 100
})
</script>
</div>
</div>
</div>
</div>
<div class="wrapper">
<h2>3. Paging<em>Anoslide is designed to provide suitable hooks in the form of callback functions allowing you to easily extend the plugin without updating it's core.</em></h2>
<div class="carousel pagination">
<a class="prev" data-prev-paging></a>
<ul>
<li>
<figure><img data-src="images/slides/1.jpg" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" /></figure>
</li>
<li>
<figure><img data-src="images/slides/2.jpg" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" /></figure>
</li>
<li>
<figure><img data-src="images/slides/3.jpg" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" /></figure>
</li>
<li>
<figure><img data-src="images/slides/4.jpg" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" /></figure>
</li>
<li>
<figure><img data-src="images/slides/5.jpg" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" /></figure>
</li>
<li>
<figure><img data-src="images/slides/6.jpg" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" /></figure>
</li>
<li>
<figure><img data-src="images/slides/7.jpg" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" /></figure>
</li>
</ul>
<a class="next" data-next-paging></a>
<a class="badge"></a>
</div>
</div>
<script type="text/javascript">
$('.carousel.pagination ul').anoSlide(
{
items: 1,
speed: 500,
prev: 'a.prev[data-prev-paging]',
next: 'a.next[data-next-paging]',
lazy: true,
onConstruct: function(instance)
{
var paging = $('<div/>').addClass('paging fix').css(
{
position: 'absolute',
top: 1,
left:50 + '%',
width: instance.slides.length * 40,
marginLeft: -(instance.slides.length * 40)/2
})
/* Build paging */
for (i = 0, l = instance.slides.length; i < l; i++)
{
var a = $('<a/>').data('index', i).appendTo(paging).on(
{
click: function()
{
instance.stop().go($(this).data('index'));
}
});
if (i == instance.current)
{
a.addClass('current');
}
}
instance.element.parent().append(paging);
},
onStart: function(ui)
{
var paging = $('.paging');
paging.find('a').eq(ui.instance.current).addClass('current').siblings().removeClass('current');
}
})
</script>
</div>
</div>
</div>
</div>
<div class="wrapper">
<h2>3. Captions example<em>Check out the example below and see how a captions can be added without changing anoSlide's code at all. It's really fun.</em></h2>
<div class="carousel captions">
<a class="prev" data-prev-caption></a>
<ul>
<li data-caption="Adding captions is really easy">
<figure><img data-src="images/slides/1.jpg" src="" /></figure>
</li>
<li data-caption="anoSlide's callback functions can be used for adding Captions">
<figure><img data-src="images/slides/2.jpg" src="" /></figure>
</li>
<li data-caption="<span style='color:#00f0ff'>HTML - No problem</span><br /><br />It's really up to You to decide whether to use HTML or not.">
<figure><img data-src="images/slides/3.jpg" src="" /></figure>
</li>
</ul>
<a class="next" data-next-caption></a>
<a class="badge"></a>
</div>
</div>
<script type="text/javascript">
$('.carousel.captions ul').anoSlide(
{
items: 1,
speed: 500,
prev: 'a.prev[data-prev-caption]',
next: 'a.next[data-next-caption]',
lazy: true,
onStart: function(ui)
{
ui.slide.element.find('.caption').remove();
},
onEnd: function(ui)
{
var content = ui.slide.element.data('caption');
var caption = $('<div/>').addClass('caption').css(
{
position: 'absolute',
background: 'rgb(0,0,0)',
color: 'rgb(255,255,255)',
textShadow: 'rgb(0,0,0) -1px -1px',
opacity: 0.5,
top: -100,
left: 50,
padding: 20,
webkitBorderRadius: 5,
mozBorderRadius: 5,
borderRadius: 5
}).html(content);
caption.appendTo(ui.slide.element).animate(
{
top:50
});
}
})
</script>
</div>
<div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
Demo.bind()
</script>
</body>
</html>JS代码(jquery.anoslide.js):
/*** anoSlide - Ultra lightweight responsive slider** @version 1.0* @author Angel Kostadinov* @copyright Anowave*/
(function (){
var anoSlide = function(element,options){
this.slides = [];
this.progress = false;
this.current = 0;
this.element = $(element);
this.options = $.extend({
items:5,speed:1000,auto:0,autoStop:true,next:'',prev:'',responsiveAt:480,delay:0,lazy:false,onConstruct:function(instance){
}
,onStart:function(ui){
}
,onEnd:function(ui){
}
}
,options);
/* Reference */
this.defaults ={
items:this.options.items,auto:0}
/* Preloader */
this.preloader = new anoPreload();
this.timeout = null;
}
;
anoSlide.prototype ={
construct:function(){
this.defaults.auto = this.options.auto;
this.element.css({
position:'relative',overflow:'hidden',display:'block'}
).children().css({
position:'absolute',cursor:'pointer',overflow:'hidden',display:'block'}
).each(delegate(this,function(index,slide){
this.slides.push({
element:$(slide)}
)}
)).find('img').css({
float:'left'}
)/* Responsive */
$(window).on({
resize:delegate(this,this.adapt)}
);
/* Activate next and prev controls */
if (this.options.next){
$(this.options.next).on('click',delegate(this,this.next));
}
if (this.options.prev){
$(this.options.prev).on('click',delegate(this,this.prev));
}
if (this.options.autoStop){
this.element.parent().on({
mouseenter:delegate(this,function(element){
if (this.timeout){
clearTimeout(this.timeout);
this.options.auto = 0;
}
}
),mouseleave:delegate(this,function(element){
this.options.auto = this.defaults.auto;
this.go(this.current);
}
)}
)}
this.options.onConstruct.apply(this,[this]);
this.adapt().go(0);
}
,preload:function(index,callback){
var queue = [];
if (this.options.lazy){
for (i = index,l = index + this.options.items;
i < l;
i++){
if (this.slides[i].element.find('img[data-src]').length){
queue.push({
source:this.slides[i].element.find('img[data-src]').data('src')}
);
}
}
}
if (queue.length){
this.preloader.reset().append(queue).preload(callback);
}
else{
callback.apply(this,[{
images:[]}
]);
}
}
,animate:function(index,images,reverse){
if (!this.progress){
this.progress = true;
var viewport ={
w:this.element.parent().outerWidth(),h:this.element.parent().outerHeight()}
/* On start callback */
this.options.onStart.apply(this,[{
instance:this,index:index,slide:this.slides[index]}
]);
$.each((reverse ? this.slides.reverse():this.slides),delegate(this,function(key,slide){
var offset = (reverse ? (-(index - (this.slides.length - 1 - key))):(-(index - key))) * this.element.width()/this.options.items;
/* Check for empty slides */
if (slide.element.find('img[data-src]').length && images.length){
if (1 == this.options.items){
if (index == key){
var i = images.pop().image;
slide.element.find('img[data-src]').replaceWith(i);
}
}
else{
var i = images.pop().image;
slide.element.find('img[data-src]').replaceWith(i);
}
}
var fn = (key == index) ? delegate(this,function(){
this.progress = false;
this.options.onEnd.apply(this,[{
instance:this,index:this.current,slide:this.slides[this.current]}
])if (this.options.auto){
if (this.timeout){
clearTimeout(this.timeout);
}
this.timeout = setTimeout(delegate(this,this.next),this.options.auto);
}
}
):function(){
}
;
slide.element.css({
width:Math.floor(this.element.outerWidth()/this.options.items) + 'px',height:'auto'}
).delay(key * this.options.delay).animate({
left:offset + 'px'}
,this.options.speed,fn);
}
));
if (reverse){
this.slides.reverse();
}
this.element.animate({
height:this.slides[index].element.outerHeight()-2}
);
/* Toggle controls */
var queue = this.slides.length - this.options.items - this.current;
if (!queue){
this.disable.next.call(this);
}
else this.enable.next.call(this);
if (index - 1 < 0){
this.disable.prev.call(this);
}
else{
this.enable.prev.call(this);
}
}
return this;
}
,adapt:function(){
var viewport ={
w:this.element.parent().outerWidth(),h:this.element.parent().outerHeight()}
if (viewport.w < this.options.responsiveAt){
this.options.items = 1;
}
else{
this.options.items = this.defaults.items;
}
$.each(this.slides,delegate(this,function(key,slide){
var offset = -(this.current - key) * this.element.width()/this.options.items;
slide.element.stop().css({
width:this.element.width()/this.options.items,left:offset}
,this.options.speed,(key == this.slides.length - 1) ? delegate(this,function(){
this.progress = false;
}
):function(){
}
)}
));
if (0 !== this.slides[this.current].element.parent().height()){
this.element.css({
height:this.slides[this.current].element.outerHeight()-2}
)}
return this;
}
,next:function(){
var queue = this.slides.length - this.options.items - this.current;
if (queue){
this.go(this.current + 1);
}
else{
this.go(0);
}
}
,prev:function(){
this.go(this.current - 1,true);
}
,stop:function(){
if (this.timeout){
clearTimeout(this.timeout);
}
this.progress = false;
return this;
}
,go:function(index,reverse){
reverse = reverse || false;
if (!this.progress){
if (index < 0 || index > this.slides.length - 1){
return false;
}
else{
this.current = index;
this.preload(index,delegate(this,function(ui){
this.animate(index,ui.images,reverse);
}
));
}
}
}
,enable:{
next:function(){
$(this.options.next).removeClass('disabled').fadeIn(300);
}
,prev:function(){
$(this.options.prev).removeClass('disabled').fadeIn(300);
}
}
,disable:{
next:function(){
$(this.options.next).addClass('disabled').fadeOut(300);
}
,prev:function(){
$(this.options.prev).addClass('disabled').fadeOut(300);
}
}
}
var anoPreload = function(){
this.queue = [];
this.images = [];
this.total = 0;
this.config ={
cache:true}
;
this.time ={
start:0,end:0}
}
anoPreload.prototype ={
onComplete:function(ui){
}
,reset:function(){
this.queue= [];
this.images = [];
this.total= 0;
return this;
}
,append:function(element){
var queue = this.queue;
$.each(element,function(index,element){
queue.push(element);
}
);
return this;
}
,finish:function(event,index,image){
/* Decrease number of finished items */
this.total--;
$.each(this.images,function(x,i){
if (i.index == index){
i.size ={
width:image.width,height:image.height}
}
}
)/* Check if no more items to preload */
if (0 == this.total){
this.time.end = new Date().getTime();
this.onComplete.apply(this,[{
time:((this.time.end - this.time.start)/1000).toPrecision(2),images:this.images}
])}
}
,preload:function(callback){
/* Set callback function */
this.onComplete = callback || this.onComplete;
this.time.start = new Date().getTime();
/* Get queue length */
this.total = i = this.queue.length;
while(i--){
var image = new Image();
/* Push image */
this.images.push({
index:i,image:image,size:{
width:0,height:0}
}
);
image.onload = image.onerror = image.onabort = delegate(this,this.finish,([i,image]));
/* Set image source */
image.src = this.config.cache ? this.queue[i].source:(this.queue[i].source + '?u=' + (new Date().getTime()));
}
}
}
$.fn.anoSlide = function (options){
return this.each(function (){
if (undefined == $(this).data('anoSlide')){
var a = new anoSlide(this,options).construct();
$(this).data('anoSlide',a);
}
}
);
}
;
var delegate = function(target,method,args){
return (typeof method === "function") ? function(){
/* Override prototype */
arguments.push = Array.prototype.push;
/* Push additional arguments */
for (var arg in args){
arguments.push(args[arg]);
}
return method.apply(target,arguments);
}
:function(){
return false;
}
;
}
}
)();
CSS代码(import.css):
@import url('reset.css');@import url('tabs.css');/*** Anowave tools common styles** The CSS rules below are used only for tool demo pages and are NOT required by tools themselves.* All required tool CSS can be found in the tool download file (Zip)** @version 1.0* @copyright Anowave*/
body{background:#f8f8f8;border-top:5px solid #fb8800;padding:20px;}
.framework{background:url(images/logo.png) 25px 29px no-repeat;}
.framework a{display:block;height:100px;}
.wrapper{position:relative;margin:0px auto;padding:0px 20px 0px 20px;max-width:1200px;}
.wrapper.wrapper-tabs{margin-top:20px;margin-bottom:20px;}
.wrapper.wrapper-tabs > div{background:#fbfbfb;padding:0px 20px 0px 20px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;border:1px solid #bfbfbf;}
.wrap{padding:5px;}
/* Buttons */
a.button{display:block;float:left;}
a.button{background:url(images/buttons/input.button.right.png) top right no-repeat;padding-right:10px;}
a.button > span{float:left;position:relative;display:block;height:34px;line-height:26px;color:#000;background:url(images/buttons/input.button.left.png) top left no-repeat;padding-left:20px;}
a.button > span > span{float:left;color:#d85800;zoom:1;filter:progid:DXImageTransform.Microsoft.Blur(pixelradius=2);padding-right:20px;}
a.button > span > span i{display:block;width:16px;height:16px;position:absolute;top:6px;left:-24px;background:url(images/loader/button.gif) center center no-repeat;}
a.button > span > span:before{color:#fff;content:attr(data-text);position:absolute;top:1px;left:21px;}
a.button:hover{background:url(images/buttons/input.button.right.over.png) top right no-repeat;padding-right:10px;}
a.button:hover > span{position:relative;display:block;height:34px;line-height:26px;color:#ffdad3;cursor:pointer;background:url(images/buttons/input.button.left.over.png) top left no-repeat;padding-left:20px;}
h2{display:block;margin:20px 0px 20px 0px;color:#2e2e2e;font-weight:normal;font-size:15px;text-shadow:0 0 1px rgba(255,255,255,0.2);}
h2 em{display:block;color:#959595;margin:5px 0px 0px 15px;}
h3{display:block;margin:20px 0px 5px 0px;color:#909090;}
pre{-moz-tab-size:4;-o-tab-size:4;tab-size:4;}
.copy,.copy p{line-height:16px;}
.copy p{display:block;margin:5px 0px 5px 0px;}
.copy h1{display:block;margin-bottom:20px;text-transform:uppercase;}
.pin{position:absolute;top:-100px;left:50%;background:#fb8800;margin:0px auto;padding:20px;color:#fff;text-shadow:#e87e00 -1px -1px;white-space:nowrap;}
.footer{padding:40px;background:#393939;color:#fff;text-shadow:#202020 -1px -1px;line-height:18px;font-size:11px;}
CSS代码(reset.css):
/*** Crossbrowser reset sheet*/
*{margin:0;padding:0;}
html,body,h1,h2,h3,h4,h5,h6,form,select,input,textarea,p,ul,li,option{padding:0;margin:0;font-weight:normal;font-size:12px;font-family:Arial,sans-serif;}
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;font-size:12px;background:transparent;font-size:12px;font-family:Arial,sans-serif;}
input,textarea{font-family:Arial,sans-serif;}
strong{}
body{line-height:1;}
/* Reset lists */
ol,ul,li{list-style:none;}
blockquote,q{quotes:none;}
/* remember to define focus styles! */
:focus{outline:0;}
ins{text-decoration:none}
del{text-decoration:line-through}
/* tables still need 'cellspacing="0"' in the markup */
table{border-collapse:collapse;border-spacing:0}
/* Reset anchors & remove dashed borders */
a,a:hover,a:active,a:focus,img,img:active,img:focus,div:focus,div:active,input:active,input:focus{outline:0;text-decoration:none;}
input[type="text"],input[type="password"],textarea,select{outline:none;}
input::-moz-focus-inner{border:0;padding:0}
input.checkbox,input.radio{width:14px;height:14px;padding:0px;margin:0px;outline:none}
img{border:none}
/* Chrome fix */
textarea{resize:none}
/* HTML 5 */
header,nav,section,article,aside,footer{display:block;}
/* Crossbrowser float clear */
.fix{position:relative;display:inline-block;zoom:1;display:block;}
.fix:after{content:".";display:block;height:0;clear:both;visibility:hidden;line-height:0px;font-size:0px;}
分享到QQ
分享到微博
微信扫一扫
