多种轮播 – 有爱前端

目的：为轮播图插件提供基础样式支持
创建人：大叔·杨

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>RunJS</title> <style type="text/css"> /* 目的：为轮播图插件提供基础样式支持创建人：大叔·杨创建时间：2015年9月15日08:59:31 最后更新时间：2015年9月15日08:59:54 */ * { margin: 0; padding: 0; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; } .daShuYangBannerAMainCon { width: 800px; height: 450px; position: relative; margin: 0 auto 100px; background-color: #404040; } .daShuYangBannerAMainCon .daShuYangBannerADo { width: 50px; height: 50px; position: absolute; top: 50%; margin-top: -25px; background-color: rgba(255, 255, 255, 0.5); z-index: 999; } .daShuYangBannerAMainCon .daShuYangBannerAPre { width: 50px; height: 50px; position: absolute; top: 50%; margin-top: -25px; background-color: rgba(255, 255, 255, 0.5); z-index: 999; left: 0; } .daShuYangBannerAMainCon .daShuYangBannerANext { width: 50px; height: 50px; position: absolute; top: 50%; margin-top: -25px; background-color: rgba(255, 255, 255, 0.5); z-index: 999; right: 0; } .daShuYangBannerACon { width: 100%; height: 100%; position: relative; overflow: hidden; } .daShuYangBannerAListUl { width: 100%; height: 100%; position: absolute; left: 0; top: 0; list-style: none; } .daShuYangBannerAListUl li { width: 800px; height: 450px; } .daShuYangBannerAListUl li img { width: 100%; height: 100%; vertical-align: bottom; display: block; } .daShuYangSpecialCon { width: 100%; height: 100%; position: absolute; left: 0; top: 0; } h2{ text-align: center; margin: 50px 0 0 0; } </style> <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script> </head> <body> <h2>滑动</h2>  <div class="daShuYangBannerAMainCon" id="infinte">  <div class="daShuYangBannerACon"> <ul class="daShuYangBannerAListUl"> <li><img src="http://sandbox.runjs.cn/uploads/rs/304/hownr3so/DbannerA.jpg"></li> <li><img src="http://sandbox.runjs.cn/uploads/rs/304/hownr3so/DbannerB.jpg"></li> <li><img src="http://sandbox.runjs.cn/uploads/rs/304/hownr3so/DbannerC.jpg"></li> </ul> </div>   <div class="daShuYangBannerAPre"></div> <div class="daShuYangBannerANext"></div>  </div>   <h2>透明度</h2>  <div class="daShuYangBannerAMainCon" id="opeatyInfinte">  <div class="daShuYangBannerACon"> <ul class="daShuYangBannerAListUl"> <li><img src="http://sandbox.runjs.cn/uploads/rs/304/hownr3so/DbannerA.jpg"></li> <li><img src="http://sandbox.runjs.cn/uploads/rs/304/hownr3so/DbannerB.jpg"></li> <li><img src="http://sandbox.runjs.cn/uploads/rs/304/hownr3so/DbannerC.jpg"></li> </ul> </div>   <div class="daShuYangBannerAPre"></div> <div class="daShuYangBannerANext"></div>  </div>    <h2>碎片翻转</h2>  <div class="daShuYangBannerAMainCon" id="flay">  <div class="daShuYangBannerACon"> <ul class="daShuYangBannerAListUl"> <li><img src="http://sandbox.runjs.cn/uploads/rs/304/hownr3so/DbannerA.jpg"></li> <li><img src="http://sandbox.runjs.cn/uploads/rs/304/hownr3so/DbannerB.jpg"></li> <li><img src="http://sandbox.runjs.cn/uploads/rs/304/hownr3so/DbannerC.jpg"></li> </ul> </div>   <div class="daShuYangBannerAPre"></div> <div class="daShuYangBannerANext"></div>  </div>    <h2>书翻转</h2>  <div class="daShuYangBannerAMainCon" id="book">  <div class="daShuYangBannerACon"> <ul class="daShuYangBannerAListUl"> <li><img src="http://sandbox.runjs.cn/uploads/rs/304/hownr3so/DbannerA.jpg"></li> <li><img src="http://sandbox.runjs.cn/uploads/rs/304/hownr3so/DbannerB.jpg"></li> <li><img src="http://sandbox.runjs.cn/uploads/rs/304/hownr3so/DbannerC.jpg"></li> </ul> </div>   <div class="daShuYangBannerAPre"></div> <div class="daShuYangBannerANext"></div>  </div>    <h2>瀑布流</h2>  <div class="daShuYangBannerAMainCon" id="waterfall">  <div class="daShuYangBannerACon"> <ul class="daShuYangBannerAListUl"> <li><img src="http://sandbox.runjs.cn/uploads/rs/304/hownr3so/DbannerA.jpg"></li> <li><img src="http://sandbox.runjs.cn/uploads/rs/304/hownr3so/DbannerB.jpg"></li> <li><img src="http://sandbox.runjs.cn/uploads/rs/304/hownr3so/DbannerC.jpg"></li> </ul> </div>   <div class="daShuYangBannerAPre"></div> <div class="daShuYangBannerANext"></div>  </div>   <script type="text/javascript"> /* 目的：为广告屏幕封装一个banner图插件创建人：大叔·杨创建时间：2015年9月15日09:17:07 最后修改时间：2015年9月16日17:09:41 接口: 1:LeftRightInfinite(transitionTime,showTime), 从右往左边平滑播放, transitionTime,过渡时间/毫秒,dafaulu:1000 showTime,显示时间/毫秒,default:3000 2:opacityInfinte(transitionTime,showTime), 改变透明度 transitionTime,过渡时间/毫秒,dafaulu:1000 showTime,显示时间/毫秒,default:3000 3:flayLumpRotate(transitionTime,showTime,X,Y) 小正方形碎片逐个翻转 transitionTime,过渡时间/毫秒,dafaulu:1000 showTime,显示时间/毫秒,default:5000 X,列数，dafaulu：5 Y,行数，dafaulu：5 4:pageTuring(transitionTime,showTime) 像书一样翻页 transitionTime,过渡时间/毫秒,dafaulu:1000 showTime,显示时间/毫秒,default:4000 5:waterfall(transitionTime,showTime,X); 像瀑布一样留下来 transitionTime,过渡时间/毫秒,dafaulu:1000 showTime,显示时间/毫秒,default:4000 X,列数，值越大，密度越高，default:20 */ $.fn.daShuYangBannerMainJs = function(){ var $that = $(this),//当前对象 $listCon = $that.find('.daShuYangBannerAListUl'),//列表容器 $list = $listCon.find('> li'),//列表 $pre = $that.find('.daShuYangBannerAPre'),//上一个 $next = $that.find('.daShuYangBannerANext'),//下一个 conWidth = $that.width(),//容器的宽 conHeight = $that.height(),//容器的高 len = $list.length, //要返回的内部对象 daShuYangBanner = { //从右边滑动到左边，无限循环，接受参数：滑动时间，展示时间 LeftRightInfinite : function(transitionTime,showTime){ var index = 1,//index初始值 transitionTime = transitionTime || 1000,//过渡时间默认值 showTime = showTime || 3000, //显示时间的默认值 autoPlay; //初始化宽度 $listCon.css({ 'width':conWidth * ($list.length+2), 'transform': 'translateX('+ (-conWidth) + 'px)' }); //初始化$list成一列 $list.css({ 'float':'left' }); //复制元素 $list.eq(0).before( $list.eq(len -1 ).clone(true) ); $list.eq(len-1).after( $list.eq(0).clone(true) ); //下一个 $next.click( nextPlay ); //下一个方法 function nextPlay(){ index++; if( index > len + 1 ){ index = 1; showImg(index,false); index++; setTimeout(function(){ showImg(index,true); },100); }else{ showImg(index,true); } } //上一个 $pre.click(function(){ index--; if( index < 0 ){ index = len; showImg(index,false); index--; setTimeout(function(){ showImg(index,true); },100); }else{ showImg(index,true); } }); //自动播放的方法 function autoPlayNow(){ autoPlay = setTimeout(function(){ nextPlay(); autoPlayNow(); },showTime); }//autoPlayNow //页面开始打开后自动播放 autoPlayNow(); //鼠标移动上去的时候去除自动播放 $that.hover(function(){ clearTimeout(autoPlay); },function(){ autoPlayNow(); }); //显示方法 function showImg(index,doTrans){ var doLeft = -conWidth * index,//距离 nowTime = doTrans ? transitionTime/1000 : 0;//是否需要过度 $listCon.css({ 'transform': 'translateX('+ (doLeft) + 'px)', 'transition':'all '+ nowTime +'s' }); }//showImg end! }, //LeftRightInfinite end! 无限循环播放结束 //透明度整体改变，接受参数：过度时间，展示时间 opacityInfinte : function(transitionTime,showTime){ var index = 0, transitionTime = transitionTime || 1000, showTime = showTime || 3000, auto; //初始化$list样式 $list.css({ 'position':'absolute', 'left':0, 'top':0, 'transition':'opacity '+ transitionTime/1000 +'s' }); //初始化第一张照片显示 showOpacity(0); //下一个 $next.click(nextShow); //上一个 $pre.click(function(){ index = returnPreIndex(index); showOpacity(index); }); //下一个的播放方法 function nextShow(){ index = returnNextIndex(index); showOpacity(index); } //自动播放 function autoPlay(){ auto = setTimeout(function(){ nextShow(); autoPlay(); },showTime); } autoPlay(); //$that hover $that.hover(function(){ clearTimeout(auto); },function(){ autoPlay(); }); //播放方法 function showOpacity(index){ $list.eq(index).css({ 'opacity':1 }).siblings().css({ 'opacity':0 }); } }, //opacityInfinte,end! // 碎片翻转,接受参数，过渡时间，展示时间，X列数，Y行数 flayLumpRotate : function(transitionTime,showTime,X,Y){ var transitionTime = transitionTime || 1000, showTime = showTime || 5000, X = X || 5, Y = Y || 5, index = 0, lumpWidth = conWidth/X,//碎片宽度 lumpHeight = conHeight/Y,//碎片高度 $div,auto; //隐藏原本的图片 $listCon.hide(); //初始化，创建碎片以及碎片容器以及碎片 function LumpInfor(){ var imgUrl = $list.eq(0).find('img').attr('src'); $div = $('<div>').css({//创建容器 'width':'100%', 'height':'100%', 'position':'absolute', 'left':0, 'top':0 }); //添加容器 $that.append( $div ); //创建飞片 for (var i = 0; i < X; i++ ) { for( var j = 0; j < Y; j++ ){ nowList = $('<div>').css({ 'width':lumpWidth, 'height':lumpHeight, 'position':'absolute', 'left':lumpWidth*i, 'top':lumpHeight*j, 'background-image':'url('+ imgUrl +')', 'background-position': -lumpWidth*i+'px '+ -lumpHeight*j +'px', 'transition':'all ' + transitionTime/1000+'s', 'backface-visibility':'hidden' }); $div.append( nowList ); } } //飞块创建结束 }//doLump LumpInfor(); //申明碎片 $lumpList = $div.find('div'); //下一个 $next.click(function(){ nextPlay(); }); //上一个 $pre.click(function(){ index = returnPreIndex(index); showImg(index); }); //下一个的播放 function nextPlay(){ index = returnNextIndex(index); showImg(index); } //自动播放 function autoPlay(){ auto = setTimeout(function(){ nextPlay(); autoPlay(); },showTime); }//autoPlay autoPlay(); // 鼠标移动上去的时候去除自动播放 $that.hover(function(){ clearTimeout(auto); },function(){ autoPlay(); }); function showImg(index){ var imgSrc = $list.eq(index).find('img').attr('src'), nowIndex = 0;//当前翻转到了哪一个 doRotateNow(); //按照顺序翻转 function doRotateNow(){ var doAuto = setTimeout(function(){ if( nowIndex < X*Y ){ $lumpList.eq(nowIndex).css({ 'transform':'rotateY(90deg)' }); backFunction(nowIndex); nowIndex++; doRotateNow(); } },transitionTime/3); } function backFunction(nowIndex){ //改变背景 setTimeout(function(){ $lumpList.eq(nowIndex).css({ 'background-image':'url('+imgSrc+')', 'transform':'rotateY(0)' }); },transitionTime); } }//showImg }, //flayLump end! //课本翻页, pageTuring : function(transitionTime,showTime){ var transitionTime = transitionTime || 1000, showTime = showTime || 4000, index = 0,//当前显示的值 canDo = true,//标记是否能运行 $div,//特效容器 $divListA,//左边层,压住实现 $divListB,//右边层，翻页层 $divListC,//中间层,翻页层 auto; //初始化翻页容器，翻页页面,还有$list function infor(){ $list.each(function(i){ $(this).css({ 'position':'absolute', 'left':0, 'top':0, 'z-index':len-i, 'transition':'all '+transitionTime+'ms' }); }); $div = $('<div>').css({ 'width':'100%', 'height':'100%', 'position':'absolute', 'left':0, 'top':0, 'z-index':len+1, 'perspective':2000 // 'overflow':'hidden' }); for( var i = 1; i < 4; i++ ){ var demo = $('<div>').attr('id','divList'+i).css({ 'width':'50%', 'height':'100%', 'position':'absolute', 'left':0, 'top':0 }); $div.append(demo); } $that.append( $div ); $divListA = $('#divList1') $divListB = $('#divList2') $divListC = $('#divList3') }//infor infor(); //下一个 $next.click( showNext ); //显示下一个的方法 function showNext(){ if( canDo ){//如果可以点击 var nowI = index; index = returnNextIndex(index); showNextImg(index,nowI,true); } }//showNext end! //上一个 $pre.click(function(){ if( canDo ){//如果可以点击 var nowI = index; index = returnPreIndex(index); showNextImg(index,nowI,false); } }); //自动播放 function autoPlay(){ auto = setTimeout(function(){ showNext(); autoPlay(); },showTime); }//autoPlay autoPlay(); //鼠标hover $that.hover(function(){ clearTimeout(auto); },function(){ autoPlay(); }); //当前的值，下一个：true，上一个false function showNextImg(index,preNextIndex,preOrNext){ var imgUrl = $list.eq(index).find('img').attr('src'),//应该显示的 thisUrl = $list.eq( preNextIndex ).find('img').attr('src');//上一个图片 canDo = false; //标记不可点 $list.eq(index).css({ 'opacity':1, }).siblings().css({ 'opacity':0, }); if( preOrNext ){//如果是下一页 //第一块更换背景 $divListA.css({ 'transform':'translate( 0,0 )', 'background-position':'0 0', 'background-image':'url('+ thisUrl +')' }); // B,首先位移到右侧，改变背景，然后翻转 $divListB.css({ 'left':'50%', 'background-position':'100% 0', 'background-image':'url('+ thisUrl +')', 'transition':'transform '+transitionTime/2+'ms linear', 'transform-origin':'0 50%', 'transform':'rotateY(-90deg)', }); $divListC.css({ 'left':'0', 'background-position':'0 0', 'background-image':'url('+ imgUrl +')', 'transition':'transform 0', 'transform-origin':'100% 50%', 'transform':'rotateY(90deg)', }); setTimeout(function(){ // C继续翻转 $divListC.css({ 'transition':'transform '+transitionTime/2+'ms linear', 'transform':'rotateY(0)', }); },transitionTime/2); //恢复原始状态 setTimeout(function(){ $divListA.css({ 'background-image':'', }); $divListB.css({ 'background-image':'', 'transform':'rotateY(0)' }); $divListC.css({ 'background-image':'', 'transform':'rotateY(90deg)' }); //标记可以点击 canDo = true; },transitionTime); }else{//上一页 //第一块更换背景 $divListA.css({ 'transform':'translate( 100%,0 )', 'background-position':'100% 0', 'background-image':'url('+ thisUrl +')' }); // B,首先位移到右侧，改变背景，然后翻转 $divListB.css({ 'left':'0', 'background-position':'0 0', 'background-image':'url('+ thisUrl +')', 'transition':'transform '+transitionTime/2+'ms linear', 'transform-origin':'100% 50%', 'transform':'rotateY(90deg)' }); $divListC.css({ 'left':'50%', 'background-position':'100% 0', 'background-image':'url('+ imgUrl +')', 'transition':'transform 0', 'transform-origin':'0 50%', 'transform':'rotateY(-90deg)', }); setTimeout(function(){ // C继续翻转 $divListC.css({ 'transition':'transform '+transitionTime/2+'ms linear', 'transform':'rotateY(0)', }); },transitionTime/2); //恢复原始状态 setTimeout(function(){ $divListA.css({ 'background-image':'', }); $divListB.css({ 'background-image':'', 'transform':'rotateY(0)' }); $divListC.css({ 'background-image':'', 'transform':'rotateY(-90deg)' }); //标记可以点击 canDo = true; },transitionTime); } }//showNextImg end! }, //bookPage //瀑布下流，接受参数：过度时间，展示时间,显示几列 waterfall : function(transitionTime,showTime,X){ var transitionTime = transitionTime || 1000, showTime = showTime || 4000, X = X || 20, index = 0,//当前显示的值 canDo = true, $div,$waterList,auto; //demo初始化 function init(){ var waterList = []; // 创建特效容器 $div = $('<div>').css({ 'width':'100%', 'height':'100%', 'position':'absolute', 'left':0, 'top':0, 'z-index':len+1 }); for( var i = 0; i < X; i++ ){ waterList.push('<div style="width:'+ conWidth/X +'px;height:0;float:left;background-position:'+ (-i*conWidth/X) +'px 0;transition:height '+ transitionTime +'ms linear;"></div>'); } $div.append( waterList.join('') ); $that.append( $div ); $waterList = $div.find('div'); }//init init(); //next $next.click( showNext ); //下一个的展示方法 function showNext(){ if( canDo ){ index = returnNextIndex(index); showImg(index); } } //上一个 $pre.click(function(){ if( canDo ){ index = returnPreIndex(index); showImg(index); } }); //自动播放 function autoPlay(){ auto = setTimeout(function(){ showNext(); autoPlay(); },showTime); }//autoPlay autoPlay(); //hover $that.hover(function(){ clearTimeout(auto); },function(){ autoPlay(); }); //图片展示 function showImg(index){ var imgSrc = $list.eq(index).find('img').attr('src'), setTime = transitionTime/X; canDo = false; $waterList.each(function(i){ (function(thisList){ setTimeout(function(){ thisList.css({ 'height':'100%', 'transition':'height '+ transitionTime +'ms', 'background-image':'url('+ imgSrc +')' }); },setTime*i); })( $(this) ); }); setTimeout(function(){ $list.eq(index).show().siblings().hide(); $waterList.css({ 'height':'0', 'transition':'height 0' }); canDo = true; },2*transitionTime); } } //waterfall end! }; //返回上一个值 function returnPreIndex(val){ val--; val = val < 0 ? len - 1 : val; return val; } //returnPreIndex //返回下一个值 function returnNextIndex(val){ val++; val = val > len - 1 ? 0 : val; return val; } //returnPreIndex return daShuYangBanner; }// //daShuYangBannerMainJs $("#infinte").daShuYangBannerMainJs().LeftRightInfinite(1000,3000); $("#opeatyInfinte").daShuYangBannerMainJs().opacityInfinte(1500,4000); $("#flay").daShuYangBannerMainJs().flayLumpRotate(350,5000,5,5); $("#book").daShuYangBannerMainJs().pageTuring(1000,5000); $("#waterfall").daShuYangBannerMainJs().waterfall(2000,5000,20); </script> </body> </html>

提示：你可以先修改部分代码再运行。

转载请注明：有爱前端 » 多种轮播