多种效果转换的轮播图

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

两张图片：

时间： 2024-10-27 13:29:21

多种效果转换的轮播图的相关文章

css3爆炸效果更换图片轮播图

思路:给一个div设置一个背景图片1.jpg,然后在这个div上面用两个for循环动态的创建一个列数为C行数为R数量的span,并给这些span设置宽高.定位并设置背景图片0.jpg,然后设置每个span的background-position,使这组span平铺在div上.当点击div时换图,换图的实现方法是循环每个span,以div的宽度的中线为定位线,让这组span随机进行transform,然后在结束的时候让span的透明度变为透明,并且瞬间拉回全部span到原始位置并更换span和di

原生JS实现 ‘Tab栏切换’，‘手风琴’，‘轮播图’效果

1.小天使跟随鼠标效果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatib

从零开始，搭建博客系统MVC5+EF6搭建框架（5），博客详情页、留言、轮播图管理、右侧统计博文

一.博客系统进度回顾 上一遍博客介绍到,系统已经实现到了发布以及前台布局展示,接下来就是实现一些,详情页,留言.轮播图管理.右侧博文统计信息实现. 二.博客系统详情页实现 2.1先来看看详情页展示的效果 2.2实现控制器在前台控制器中创建一个Blog的控制器,主要是展示博客分类以及详情页 Action详情页实现: 1 /// <summary> 2 /// 详情页 3 /// </summary> 4 /// <param name="id"><

JQuery实现简单的轮播图基本思路

demo点这里 需要达到的效果 常见的轮播图组件自动翻页,左右跳转按钮,下方是indexindex显示了当前图片位置,左右按钮就是更改当前位置第一个版本暂时不定义api了,写简单点 大概思路 用banner隐藏超出部分的图片imageList是inline要显示的话就float到标签位置 首先是html 从sublime换了webstorm,自带了emmet插件也就是可以这样写div.wrapper>div.banner>ul.imageList>(li>img)*4^img+im

Jquery 轮播图简易框架

=====================基本结构===================== <div class="carousel" style="width: 800px;height: 378px;"> <ul class="carousel-imgs"> <li> <a href="#"><img src="picture.jpg" alt=&

告别组件之教你使用原生js和css写移动端轮播图

在工作中由于项目需要要写一个轮播图,本想使用组件直接调用实现快速开发,但是一想到自己经常使用组件但是让自己手写的话确实一点都不会. 一个不会手写组件的前端程序员不是一个好程序员!于是打算自己手写一个. 老规矩,首先看一下最终效果,这个最终可以实现定时自动播放,触摸滑动,手动修改下面横条效果等功能. 项目中使用到的HTML代码如下 <div class="banner"> <ul class="clearfix"> <li><

js实现轮播图效果(附源码)--原生js的应用

1.js实现轮播图效果 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="Author" content="奇客艺术"> <meta name="keyword" content="关键字"> <meta name=

【学习ios之路:UI系列】实现轮播图效果(UIImageView,UIScrollView,UIPageControl,NSTimer相结合)

实现效果,在不点击的情况下,自定滚动,点击时,停止.如下图 部分代码如下: //调用NSTimer方法,自定计时 - (void)autoScroll { self.timer = [NSTimer scheduledTimerWithTimeInterval:1.5 target:self  selector:@selector(scrollToRight) userInfo:nil repeats:YES]; } //实现触发方法 - (void)scrollToRight { [UIVie

AngularJS：实现轮播图效果

要实现这个功能,可以https://github.com/sroze/ngInfiniteScroll这个第三方控件实现的.实现步骤如下: 1. 下载ng-infinite-scroll.js程序http://sroze.github.io/ngInfiniteScroll/ 目前版本是1.0.0 2. 如果你是用的jQuery2.0以上版本,还需要修改ng-infinite-scroll.js程序,将所有的将所有的$window.xxx改为$(window).xxx, elem.xxx改为$(