多种效果转换的轮播图

Posted MingL520

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了多种效果转换的轮播图相关的知识,希望对你有一定的参考价值。

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);

两张图片:

以上是关于多种效果转换的轮播图的主要内容,如果未能解决你的问题,请参考以下文章

react-native构建基本页面1---轮播图+九宫格

原生JS实现过渡效果的轮播图

实现比较简单的轮播图效果

js实现左右切换轮播图思路

JavaScript实现的轮播图

用jQuery写的轮播图