html部分：
<!doctype html>
<html lang="zh">
<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> Slider | 带多种过渡特效的jQuery幻灯片插件</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<!-- <div class="container"> -->
<div class="content" style="width:1000px;height:300px;margin:30px auto;overflow:hidden;">
<div id="slider">
<a href="#"><img src="img/demo1.jpg"/></a>
<a href="#"><img src="img/demo2.jpg"/></a>
<a href="#"><img src="img/demo3.jpg"/></a>
<a href="#"><img src="img/demo4.jpg"/></a>
<a href="#"><img src="img/demo5.jpg"/></a>
<a href="#"><img src="img/demo6.jpg"/></a>
</div>
</div>
<!-- </div> -->
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script type="text/javascript" src="js/vmc.slider.full.min.js"></script>
<script type="text/javascript">
$(function() {
$('#slider').vmcSlider({
width: 1000,
height: 300,
gridCol: 10,
gridRow: 5,
gridVertical: 20,
gridHorizontal: 10,
autoPlay: true,
ascending: true,
effects: [
'fade', 'fadeLeft', 'fadeRight', 'fadeTop', 'fadeBottom', 'fadeTopLeft', 'fadeBottomRight',
'blindsLeft', 'blindsRight', 'blindsTop', 'blindsBottom', 'blindsTopLeft', 'blindsBottomRight',
'curtainLeft', 'curtainRight', 'interlaceLeft', 'interlaceRight', 'mosaic', 'bomb', 'fumes'
],
ie6Tidy: false,
random: false,
duration: 2000,
speed: 900
});
});
</script>
</body>
</html>
css部分：
h3{ text-align: center; color:#828282 }
body{ background-color:#2D2D2D}
.vui-slider {
position:relative;
overflow:hidden;
background:#999;
}
.vui-slider .vui-items {
overflow:hidden;
width:100%;
height:100%;
}
.vui-slider .vui-item {
display:none;
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}
.vui-slider .vui-item a,
.vui-slider .vui-item img {
display:block;
padding:0;
margin:0;
border:none;
}
.vui-slider .vui-buttons {
position:absolute;
z-index:5;
bottom:16px;
left:50%;
float:left;
display:inline;
filter:alpha(Opacity=80);
-moz-opacity:0.8;
opacity: 0.8;
}
.vui-slider .vui-button {
float:left;
display:inline;
overflow:hidden;
height:12px;
width:12px;
margin:0 10px;
padding:0;
border:none;
border-radius:6px;
background:#FFF;
cursor:pointer;
}
.vui-slider .vui-button-cur {
background-color:#C00;
}
.vui-slider .vui-transfer {
display:none;
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
z-index:3;
}
.vui-slider .vui-prev {
position:absolute;
top:50%;
left:0;
z-index:5;
width:60px;
height:150px;
margin-top:-75px;
border-radius:0 10px 10px 0;
background:url(prev.gif) no-repeat;
cursor:pointer;
filter:alpha(opacity=30);
-moz-opacity:0.3;
-khtml-opacity:0.3;
opacity:0.3;
transition:0.5s ease;
-o-transition:0.5s ease;
-webkit-transition:0.5s ease;
}
.vui-slider .vui-next {
position:absolute;
top:50%;
right:0;
z-index:5;
width:60px;
height:150px;
margin-top:-75px;
border-radius:10px 0 0 10px;
background:url(next.gif) no-repeat;
cursor:pointer;
filter:alpha(opacity=30);
-moz-opacity:0.3;
-khtml-opacity:0.3;
opacity:0.3;
transition:0.5s ease;
-o-transition:0.5s ease;
-webkit-transition:0.5s ease;
}
.vui-slider .vui-sidebutton-hover {
filter:alpha(opacity=40);
-moz-opacity:0.4;
-khtml-opacity:0.4;
opacity:0.4;
background-color:#000;
}
js部分：
;(function($,undefined){var dataKey='vomoc';var ie6=!-[1,]&&!window.XMLHttpRequest;var effects={'fade':function(){var the=this,node=the.node,opts=the.options;node.item.eq(the.index).css({display:'none',zIndex:2}).fadeIn(opts.speed,function(){the._afterTransfer();});}};$.fn.vmcSlider=function(settings){var run=$.type(settings)==='string',args=[].slice.call(arguments,1);if(!this.length)return;return this.each(function(){var $element=$(this),instance=$element.data(dataKey);if(run&&settings.charAt(0)!=='_'&&instance){vmcSlider.prototype[settings]&&vmcSlider.prototype[settings].apply(instance,args);}else if(!run&&!instance){instance=new vmcSlider($element,settings);instance._init();$element.data(dataKey,instance);}});};$.vmcSliderEffects=function(){if($.isPlainObject(arguments[0])){effects=$.extend({},effects,arguments[0]);}else{effects[arguments[0]]=arguments[1];}};var vmcSlider=function($element,settings){var the=this;the.options=$.extend({},the.options,settings);the.node={elem:$element};the.index=0;the.effectIndex=0;the.animateStatus=false;};vmcSlider.prototype.options={width:1000,height:330,gridCol:10,gridRow:5,gridVertical:20,gridHorizontal:10,autoPlay:true,ascending:true,effects:['fade'],ie6Tidy:false,random:false,duration:4000,speed:900};vmcSlider.prototype._init=function(){var the=this,node=the.node,opts=the.options;the._create();the._setSize();the._bind();node.item.eq(the.index).show();node.button.eq(the.index).addClass('vui-button-cur');if(true===opts.autoPlay){$(window).on('load',function(){the.time=setTimeout(function(){if(true===opts.ascending){the._next();}else{the._prev();}},opts.duration);});}};vmcSlider.prototype._create=function(){var the=this,node=the.node,opts=the.options,gridWidth,gridHeight;node.mimic=$('<div class="vui-slider"></div>');node.items=$('<div class="vui-items"></div>').appendTo(node.mimic);node.buttons=$('<div class="vui-buttons"></div>').appendTo(node.mimic);node.prev=$('<div class="vui-prev"></div>').appendTo(node.mimic);node.next=$('<div class="vui-next"></div>').appendTo(node.mimic);node.transfer=$('<div class="vui-transfer"></div>').appendTo(node.mimic);node.elem.children().each(function(){$('<div class="vui-item"></div>').append($(this)).appendTo(node.items);$('<div class="vui-button"></div>').appendTo(node.buttons);});node.item=node.items.children();node.button=node.buttons.children();node.elem.replaceWith(node.mimic);the.stageHtml=['','',''];gridWidth=opts.width/opts.gridCol;gridHeight=opts.height/opts.gridRow;for(var i=0;i<opts.gridCol*opts.gridRow;i++){var top=gridHeight*Math.floor(i/opts.gridCol);var left=gridWidth*(i%opts.gridCol);the.stageHtml[0]+='<div style="position:absolute;top:'+top+'px;left:'+left+'px;';the.stageHtml[0]+='width:'+gridWidth+'px;height:'+gridHeight+'px;background-position:-'+left+'px -'+top+'px;"></div>';}
gridHeight=opts.height/opts.gridHorizontal;for(var i=0;i<opts.gridHorizontal;i++){the.stageHtml[1]+='<div style="position:absolute;top:'+(gridHeight*i)+'px;left:0;';the.stageHtml[1]+='width:'+opts.width+'px;height:'+gridHeight+'px;background-position:0 -'+(gridHeight*i)+'px;"></div>';}
gridWidth=opts.width/opts.gridVertical;for(var i=0;i<opts.gridVertical;i++){the.stageHtml[2]+='<div style="position:absolute;top:0;left:'+(gridWidth*i)+'px;';the.stageHtml[2]+='width:'+gridWidth+'px;height:'+opts.height+'px;background-position:-'+(gridWidth*i)+'px 0;"></div>';}};vmcSlider.prototype._setSize=function(){var the=this,node=the.node,opts=the.options;node.mimic.width(opts.width).height(opts.height);node.buttons.css({left:(opts.width-node.buttons.width())/2});};vmcSlider.prototype._bind=function(){var the=this,node=the.node;node.button.on('click',function(){if(false===the.animateStatus){clearTimeout(the.time);the.index=$(this).index();the._play();}});node.prev.add(node.next).hover(function(){$(this).addClass('vui-sidebutton-hover');},function(){$(this).removeClass('vui-sidebutton-hover');}).on('click',function(){if(false===the.animateStatus){clearTimeout(the.time);if($(this).hasClass('vui-next')){the._next();}else{the._prev();}}});};vmcSlider.prototype._play=function(){var the=this,node=the.node,opts=the.options;node.button.eq(the.index).addClass('vui-button-cur').siblings().removeClass('vui-button-cur');if(opts.effects.length){the.animateStatus=true;node.transfer.children().stop(true);effects[the._getEffect()].call(the);}else{the._afterTransfer();}};vmcSlider.prototype._afterTransfer=function(){var the=this,node=the.node,opts=the.options;node.transfer.hide();node.item.css('zIndex',1).eq(the.index).show().siblings().hide();the.animateStatus=false;if(true===opts.autoPlay){the.time=setTimeout(function(){if(true===opts.ascending){the._next();}else{the._prev();}},opts.duration);}};vmcSlider.prototype._setStage=function(stage){var the=this,node=the.node;the.url=node.item.eq(the.index).find('img')[0].src;node.transfer.html(the.stageHtml[stage]).show().children().css({backgroundImage:'url('+the.url+')'});};vmcSlider.prototype._prev=function(){var the=this,node=the.node;the.index--;if(the.index<0){the.index=node.item.length-1;}
the._play();};vmcSlider.prototype._next=function(){var the=this,node=the.node;the.index++;if(the.index>=node.item.length){the.index=0;}
the._play();};vmcSlider.prototype._getEffect=function(){var the=this,opts=the.options;if(ie6&&opts.ie6Tidy){return'fade';}else{var i=0;if(opts.random===true){i=Math.floor(opts.effects.length*Math.random());}else{i=the.effectIndex;the.effectIndex++;if(the.effectIndex>=opts.effects.length){the.effectIndex=0;}}
return opts.effects[i];}};$.vmcSliderEffects({'fadeTopLeft':function(){var the=this,node=the.node,opts=the.options;the._setStage(0);node.transfer.children().css({opacity:0}).each(function(i){var x=i%opts.gridCol;var y=Math.floor(i/opts.gridCol);var delay=((y+1)/opts.gridRow+(x+1)/opts.gridCol)/2;delay=opts.speed/3*2*delay;$(this).delay(delay).animate({opacity:1},opts.speed/3);}).last().queue(function(){the._afterTransfer();});},'fadeBottomRight':function(){var the=this,node=the.node,opts=the.options;the._setStage(0);node.transfer.children().css({opacity:0}).each(function(i){var x=i%opts.gridCol;var y=Math.floor(i/opts.gridCol);var delay=1-(y/opts.gridRow+x/opts.gridCol)/2;delay=opts.speed/3*2*delay;$(this).delay(delay).animate({opacity:1},opts.speed/3);}).first().queue(function(){the._afterTransfer();});},'fadeLeft':function(){var the=this,node=the.node,opts=the.options;the._setStage(2);node.transfer.children().css({opacity:0}).each(function(i){var delay=opts.speed/3*2/opts.gridVertical*(i+1);$(this).delay(delay).animate({opacity:1},opts.speed/3);}).last().queue(function(){the._afterTransfer();});},'fadeRight':function(){var the=this,node=the.node,opts=the.options;the._setStage(2);node.transfer.children().css({opacity:0}).each(function(i){var delay=opts.speed/3*2/opts.gridVertical*(opts.gridVertical-i);$(this).delay(delay).animate({opacity:1},opts.speed/3);}).first().queue(function(){the._afterTransfer();});},'fadeTop':function(){var the=this,node=the.node,opts=the.options;the._setStage(1);node.transfer.children().css({opacity:0}).each(function(i){var delay=opts.speed/3*2/opts.gridHorizontal*(i+1);$(this).delay(delay).animate({opacity:1},opts.speed/3);}).last().queue(function(){the._afterTransfer();});},'fadeBottom':function(){var the=this,node=the.node,opts=the.options;the._setStage(1);node.transfer.children().css({opacity:0}).each(function(i){var delay=opts.speed/3*2/opts.gridHorizontal*(opts.gridHorizontal-i);$(this).delay(delay).animate({opacity:1},opts.speed/3);}).first().queue(function(){the._afterTransfer();});},'blindsTopLeft':function(){var the=this,node=the.node,opts=the.options;the._setStage(0);node.transfer.children().css({width:0,height:0,opacity:0}).each(function(i){var x=i%opts.gridCol;var y=Math.floor(i/opts.gridCol);var delay=((y+1)/opts.gridRow+(x+1)/opts.gridCol)/2;delay=opts.speed/3*2*delay;$(this).delay(delay).animate({width:opts.width/opts.gridCol,height:opts.height/opts.gridRow,opacity:1},opts.speed/3);}).last().queue(function(){the._afterTransfer();});},'blindsBottomRight':function(){var the=this,node=the.node,opts=the.options;the._setStage(0);node.transfer.children().css({width:0,height:0,opacity:0}).each(function(i){var x=i%opts.gridCol;var y=Math.floor(i/opts.gridCol);var delay=1-(y/opts.gridRow+x/opts.gridCol)/2;delay=opts.speed/3*2*delay;$(this).delay(delay).animate({width:opts.width/opts.gridCol,height:opts.height/opts.gridRow,opacity:1},opts.speed/3);}).first().queue(function(){the._afterTransfer();});},'blindsLeft':function(){var the=this,node=the.node,opts=the.options;the._setStage(2);node.transfer.children().css({width:0,opacity:0}).each(function(i){var delay=opts.speed/3*2/opts.gridVertical*(i+1);$(this).delay(delay).animate({width:opts.width/opts.gridVertical,opacity:1},opts.speed/3);}).last().queue(function(){the._afterTransfer();});},'blindsRight':function(){var the=this,node=the.node,opts=the.options;the._setStage(2);node.transfer.children().css({width:0,opacity:0}).each(function(i){var delay=opts.speed/3*2/opts.gridVertical*(opts.gridVertical-i);$(this).delay(delay).animate({width:opts.width/opts.gridVertical,opacity:1},opts.speed/3);}).first().queue(function(){the._afterTransfer();});},'blindsTop':function(){var the=this,node=the.node,opts=the.options;the._setStage(1);node.transfer.children().css({height:0,opacity:0}).each(function(i){var delay=opts.speed/3*2/opts.gridHorizontal*(i+1);$(this).delay(delay).animate({height:opts.height/opts.gridHorizontal,opacity:1},opts.speed/3);}).last().queue(function(){the._afterTransfer();});},'blindsBottom':function(){var the=this,node=the.node,opts=the.options;the._setStage(1);node.transfer.children().css({height:0,opacity:0}).each(function(i){var delay=opts.speed/3*2/opts.gridHorizontal*(opts.gridHorizontal-i);$(this).delay(delay).animate({height:opts.height/opts.gridHorizontal,opacity:1},opts.speed/3);}).first().queue(function(){the._afterTransfer();});},'mosaic':function(){var the=this,node=the.node,opts=the.options;var max=0;var index=0;the._setStage(0);node.transfer.children().css({opacity:0}).each(function(i){var delay=opts.speed/2*Math.random();if(delay>max){max=delay;index=$(this).index();}
$(this).delay(delay).animate({opacity:1},opts.speed/2,'linear');}).eq(index).queue(function(){the._afterTransfer();});},'bomb':function(){var the=this,node=the.node,opts=the.options;var max=0;var index=0;var gridWidth=opts.width/opts.gridCol;var gridHeight=opts.height/opts.gridRow;the._setStage(0);node.transfer.children().css({top:(opts.height-gridHeight)/2,left:(opts.width-gridWidth)/2,opacity:0}).each(function(i){var x=i%opts.gridCol;var y=Math.floor(i/opts.gridCol);var top=gridHeight*y;var left=gridWidth*x;var delay=opts.speed/2*Math.random();if(delay>max){max=delay;index=$(this).index();}
$(this).delay(delay).animate({top:top,left:left,opacity:1},opts.speed/2);}).eq(index).queue(function(){the._afterTransfer();});},'fumes':function(){var the=this,node=the.node,opts=the.options;the._setStage(0);node.transfer.children().css({width:opts.width/opts.gridCol*2,height:opts.height/opts.gridRow*2,opacity:0}).each(function(i){var delay=opts.speed/3*2/node.transfer.children().length*(i+1);$(this).delay(delay).animate({width:opts.width/opts.gridCol,height:opts.height/opts.gridRow,opacity:1},opts.speed/3);}).last().queue(function(){the._afterTransfer();});},'interlaceLeft':function(){var the=this,node=the.node,opts=the.options;the._setStage(2);node.transfer.children().css({opacity:0}).each(function(i){var delay=opts.speed/3*2/opts.gridVertical*(i+1);$(this).css({top:i%2>0?-opts.height:opts.height}).delay(delay).animate({top:0,opacity:1},opts.speed/3);}).last().queue(function(){the._afterTransfer();});},'interlaceRight':function(){var the=this,node=the.node,opts=the.options;the._setStage(2);node.transfer.children().css({opacity:0}).each(function(i){var delay=opts.speed/3*2/opts.gridVertical*(opts.gridVertical-i);$(this).css({top:i%2>0?-opts.height:opts.height}).delay(delay).animate({top:0,opacity:1},opts.speed/3);}).first().queue(function(){the._afterTransfer();});},'curtainLeft':function(){var the=this,node=the.node,opts=the.options;the._setStage(2);node.transfer.children().css({height:0,opacity:0}).each(function(i){var delay=opts.speed/3*2/opts.gridVertical*(i+1);$(this).delay(delay).animate({top:0,height:opts.height,opacity:1},opts.speed/3);}).last().queue(function(){the._afterTransfer();});},'curtainRight':function(){var the=this,node=the.node,opts=the.options;the._setStage(2);node.transfer.children().css({height:0,opacity:0}).each(function(i){var delay=opts.speed/3*2/opts.gridVertical*(opts.gridVertical-i);$(this).delay(delay).animate({top:0,height:opts.height,opacity:1},opts.speed/3);}).first().queue(function(){the._afterTransfer();});}});})(jQuery);
两张图片：
扫一扫
315
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
