Tutorial: Slide Painel
Autor: Wendy Chan | Publicado: 2017-08-10T20:51:00-03:00








Yo meus queridos e doces bunnie's, como estão? Admito que ando meio cansada e por isso de não vir postar, ainda tive que formatar o notebook novamente, pois não sei o que houve o notebook fechou e não abriu mais. Mas mudando de assunto hoje venho trazer um slide, percebi que tenho muitos poucos aqui, então vou mudar isso rs Afinal eu amo slides, créditos no rodapé da postagem.&nbsp;


Eu acho esse modelo muito bonitinho, claro que tudo depende do layout e das imagens que for usar. Nele é possível colocar texto e uma imagem de sua escolha. Aconselho editar para ficarem similares, vocês também podem mudar as imagens das setas do carregamento, e das pequenas bolinhas que ficam no finalzinho dele.&nbsp;





Demo ver slide


1) Vá em Layout e abra um novo &nbsp;Gadget Java/Script &nbsp;e dentro cole:


&lt;div id="wrapper"&gt;
&lt;div id="examples_outer"&gt;
&nbsp; 
&lt;h2&gt;Minha flor&lt;/h2&gt;
&lt;div id="slider_container_1"&gt;
&lt;div id="SliderName"&gt;
&lt;a href="#1"&gt;&lt;img src="ENDEREÇO DA IMAGEM 1" alt="Some alt text" /&gt;&lt;/a&gt;
&lt;div class="SliderNameDescription"&gt;&lt;img src="REPITA O ENDEREÇO DA IMAGEM 1" height="40" alt="" style="float:left;margin-right:5px;" /&gt;
&lt;strong&gt;Texto imagem 1&lt;/strong&gt;
&lt;/div&gt;
&lt;a href="#2"&gt;&lt;img src="ENDEREÇO DA IMAGEM 2" alt="Some alt text" /&gt;&lt;/a&gt;
&lt;div class="SliderNameDescription"&gt;&lt;img src="REPITA O ENDEREÇO DA IMAGEM 2" height="40" alt="" style="float:left;margin-right:5px;" /&gt;
&lt;strong&gt;Texto imagem 2&lt;/strong&gt;
&lt;/div&gt;
&lt;a href="#3"&gt;&lt;img src="ENDEREÇO DA IMAGEM 3"" alt="some alt text" /&gt;&lt;/a&gt;
&lt;div class="SliderNameDescription"&gt;&lt;img src="REPITA O ENDEREÇO DA IMAGEM 3" height="40" alt="" style="float:left;margin-right:5px;" /&gt;
&lt;strong&gt;Texto imagem 3&lt;/strong&gt;
&lt;/div&gt;
&lt;a href="#4"&gt;&lt;img src="ENDEREÇO DA IMAGEM 4" alt="Some alt text" /&gt;&lt;/a&gt;
&lt;div class="SliderNameDescription"&gt;&lt;img src="REPITA O ENDEREÇO DA IMAGEM 4" height="40" alt="" style="float:left;margin-right:5px;" /&gt;
&lt;strong&gt;Texto imagem 4&lt;/strong&gt;
&lt;/div&gt;
&lt;a href="#5"&gt;&lt;img src="ENDEREÇO DA IMAGEM 5" alt="Some alt text" /&gt;&lt;/a&gt;
&lt;div class="SliderNameDescription"&gt;&lt;img src="REPITA O ENDEREÇO DA IMAGEM 5" height="40" alt="" style="float:left;margin-right:5px;" /&gt;
&lt;strong&gt;Texto imagem 5&lt;/strong&gt;
&lt;/div&gt;

&lt;/div&gt;
&lt;style&gt;
#slider_container_1 {
margin: 3px 3px 4px 3px;
float: left;
padding: 10px;
width: 560px; background: #000000;
-moz-border-radius: 10px 10px;
-webkit-border-radius: 10px 10px;
border-radius: 10px 10px;
}
#SliderName{width: 560px;height: 300px;margin: auto;}
.SliderNamePrev{
background: url(https://4.bp.blogspot.com/--nYn9NRIyo4/WYyDvl3ce-I/AAAAAAAAFvI/iAW0LsAJTxQOcM0Qqg9OkENUMmhNZMbnwCLcBGAs/s1600/left.gif) no-repeat center center;
&nbsp;width: 24px;
&nbsp;height: 24px;
&nbsp;display: block;
&nbsp;position: absolute;
&nbsp;top: 138px;
&nbsp;left: 10px;
&nbsp;text-decoration: none;}
.SliderNameNext{
&nbsp;background: url(https://3.bp.blogspot.com/-xMr1SrSW_NE/WYyD3mtl26I/AAAAAAAAFvM/0b1k_VP-COEvYoSItqg9WLoxsCYMWB8NACLcBGAs/s1600/right.gif) no-repeat center center;
&nbsp;width: 24px;
&nbsp;height: 24px;
&nbsp;display: block;
&nbsp;position: absolute;
&nbsp;top: 138px;
&nbsp;right: 10px;
&nbsp;text-decoration: none;}
.SliderNameDescription{
&nbsp;font-family: Verdana;
&nbsp;font-size: 10px;
&nbsp;text-align: left;
&nbsp;padding: 5px;}
#SliderNameNavigation { margin: 10px 0 0 0; padding-top: 15px; height: 25px; text-align: center; -moz-border-radius: 6px 6px; background: #fff; }
#SliderNameNavigation a:link, #SliderNameNavigation a:active, #SliderNameNavigation a:visited, #SliderNameNavigation a:hover{
&nbsp;margin: 0 2px;
&nbsp;background: url(https://1.bp.blogspot.com/-p92Kkfz6zgU/WYyECL8bJ5I/AAAAAAAAFvQ/JL9_H082RvkBfbO_mBvJbl7OH-iv0ECUACLcBGAs/s1600/nav.gif) no-repeat center center;
&nbsp;font-size: 0px;
&nbsp;line-height: 0px;
&nbsp;padding: 12px;
&nbsp;text-decoration: none;
}
#SliderNameNavigation a.active:link, #SliderNameNavigation a.active:active, #SliderNameNavigation a.active:visited, #SliderNameNavigation a.active:hover{
&nbsp;background: url(https://3.bp.blogspot.com/-8acunJjoF3k/WYyEHwbI1hI/AAAAAAAAFvU/pNRbjNFxRZ0RK53Y0gSE1uI3_zdidTQvwCLcBGAs/s1600/nav_active.gif) no-repeat center center;
}
&lt;/style&gt;
&nbsp;&lt;!-- sliderman.js --&gt;
&nbsp;&lt;script type="text/javascript"&gt;
Sliderman.effect({name: 'effectDemo1', cols: 10, rows: 5, delay: 10, fade: true, order: 'straight_stairs'});
&nbsp; var slider = Sliderman.slider({container: 'SliderName', width: 530, height: 300, effects: 'effectDemo1',
&nbsp; &nbsp; display: {
&nbsp; &nbsp; &nbsp; pause: true, autoplay: 3000, always_show_loading: 200,
&nbsp; &nbsp; &nbsp; description: {background: '#ffffff', opacity: 0.5, height: 50, position: 'bottom'},
&nbsp; &nbsp; &nbsp; loading: {background: '#000000', opacity: 0.5, image: 'https://3.bp.blogspot.com/-jfzaFgAqQW8/WYyJEojkrSI/AAAAAAAAFvk/2UILC6TfF2wa8gOg7TESjO7xyPEZuFrlQCLcBGAs/s1600/loading.gif'},
&nbsp; &nbsp; &nbsp; buttons: {
&nbsp; &nbsp; &nbsp; &nbsp; opacity: 1,
&nbsp; &nbsp; &nbsp; &nbsp; prev: {className: 'SliderNamePrev', label: ''},
&nbsp; &nbsp; &nbsp; &nbsp; next: {className: 'SliderNameNext', label: ''}
&nbsp; &nbsp; &nbsp; },
&nbsp; &nbsp; &nbsp; navigation: {container: 'SliderNameNavigation', label: ' '}
&nbsp; }});
&lt;/script&gt;
&lt;script type='text/javascript'&gt;
//&lt;![CDATA[
/**
* Sliderman.js
* Version: 1.2.1
* Author: Taras Ozarko (tozarko@gmail.com)
*
* (c) 2010-2011 Devtrix. All rights reserved. http://www.devtrix.net/sliderman/
**/
var Sliderman = new function(){
&nbsp;var Sliderman = this;
&nbsp;function random(l){
&nbsp; r = Math.round(Math.random()*(l+1));
&nbsp; if(r &gt; 0 &amp;&amp; r &lt; l+1) r--;
&nbsp; else r = random(l);
&nbsp; return r;
&nbsp;}//random
&nbsp;function foreach(o, f){
&nbsp; for(var k in o){
&nbsp; &nbsp;if(o.hasOwnProperty(k) &amp;&amp; f(k,o[k],o)) return;
&nbsp; }
&nbsp;}//foreach
&nbsp;function addElementEvent(o,e,f){
&nbsp; var of = o[e];
&nbsp; o[e] = typeof of != 'function' ? f : function(){of();f();};
&nbsp;}//addElementEvent
&nbsp;var _loadImage = [];
&nbsp;function loadImage(s,f,always_show_loading){
&nbsp; var l = function(){if(_loadImage[s]){if(f)f(s);}else{var i=newElement('IMG');i.onload=function(){_loadImage[s]=true;if(f)f(s);};new function(){i.src=s;};}}
&nbsp; if(always_show_loading) setTimeout(l, typeof(always_show_loading) == 'number' ? always_show_loading : 1000);
&nbsp; else l();
&nbsp;}//loadImage
&nbsp;function array_copy(a){
&nbsp; if(a.constructor == Array) var r = [];
&nbsp; else var r = {};
&nbsp; foreach(a, function(i){
&nbsp; &nbsp;r[i] = typeof(a[i]) != 'object' ? a[i] : array_copy(a[i]);
&nbsp; });
&nbsp; return r;
&nbsp;}//array_copy
&nbsp;function now(){
&nbsp; return (new Date()).getTime();
&nbsp;}//now
&nbsp;function eq(a, b){
&nbsp; return String(a).replace(/^\s+/, '').replace(/\s+$/, '').toLowerCase() == String(b).replace(/^\s+/, '').replace(/\s+$/, '').toLowerCase();
&nbsp;}//eq
&nbsp;function array_search(arr, a, b){
&nbsp; var result = false;
&nbsp; if(!b){
&nbsp; &nbsp;foreach(arr, function(i){
&nbsp; &nbsp; if(eq(arr[i], b)){
&nbsp; &nbsp; &nbsp;result = i;
&nbsp; &nbsp; &nbsp;return true;
&nbsp; &nbsp; }
&nbsp; &nbsp;});
&nbsp; }
&nbsp; else{
&nbsp; &nbsp;foreach(arr, function(i){
&nbsp; &nbsp; if(eq(arr[i][a], b)){
&nbsp; &nbsp; &nbsp;result = i;
&nbsp; &nbsp; &nbsp;return true;
&nbsp; &nbsp; }
&nbsp; &nbsp;});
&nbsp; }
&nbsp; return result;
&nbsp;}//array_search
&nbsp;function validateOption(a, b){
&nbsp; b = b.split(',');
&nbsp; var result;
&nbsp; foreach(b, function(i){
&nbsp; &nbsp;result = b[i];
&nbsp; &nbsp;if(eq(a, b[i])) return true;
&nbsp; });
&nbsp; return result;
&nbsp;}//validateOption
&nbsp;var setOpacity;
&nbsp;function setOpacityInit(){
&nbsp; if(setOpacity) return;
&nbsp; var p, b = document.body, s = b.style;
&nbsp; if (typeof s.opacity == 'string') p = 'opacity';
&nbsp; &nbsp;else if (typeof s.MozOpacity == 'string') p = 'MozOpacity';
&nbsp; &nbsp;else if (typeof s.KhtmlOpacity == 'string') p = 'KhtmlOpacity';
&nbsp; &nbsp;else if (b.filters &amp;&amp; navigator.appVersion.match(/MSIE ([\d.]+);/)[1]&gt;=5.5) p = 'filter';
&nbsp; &nbsp;if(p == 'filter'){
&nbsp; &nbsp;setOpacity = function(style, v){
&nbsp; &nbsp; if(v &gt; 1) v = 1;
&nbsp; &nbsp; else if(v &lt; 0) v = 0;
&nbsp; &nbsp; &nbsp;style[p] = "alpha(opacity=" + Math.round(v*100) + ")";
&nbsp; &nbsp;}
&nbsp; }else if(p){
&nbsp; &nbsp;setOpacity = function(style, v){
&nbsp; &nbsp; if(v &gt; 1) v = 1;
&nbsp; &nbsp; else if(v &lt; 0) v = 0;
&nbsp; &nbsp; &nbsp;style[p] = v.toFixed(2);
&nbsp; &nbsp;}
&nbsp; }else setOpacity = ef
&nbsp;}//setOpacityInit
&nbsp;function setStyle(style, property, value){
&nbsp; if(typeof(value) == 'string') style[property] = value;
&nbsp; else if(property == 'clip') style[property] = 'rect('+Math.round(value[0])+'px, '+Math.round(value[1])+'px, '+Math.round(value[2])+'px, '+Math.round(value[3])+'px)';
&nbsp; else if(property == 'opacity') setOpacity(style, value);
&nbsp; else style[property] = Math.round(value)+'px';
&nbsp;}//setStyle
&nbsp;function setStyles(style, properties){
&nbsp; foreach(properties, function(property){
&nbsp; &nbsp;setStyle(style, property, properties[property]);
&nbsp; });
&nbsp;}
&nbsp;function hide(style){style.display = 'none';}
&nbsp;function show(style){style.display = '';}
&nbsp;function newElement(tagName, styles){
&nbsp; var e = document.createElement(tagName);
&nbsp; if(styles) setStyles(e.style, styles);
&nbsp; return e;
&nbsp;}//newElement
&nbsp;var EffectsArr = [];
&nbsp;function Effects(parameters){
&nbsp; var effect = parameters.effect, display = parameters.display;
&nbsp; if(!effect) effect = {};
&nbsp; if(parameters.contentmode) effect.zoom = false;
&nbsp; effect.interval = effect.interval || 40;
&nbsp; effect.duration = effect.duration || 200;
&nbsp; effect.delay = effect.delay || 0;
&nbsp; var framesCount = Math.round(effect.duration / effect.interval);
&nbsp; var index, piece, r, image, startStylesArr = [], AnimateArr = [], needAnimate = [], AnimateItemsArr = [], styleStart, styleEnd, styleDif;
&nbsp; var container = newElement('div', {width: display.width, height: display.height, position: 'absolute', top: 0, left: 0, overflow: 'hidden'})
&nbsp; parameters.container.appendChild(container);
&nbsp; var pieces = {cols: effect.cols ? effect.cols : 1, rows: effect.rows ? effect.rows : 1};
&nbsp; pieces.count = pieces.cols*pieces.rows;
&nbsp; pieces.width = display.width / pieces.cols, pieces.height = display.height / pieces.rows;
&nbsp; for(var c = 0; c &lt; pieces.cols; c++) for(var r = 0; r &lt; pieces.rows; r++) pieces[c+','+r] = [r*pieces.height, c*pieces.width+pieces.width, r*pieces.height+pieces.height, c*pieces.width];
&nbsp; var optionsCopy = array_copy(effect);
&nbsp; var effectsInvers = array_copy(effect);
&nbsp; effectsInvers.top = optionsCopy.bottom;
&nbsp; effectsInvers.bottom = optionsCopy.top;
&nbsp; effectsInvers.left = optionsCopy.right;
&nbsp; effectsInvers.right = optionsCopy.left;
&nbsp; effect.order = validateOption(effect.order, 'straight,swirl,snake,straight_stairs,random');
&nbsp; var orderArr = doOrder(pieces.cols, pieces.rows, effect.order, effect.road, effect.reverse);
&nbsp; var effectsOptStr = effect.order == 'random' ? now() : [
&nbsp; &nbsp;effect.interval, effect.duration, effect.delay, effect.cols, effect.rows,
&nbsp; &nbsp;effect.top, effect.right, effect.bottom, effect.left,
&nbsp; &nbsp;effect.fade, effect.zoom, effect.move, effect.chess,
&nbsp; &nbsp;effect.order, effect.road, effect.reverse
&nbsp; ].join(',');
&nbsp; if(EffectsArr[effectsOptStr]){
&nbsp; &nbsp;startStylesArr = EffectsArr[effectsOptStr].startStylesArr;
&nbsp; &nbsp;AnimateArr = EffectsArr[effectsOptStr].AnimateArr;
&nbsp; &nbsp;needAnimate = EffectsArr[effectsOptStr].needAnimate;
&nbsp; }else{
&nbsp; &nbsp;for(r = 0; r &lt; pieces.rows; r++) for(c = 0; c &lt; pieces.cols; c++){
&nbsp; &nbsp; index = orderArr[c+','+r];
&nbsp; &nbsp; if(effect.chess &amp;&amp; index % 2 == 1) effect = effectsInvers;
&nbsp; &nbsp; else effect = optionsCopy;
&nbsp; &nbsp; styleStart = {top: 0, left: 0, opacity: 1, width: display.width, height: display.height, overflow: 'hidden'};
&nbsp; &nbsp; styleEnd = array_copy(styleStart); piece = array_copy(pieces[c+','+r]);
&nbsp; &nbsp; if(effect.fade) styleStart.opacity = 0;
&nbsp; &nbsp; if(effect.top &amp;&amp; effect.bottom) piece[0] = piece[2] = (piece[0] + piece[2]) / 2;
&nbsp; &nbsp; else if(effect.top) piece[2] -= pieces.height;
&nbsp; &nbsp; else if(effect.bottom) piece[0] += pieces.height;
&nbsp; &nbsp; if(effect.left &amp;&amp; effect.right) piece[1] = piece[3] = (piece[1] + piece[3]) / 2;
&nbsp; &nbsp; else if(effect.left) piece[1] -= pieces.width;
&nbsp; &nbsp; else if(effect.right) piece[3] += pieces.width;
&nbsp; &nbsp; if(effect.zoom){
&nbsp; &nbsp; &nbsp;styleStart.left = pieces[c+','+r][3];
&nbsp; &nbsp; &nbsp;styleStart.top = pieces[c+','+r][0];
&nbsp; &nbsp; &nbsp;if(effect.left &amp;&amp; effect.right) styleStart.left += pieces.width / 2;
&nbsp; &nbsp; &nbsp;else if(effect.right) styleStart.left += pieces.width;
&nbsp; &nbsp; &nbsp;else if(!effect.left) styleStart.left = 0;
&nbsp; &nbsp; &nbsp;if(effect.top &amp;&amp; effect.bottom) styleStart.top += pieces.height / 2;
&nbsp; &nbsp; &nbsp;else if(effect.bottom) styleStart.top += pieces.height;
&nbsp; &nbsp; &nbsp;else if(!effect.top) styleStart.top = 0;
&nbsp; &nbsp; &nbsp;if(effect.left || effect.right) piece[1] = piece[3] = 0;
&nbsp; &nbsp; &nbsp;if(effect.top || effect.bottom) piece[0] = piece[2] = 0;
&nbsp; &nbsp; &nbsp;styleStart.width = effect.left || effect.right ? 0 : display.width;
&nbsp; &nbsp; &nbsp;styleStart.height = effect.top || effect.bottom ? 0 : display.height;
&nbsp; &nbsp; }
&nbsp; &nbsp; if(effect.move){
&nbsp; &nbsp; &nbsp;if(effect.top){
&nbsp; &nbsp; &nbsp; styleStart.top = parseInt(styleStart.top)-pieces.height;
&nbsp; &nbsp; &nbsp; piece[0] += pieces.height; piece[2] += pieces.height;
&nbsp; &nbsp; &nbsp;}
&nbsp; &nbsp; &nbsp;if(effect.bottom){
&nbsp; &nbsp; &nbsp; styleStart.top = parseInt(styleStart.top)+pieces.height;
&nbsp; &nbsp; &nbsp; piece[0] -= pieces.height; piece[2] -= pieces.height;
&nbsp; &nbsp; &nbsp;}
&nbsp; &nbsp; &nbsp;if(effect.left){
&nbsp; &nbsp; &nbsp; styleStart.left = parseInt(styleStart.left)-pieces.width;
&nbsp; &nbsp; &nbsp; piece[1] += pieces.width; piece[3] += pieces.width;
&nbsp; &nbsp; &nbsp;}
&nbsp; &nbsp; &nbsp;if(effect.right){
&nbsp; &nbsp; &nbsp; styleStart.left = parseInt(styleStart.left)+pieces.width;
&nbsp; &nbsp; &nbsp; piece[1] -= pieces.width; piece[3] -= pieces.width;
&nbsp; &nbsp; &nbsp;}
&nbsp; &nbsp; }
&nbsp; &nbsp; styleStart.clip = piece;
&nbsp; &nbsp; styleEnd.clip = pieces[c+','+r];
&nbsp; &nbsp; styleDif = [];
&nbsp; &nbsp; foreach(styleEnd, function(property){
&nbsp; &nbsp; &nbsp;if(styleStart[property].toString() != styleEnd[property].toString()){
&nbsp; &nbsp; &nbsp; styleDif[property] = [];
&nbsp; &nbsp; &nbsp; if(property == 'clip'){
&nbsp; &nbsp; &nbsp; &nbsp;foreach(styleStart[property], function(n){
&nbsp; &nbsp; &nbsp; &nbsp; styleDif[property][n] = styleEnd[property][n] - styleStart[property][n];
&nbsp; &nbsp; &nbsp; &nbsp;});
&nbsp; &nbsp; &nbsp; }else styleDif[property] = styleEnd[property] - styleStart[property];
&nbsp; &nbsp; &nbsp; needAnimate[index] = true;
&nbsp; &nbsp; &nbsp;}
&nbsp; &nbsp; });
&nbsp; &nbsp; startStylesArr[index] = styleStart; AnimateArr[index] = [];
&nbsp; &nbsp; if(effect.delay) for(var n = 0; n &lt; Math.round(index*effect.delay/effect.interval); n++) AnimateArr[index].push(null);
&nbsp; &nbsp; var frameN;
&nbsp; &nbsp; if(!needAnimate[index]) AnimateArr[index].push({display: ''});
&nbsp; &nbsp; else for(frameN = 1; frameN &lt;= framesCount; frameN++){
&nbsp; &nbsp; &nbsp;progress = frameN/framesCount;
&nbsp; &nbsp; &nbsp;progress = -Math.cos(progress*Math.PI)/2 + 0.5;
&nbsp; &nbsp; &nbsp;var style_c = [];
&nbsp; &nbsp; &nbsp;if(frameN == framesCount) style_c = styleEnd;
&nbsp; &nbsp; &nbsp;else{
&nbsp; &nbsp; &nbsp; foreach(styleDif, function(property){
&nbsp; &nbsp; &nbsp; &nbsp;value = [];
&nbsp; &nbsp; &nbsp; &nbsp;if(property == 'clip'){
&nbsp; &nbsp; &nbsp; &nbsp; foreach(styleDif[property], function(n){
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;value[n] = styleStart[property][n]+styleDif[property][n]*progress;
&nbsp; &nbsp; &nbsp; &nbsp; });
&nbsp; &nbsp; &nbsp; &nbsp;}else value = styleStart[property]+styleDif[property]*progress;
&nbsp; &nbsp; &nbsp; &nbsp;style_c[property] = value;
&nbsp; &nbsp; &nbsp; });
&nbsp; &nbsp; &nbsp;}
&nbsp; &nbsp; &nbsp;AnimateArr[index].push(style_c);
&nbsp; &nbsp; }
&nbsp; &nbsp;}//for
&nbsp; &nbsp;EffectsArr[effectsOptStr] = {startStylesArr: startStylesArr, AnimateArr: AnimateArr, needAnimate: needAnimate};
&nbsp; }
&nbsp; for(r = 0; r &lt; pieces.rows; r++) for(c = 0; c &lt; pieces.cols; c++){
&nbsp; &nbsp;index = orderArr[c+','+r];
&nbsp; &nbsp;if(parameters.contentmode){
&nbsp; &nbsp; image = newElement('DIV', startStylesArr[index]);
&nbsp; &nbsp; image.appendChild(parameters.src.cloneNode(true));
&nbsp; &nbsp;}else{
&nbsp; &nbsp; image = newElement('IMG', startStylesArr[index]);
&nbsp; &nbsp; image.src = parameters.src;
&nbsp; &nbsp;}
&nbsp; &nbsp;var style = image.style;
&nbsp; &nbsp;style.position = 'absolute';
&nbsp; &nbsp;container.appendChild(image);
&nbsp; &nbsp;AnimateItemsArr[index] = style;
&nbsp; &nbsp;if(!needAnimate[index]) hide(AnimateItemsArr[index]);
&nbsp; }
&nbsp; //ANIMATE
&nbsp; var time_s = now();
&nbsp; var framesCountAll = AnimateArr[AnimateArr.length-1].length;
&nbsp; var AnimateItem, AnimateItemsComplete = [], timerFuncStatus = true, timerFunc = function(){
&nbsp; &nbsp;if(timerFuncStatus){
&nbsp; &nbsp; var frameC = Math.ceil((now() - time_s) / effect.interval);
&nbsp; &nbsp; frameC = frameC &gt;= framesCountAll ? framesCountAll-1 : frameC-1;
&nbsp; &nbsp; foreach(AnimateArr, function(index){
&nbsp; &nbsp; &nbsp;AnimateItem = frameC &gt; AnimateArr[index].length-1 ? AnimateArr[index].length-1 : frameC;
&nbsp; &nbsp; &nbsp;if(AnimateArr[index][AnimateItem] &amp;&amp; !AnimateItemsComplete[index+','+AnimateItem]){
&nbsp; &nbsp; &nbsp; setStyles(AnimateItemsArr[index], AnimateArr[index][AnimateItem]);
&nbsp; &nbsp; &nbsp; AnimateItemsComplete[index+','+AnimateItem] = true;
&nbsp; &nbsp; &nbsp;}
&nbsp; &nbsp; });
&nbsp; &nbsp; if(frameC == framesCountAll-1){
&nbsp; &nbsp; &nbsp;if(pieces.count &gt; 1){
&nbsp; &nbsp; &nbsp; container.innerHTML = '';
&nbsp; &nbsp; &nbsp; if(parameters.contentmode) container.appendChild(parameters.src);
&nbsp; &nbsp; &nbsp; else container.innerHTML = '&lt;img src="'+parameters.src+'" width="'+display.width+'" height="'+display.height+'" /&gt;';
&nbsp; &nbsp; &nbsp;}
&nbsp; &nbsp; &nbsp;parameters.callback(container);
&nbsp; &nbsp; &nbsp;timerFuncStatus = false;
&nbsp; &nbsp; }
&nbsp; &nbsp;}
&nbsp; &nbsp;return timerFuncStatus;
&nbsp; };
&nbsp; var animateInterval = setInterval(function(){
&nbsp; &nbsp;if(!timerFunc()) clearInterval(animateInterval);
&nbsp; }, effect.interval);

}//Effects
&nbsp;var OrderArr = [];
&nbsp;function doOrder(cols, rows, order, road, reverse){
&nbsp; cols = parseInt(cols); rows = parseInt(rows);
&nbsp; var arr = [], tmp = [], i = 0, c = 0, r = 0, count = cols*rows, cl = cols - 1, rl = rows - 1, il = count - 1, func;
&nbsp; if(!road) road = 'RB';
&nbsp; function map(f){for(r = 0; r &lt; rows; r++) for(c = 0; c &lt; cols; c++) f();}
&nbsp; var OrderOptStr = [cols, rows, order, road, reverse].join(',');
&nbsp; if(!OrderArr[OrderOptStr]){
&nbsp; &nbsp;if(count &gt; 1){
&nbsp; &nbsp; switch(order){
&nbsp; &nbsp; &nbsp;case 'straight':
&nbsp; &nbsp; &nbsp; switch(road){
&nbsp; &nbsp; &nbsp; &nbsp;case 'BL': func = function(){arr[c+','+r] = il-(c*rows+(rl-r));}; break;
&nbsp; &nbsp; &nbsp; &nbsp;case 'RT': func = function(){arr[c+','+r] = il-(r*cols+(cl-c));}; break;
&nbsp; &nbsp; &nbsp; &nbsp;case 'TL': func = function(){arr[c+','+r] = il-(c*rows+r);};
&nbsp; &nbsp; &nbsp; &nbsp;case 'LT': func = function(){arr[c+','+r] = il-(r*cols+c);}; break;
&nbsp; &nbsp; &nbsp; &nbsp;case 'BR': func = function(){arr[c+','+r] = c*rows+r;}; break;
&nbsp; &nbsp; &nbsp; &nbsp;case 'LB': func = function(){arr[c+','+r] = r*cols+(cl-c);}; break;
&nbsp; &nbsp; &nbsp; &nbsp;case 'TR': func = function(){arr[c+','+r] = c*rows+(rl-r);}; break;
&nbsp; &nbsp; &nbsp; &nbsp;default: func = function(){arr[c+','+r] = r*cols+c;}; break;//'RB'
&nbsp; &nbsp; &nbsp; }
&nbsp; &nbsp; &nbsp; map(func);
&nbsp; &nbsp; &nbsp;break;
&nbsp; &nbsp; &nbsp;case 'swirl':
&nbsp; &nbsp; &nbsp; var courses, course = 0;
&nbsp; &nbsp; &nbsp; switch(road){
&nbsp; &nbsp; &nbsp; &nbsp;case 'BL': c = cl; r = 0; courses = ['r+', 'c-', 'r-', 'c+']; break;
&nbsp; &nbsp; &nbsp; &nbsp;case 'RT': c = 0; r = rl; courses = ['c+', 'r-', 'c-', 'r+']; break;
&nbsp; &nbsp; &nbsp; &nbsp;case 'TL': c = cl; r = rl; courses = ['r-', 'c-', 'r+', 'c+']; break;
&nbsp; &nbsp; &nbsp; &nbsp;case 'LT': c = cl; r = rl; courses = ['c-', 'r-', 'c+', 'r+']; break;
&nbsp; &nbsp; &nbsp; &nbsp;case 'BR': c = 0; r = 0; courses = ['r+', 'c+', 'r-', 'c-']; break;
&nbsp; &nbsp; &nbsp; &nbsp;case 'LB': c = cl; r = 0; courses = ['c-', 'r+', 'c+', 'r-']; break;
&nbsp; &nbsp; &nbsp; &nbsp;case 'TR': c = 0; r = rl; courses = ['r-', 'c+', 'r+', 'c-']; break;
&nbsp; &nbsp; &nbsp; &nbsp;default: c = 0; r = 0; courses = ['c+', 'r+', 'c-', 'r-']; break;//'RB'
&nbsp; &nbsp; &nbsp; }
&nbsp; &nbsp; &nbsp; i = 0;
&nbsp; &nbsp; &nbsp; while(i &lt; cols*rows){
&nbsp; &nbsp; &nbsp; &nbsp;if(c &gt;= 0 &amp;&amp; c &lt; cols &amp;&amp; r &gt;= 0 &amp;&amp; r &lt; rows &amp;&amp; typeof(arr[c+','+r]) == 'undefined') arr[c+','+r] = i++;
&nbsp; &nbsp; &nbsp; &nbsp;else switch(courses[course++%courses.length]){case 'c+': c--; break; case 'r+': r--; break; case 'c-': c++; break; case 'r-': r++; break;}
&nbsp; &nbsp; &nbsp; &nbsp;switch(courses[course%courses.length]){case 'c+': c++; break; case 'r+': r++; break; case 'c-': c--; break; case 'r-': r--; break;}
&nbsp; &nbsp; &nbsp; }
&nbsp; &nbsp; &nbsp;break;
&nbsp; &nbsp; &nbsp;case 'snake':
&nbsp; &nbsp; &nbsp; var courses, course = 0;
&nbsp; &nbsp; &nbsp; switch(road){
&nbsp; &nbsp; &nbsp; &nbsp;case 'BL': c = cl; r = 0; courses = ['r+', 'c-', 'r-', 'c-']; break;
&nbsp; &nbsp; &nbsp; &nbsp;case 'RT': c = 0; r = rl; courses = ['c+', 'r-', 'c-', 'r-']; break;
&nbsp; &nbsp; &nbsp; &nbsp;case 'TL': c = cl; r = rl; courses = ['r-', 'c-', 'r+', 'c-']; break;
&nbsp; &nbsp; &nbsp; &nbsp;case 'LT': c = cl; r = rl; courses = ['c-', 'r-', 'c+', 'r-']; break;
&nbsp; &nbsp; &nbsp; &nbsp;case 'BR': c = 0; r = 0; courses = ['r+', 'c+', 'r-', 'c+']; break;
&nbsp; &nbsp; &nbsp; &nbsp;case 'LB': c = cl; r = 0; courses = ['c-', 'r+', 'c+', 'r+']; break;
&nbsp; &nbsp; &nbsp; &nbsp;case 'TR': c = 0; r = rl; courses = ['r-', 'c+', 'r+', 'c+']; break;
&nbsp; &nbsp; &nbsp; &nbsp;default: c = 0; r = 0; courses = ['c+', 'r+', 'c-', 'r+']; break;//'RB'
&nbsp; &nbsp; &nbsp; }
&nbsp; &nbsp; &nbsp; i = 0;
&nbsp; &nbsp; &nbsp; while(i &lt; cols*rows){
&nbsp; &nbsp; &nbsp; &nbsp;if(c &gt;= 0 &amp;&amp; c &lt; cols &amp;&amp; r &gt;= 0 &amp;&amp; r &lt; rows &amp;&amp; typeof(arr[c+','+r]) == 'undefined'){
&nbsp; &nbsp; &nbsp; &nbsp; arr[c+','+r] = i++;
&nbsp; &nbsp; &nbsp; &nbsp; switch(courses[course%courses.length]){case 'c+': c++; break; case 'r+': r++; break; case 'c-': c--; break; case 'r-': r--; break;}
&nbsp; &nbsp; &nbsp; &nbsp;}
&nbsp; &nbsp; &nbsp; &nbsp;else{
&nbsp; &nbsp; &nbsp; &nbsp; switch(courses[course++%courses.length]){case 'c+': c--; break; case 'r+': r--; break; case 'c-': c++; break; case 'r-': r++; break;}
&nbsp; &nbsp; &nbsp; &nbsp; switch(courses[course++%courses.length]){case 'c+': c++; break; case 'r+': r++; break; case 'c-': c--; break; case 'r-': r--; break;}
&nbsp; &nbsp; &nbsp; &nbsp;}
&nbsp; &nbsp; &nbsp; }
&nbsp; &nbsp; &nbsp;break;
&nbsp; &nbsp; &nbsp;case 'straight_stairs':
&nbsp; &nbsp; &nbsp; switch(road){
&nbsp; &nbsp; &nbsp; &nbsp;case 'BL': case 'TR': case 'TL': case 'BR': var C = 0, R = 0; break;
&nbsp; &nbsp; &nbsp; &nbsp;case 'LB': case 'RT': case 'LT': case 'RB': default: var C = cl, R = 0; break;
&nbsp; &nbsp; &nbsp; }
&nbsp; &nbsp; &nbsp; c = C; r = R;
&nbsp; &nbsp; &nbsp; while(i &lt; count){
&nbsp; &nbsp; &nbsp; &nbsp;if(road.indexOf('T') == 1 || road.indexOf('R') == 1) arr[c+','+r] = il - i++;
&nbsp; &nbsp; &nbsp; &nbsp;else arr[c+','+r] = i++;
&nbsp; &nbsp; &nbsp; &nbsp;switch(road){
&nbsp; &nbsp; &nbsp; &nbsp; case 'BL': case 'TR': c--; r++; break;
&nbsp; &nbsp; &nbsp; &nbsp; case 'TL': case 'BR': c++; r--; break;
&nbsp; &nbsp; &nbsp; &nbsp; case 'LB': case 'RT': c--; r--; break;
&nbsp; &nbsp; &nbsp; &nbsp; case 'RB': case 'LT': default: c++; r++; break;
&nbsp; &nbsp; &nbsp; &nbsp;}
&nbsp; &nbsp; &nbsp; &nbsp;if(c &lt; 0 || r &lt; 0 || c &gt; cl || r &gt; rl){
&nbsp; &nbsp; &nbsp; &nbsp; switch(road){
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;case 'BL': case 'TR': C++; break;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;case 'LB': case 'RT': case 'TL': case 'BR': R++; break;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;case 'RB': case 'LT': default: C--; break;
&nbsp; &nbsp; &nbsp; &nbsp; }
&nbsp; &nbsp; &nbsp; &nbsp; if(C &lt; 0 || R &lt; 0 || C &gt; cl || R &gt; rl){
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;switch(road){
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; case 'BL': case 'TR': C = cl; R++; break;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; case 'TL': case 'BR': R = rl; C++; break;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; case 'LB': case 'RT': R = rl; C--; break;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; case 'RB': case 'LT': default: C = 0; R++; break;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;}
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;if(R &gt; rl) R = rl; else if(R &lt; 0) R = 0; else if(C &gt; cl) C = cl; else if(C &lt; 0) C = 0;
&nbsp; &nbsp; &nbsp; &nbsp; }
&nbsp; &nbsp; &nbsp; &nbsp; r = R; c = C;
&nbsp; &nbsp; &nbsp; &nbsp;}
&nbsp; &nbsp; &nbsp; }
&nbsp; &nbsp; &nbsp;break;
&nbsp; &nbsp; }
&nbsp; &nbsp; if(reverse) foreach(arr, function(i){arr[i] = il - arr[i];});
&nbsp; &nbsp;}else arr['0,0'] = 0;
&nbsp; &nbsp;OrderArr[OrderOptStr] = arr;
&nbsp; }
&nbsp; if(order == 'random'){
&nbsp; &nbsp;map(function(){tmp.push(c+','+r)});
&nbsp; &nbsp;tmp.sort(function(a,b){return Math.random() &gt; 0.5;});
&nbsp; &nbsp;for(var i = 0; i &lt; cols*rows; i++) arr[tmp[i]] = i;
&nbsp; &nbsp;OrderArr[OrderOptStr] = arr;
&nbsp; }
&nbsp; return OrderArr[OrderOptStr];
&nbsp;}//doOrder
&nbsp;var _effectName = 0;
&nbsp;function effectName(){
&nbsp; return 'Sliderman-nameless-effect-'+_effectName++;
&nbsp;}//effectName
&nbsp;var globalEffects = [];
&nbsp;Sliderman.effect = function(e){
&nbsp; if(e){
&nbsp; &nbsp;var n = -1;
&nbsp; &nbsp;if(e.name){
&nbsp; &nbsp; var globalEffectsId = array_search(globalEffects, 'name', e.name);
&nbsp; &nbsp; if(globalEffectsId) n = globalEffectsId;
&nbsp; &nbsp;}else e.name = effectName();
&nbsp; &nbsp;if(n &gt;= 0) globalEffects[n] = e;
&nbsp; &nbsp;else globalEffects.push(e);
&nbsp; }
&nbsp;}//Sliderman.effect
&nbsp;Sliderman.effect({name: 'fade', fade: true, duration: 400});
&nbsp;Sliderman.effect({name: 'move', left: true, move: true, duration: 400});
&nbsp;Sliderman.effect({name: 'stairs', cols: 7, rows: 5, delay: 30, order: 'straight_stairs', road: 'BL', fade: true});
&nbsp;Sliderman.effect({name: 'blinds', cols: 10, delay: 100, duration: 400, order: 'straight', right: true, zoom: true, fade: true});
&nbsp;Sliderman.effect({name: 'rain', cols: 10, delay: 100, duration: 400, order: 'straight', top: true, fade: true});
&nbsp;Sliderman.slider = function(parameters){
&nbsp; setOpacityInit();
&nbsp; var Slider = {}, current, previous, prevImg, status = 'free', isHover = false, images = [], descriptions = [], links = [], ef = function(){};
&nbsp; //EVENTS
&nbsp; var events = parameters.events, eventCall = events ? function(e){if(events[e] &amp;&amp; typeof(events[e]) == 'function') events[e](Slider);} : ef;
&nbsp; var contentmode = parameters.contentmode;
&nbsp; //SLIDER EFECTS
&nbsp; var effects = [];
&nbsp; var previousEffect = -1;
&nbsp; var addEffect = function(e){
&nbsp; &nbsp;if(typeof(e) == 'string'){
&nbsp; &nbsp; e = e.split(',');
&nbsp; &nbsp; if(e.length == 1){
&nbsp; &nbsp; &nbsp;var globalEffectsId = array_search(globalEffects, 'name', e);
&nbsp; &nbsp; &nbsp;if(globalEffectsId) addEffect(globalEffects[globalEffectsId])
&nbsp; &nbsp; }else for(var i &nbsp;= 0; i &lt; e.length; i++) addEffect(e[i]);
&nbsp; &nbsp;}else if(e){
&nbsp; &nbsp; if(!e.name) e.name = effectName();
&nbsp; &nbsp; var effectsId = array_search(effects, 'name', e.name);
&nbsp; &nbsp; if(!effectsId) effectsId = effects.length;
&nbsp; &nbsp; effects[effectsId] = array_copy(e);
&nbsp; &nbsp;}
&nbsp; }//addEffect
&nbsp; var getEffect = function(){
&nbsp; &nbsp;var n = 0;
&nbsp; &nbsp;if(effects.length &gt; 1){
&nbsp; &nbsp; n = random(effects.length);
&nbsp; &nbsp; if(previousEffect == n) n++;
&nbsp; &nbsp; n %= effects.length;
&nbsp; &nbsp; previousEffect = n;
&nbsp; &nbsp;}
&nbsp; &nbsp;return effects[n];
&nbsp; }//getEffect
&nbsp; if(parameters.effects){
&nbsp; &nbsp;if(parameters.effects.constructor == Array) for(var i = 0; i &lt; parameters.effects.length; i++) addEffect(parameters.effects[i]);
&nbsp; &nbsp;else addEffect(parameters.effects);
&nbsp; }
&nbsp; if(!effects.length) effects = array_copy(globalEffects);
&nbsp; //OPTIONS
&nbsp; var display = parameters.display || {};
&nbsp; display.width = parameters.width;
&nbsp; display.height = parameters.height;
&nbsp; var loading = display.loading || {};
&nbsp; var description = display.description || null;
&nbsp; var navigation = display.navigation || null;
&nbsp; var buttons = display.buttons || null;
&nbsp; var styleDef = {width: display.width, height: display.height, position: 'absolute', top: 0, left: 0, display: 'block'};
&nbsp; var mainCont = document.getElementById(parameters.container);
&nbsp; addElementEvent(mainCont, 'onmouseover', function(){isHover = true;
&nbsp; &nbsp;if(buttons &amp;&amp; buttons.hide) show(buttonsCont.style);
&nbsp; &nbsp;if(description &amp;&amp; description.hide &amp;&amp; !contentmode) show(descriptionCont.style);
&nbsp; &nbsp;if(display.pause) autoplay(false);
&nbsp; });
&nbsp; addElementEvent(mainCont, 'onmouseout', function(){isHover = false;
&nbsp; &nbsp;if(buttons &amp;&amp; buttons.hide) hide(buttonsCont.style);
&nbsp; &nbsp;if(description &amp;&amp; description.hide &amp;&amp; !contentmode) hide(descriptionCont.style);
&nbsp; &nbsp;if(display.pause) autoplay(true);
&nbsp; });
&nbsp; //GET CONTENT
&nbsp; if(contentmode){
&nbsp; &nbsp;for(var i = 0; i &lt; mainCont.childNodes.length; i++){
&nbsp; &nbsp; if(mainCont.childNodes[i].nodeType == 1){
&nbsp; &nbsp; &nbsp;images.push(mainCont.childNodes[i].cloneNode(true));
&nbsp; &nbsp; &nbsp;hide(mainCont.childNodes[i].style);
&nbsp; &nbsp; }
&nbsp; &nbsp;}
&nbsp; }else{
&nbsp; &nbsp;for(var i = 0; i &lt; mainCont.childNodes.length; i++){
&nbsp; &nbsp; if(mainCont.childNodes[i].nodeType == 1){
&nbsp; &nbsp; &nbsp;if(mainCont.childNodes[i].tagName == 'A'){
&nbsp; &nbsp; &nbsp; var img = mainCont.childNodes[i].getElementsByTagName('IMG');
&nbsp; &nbsp; &nbsp; if(img.length){
&nbsp; &nbsp; &nbsp; &nbsp;images.push(img[0].src);
&nbsp; &nbsp; &nbsp; &nbsp;links[images.length-1] = mainCont.childNodes[i];
&nbsp; &nbsp; &nbsp; }else descriptions[images.length-1] = mainCont.childNodes[i];
&nbsp; &nbsp; &nbsp;}else if(mainCont.childNodes[i].tagName == 'IMG'){
&nbsp; &nbsp; &nbsp; images.push(mainCont.childNodes[i].src);
&nbsp; &nbsp; &nbsp; if(mainCont.childNodes[i].useMap){
&nbsp; &nbsp; &nbsp; &nbsp;var maps = document.getElementsByTagName('MAP'), map;
&nbsp; &nbsp; &nbsp; &nbsp;if(maps.length){
&nbsp; &nbsp; &nbsp; &nbsp; for(var m = 0; m &lt; maps.length; m++){
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;if(maps[m].name &amp;&amp; mainCont.childNodes[i].useMap.replace(/^[^#]*#/, '') == maps[m].name) map = maps[m];
&nbsp; &nbsp; &nbsp; &nbsp; }
&nbsp; &nbsp; &nbsp; &nbsp;}
&nbsp; &nbsp; &nbsp; &nbsp;if(map) links[images.length-1] = map;
&nbsp; &nbsp; &nbsp; }
&nbsp; &nbsp; &nbsp;}else if(mainCont.childNodes[i].tagName == 'MAP') continue;
&nbsp; &nbsp; &nbsp;else descriptions[images.length-1] = mainCont.childNodes[i];
&nbsp; &nbsp; &nbsp;hide(mainCont.childNodes[i].style);
&nbsp; &nbsp; }
&nbsp; &nbsp;}
&nbsp; &nbsp;for(var i = 0; i &lt; images.length; i++) loadImage(images[i]);
&nbsp; }
&nbsp; //CONTAINERS
&nbsp; var sliderCont = newElement('DIV', {width: display.width, height: display.height, position: 'relative'}); mainCont.appendChild(sliderCont);
&nbsp; var imagesCont = newElement('DIV', styleDef); sliderCont.appendChild(imagesCont);
&nbsp; //var partsCont = newElement('DIV', styleDef); sliderCont.appendChild(partsCont);
&nbsp; partsCont = sliderCont;
&nbsp; //LINKS
&nbsp; if(contentmode) var linkUpd = ef;
&nbsp; else{
&nbsp; &nbsp;var lnk = newElement('DIV', styleDef); partsCont.appendChild(lnk);
&nbsp; &nbsp;var linkUpd = function(){
&nbsp; &nbsp; lnk.innerHTML = '';
&nbsp; &nbsp; value = links[current];
&nbsp; &nbsp; if(value){
&nbsp; &nbsp; &nbsp;if(value.tagName == 'MAP'){
&nbsp; &nbsp; &nbsp; var a = newElement('IMG', styleDef);
&nbsp; &nbsp; &nbsp; a.src = images[current];
&nbsp; &nbsp; &nbsp; a.useMap = '#'+value.name;
&nbsp; &nbsp; &nbsp;}else{
&nbsp; &nbsp; &nbsp; var a = newElement('A', styleDef);
&nbsp; &nbsp; &nbsp; a.href = value.href;
&nbsp; &nbsp; &nbsp; a.target = value.target;
&nbsp; &nbsp; &nbsp;}
&nbsp; &nbsp; &nbsp;setStyles(a.style, {opacity: 0, background: '#000000'})
&nbsp; &nbsp; &nbsp;a.onfocus = function(){this.blur();};
&nbsp; &nbsp; &nbsp;lnk.appendChild(a);
&nbsp; &nbsp; }
&nbsp; &nbsp;}
&nbsp; }
&nbsp; //LOADING
&nbsp; if(contentmode) var showLoading = ef;
&nbsp; else{
&nbsp; &nbsp;var loadingCont = newElement('DIV'); partsCont.appendChild(loadingCont);
&nbsp; &nbsp;if(loading.background){
&nbsp; &nbsp; var loadingBgStyle = array_copy(styleDef);
&nbsp; &nbsp; loadingBgStyle.background = loading.background;
&nbsp; &nbsp; if(loading.opacity) loadingBgStyle.opacity = loading.opacity;
&nbsp; &nbsp; loadingCont.appendChild(newElement('DIV', loadingBgStyle));
&nbsp; &nbsp;}
&nbsp; &nbsp;if(loading.image){
&nbsp; &nbsp; var loadingImgStyle = array_copy(styleDef);
&nbsp; &nbsp; loadingImgStyle.background = 'url('+(loading.image)+') no-repeat center center';
&nbsp; &nbsp; loadingCont.appendChild(newElement('DIV', loadingImgStyle));
&nbsp; &nbsp;}
&nbsp; &nbsp;var showLoading = function(a){
&nbsp; &nbsp; if(a) show(loadingCont.style);
&nbsp; &nbsp; else hide(loadingCont.style);
&nbsp; &nbsp; status = a ? 'loading' : 'free';
&nbsp; &nbsp;}
&nbsp; }
&nbsp; //DESCRIPTION
&nbsp; if(description &amp;&amp; !contentmode){
&nbsp; &nbsp;var descriptionCont = newElement('DIV'); partsCont.appendChild(descriptionCont);
&nbsp; &nbsp;if(description.hide) hide(descriptionCont.style);
&nbsp; &nbsp;var descriptionStl = {position: 'absolute', overflow: 'hidden', textAlign: 'left'};
&nbsp; &nbsp;if(!description) description = [];
&nbsp; &nbsp;description.position = validateOption(description.position, 'top,left,right,bottom')
&nbsp; &nbsp;descriptionStl.background = description.background || 'white';
&nbsp; &nbsp;descriptionStl.opacity = description.opacity || 0.5;
&nbsp; &nbsp;descriptionStl.width = description.position == 'top' || description.position == 'bottom' ? display.width : description.width || display.width*0.2;
&nbsp; &nbsp;descriptionStl.height = description.position == 'left' || description.position == 'right' ? display.height : description.height || display.height*0.2;
&nbsp; &nbsp;descriptionStl[description.position == 'bottom'?'bottom':'top'] = 0;
&nbsp; &nbsp;descriptionStl[description.position == 'right'?'right':'left'] = 0;
&nbsp; &nbsp;var descBg = newElement('DIV', descriptionStl); descriptionCont.appendChild(descBg);
&nbsp; &nbsp;descriptionStl.opacity = 1; descriptionStl.background = '';
&nbsp; &nbsp;var desc = newElement('DIV', descriptionStl); descriptionCont.appendChild(desc);
&nbsp; &nbsp;var descriptionShow = function(){
&nbsp; &nbsp; desc.innerHTML = '';
&nbsp; &nbsp; setStyle(descriptionCont.style, 'visibility', 'hidden');
&nbsp; &nbsp; var value = descriptions[current];
&nbsp; &nbsp; if(value){
&nbsp; &nbsp; &nbsp;setStyle(descriptionCont.style, 'visibility', 'visible');
&nbsp; &nbsp; &nbsp;value = value.cloneNode(true);
&nbsp; &nbsp; &nbsp;show(value.style);
&nbsp; &nbsp; &nbsp;desc.appendChild(value);
&nbsp; &nbsp; &nbsp;if(isHover) show(descriptionCont.style);
&nbsp; &nbsp; }
&nbsp; &nbsp;}
&nbsp; }else var descriptionShow = ef
&nbsp; //BUTTONS
&nbsp; if(buttons){
&nbsp; &nbsp;var buttonsCont = newElement('DIV'); partsCont.appendChild(buttonsCont);
&nbsp; &nbsp;if(buttons.hide) hide(buttonsCont.style);
&nbsp; &nbsp;var btnPrev = newElement('A'); buttonsCont.appendChild(btnPrev);
&nbsp; &nbsp;btnPrev.href = 'javascript:void(0);';
&nbsp; &nbsp;var btnNext = btnPrev.cloneNode(true); buttonsCont.appendChild(btnNext);
&nbsp; &nbsp;btnPrev.onfocus = function(){this.blur();}
&nbsp; &nbsp;btnNext.onfocus = function(){this.blur();}
&nbsp; &nbsp;btnPrev.onclick = function(){Slider.prev();}
&nbsp; &nbsp;btnNext.onclick = function(){Slider.next();}
&nbsp; &nbsp;if(buttons.prev.label) btnPrev.innerHTML = typeof(buttons.prev.label) == 'string' ? buttons.prev.label : 'prev';
&nbsp; &nbsp;if(buttons.prev.label) btnNext.innerHTML = typeof(buttons.next.label) == 'string' ? buttons.next.label : 'next';
&nbsp; &nbsp;if(buttons.prev.className) btnPrev.className = buttons.prev.className;
&nbsp; &nbsp;if(buttons.next.className) btnNext.className = buttons.next.className;
&nbsp; &nbsp;if(buttons.opacity || buttons.prev.opacity) setOpacity(btnPrev.style, buttons.opacity || buttons.prev.opacity);
&nbsp; &nbsp;if(buttons.opacity || buttons.next.opacity) setOpacity(btnNext.style, buttons.opacity || buttons.next.opacity);
&nbsp; }
&nbsp; //NAVIGATION
&nbsp; if(navigation){
&nbsp; &nbsp;var navigationCont = document.getElementById(navigation.container);
&nbsp; &nbsp;var a;
&nbsp; &nbsp;if(navigation.prev){
&nbsp; &nbsp; a = newElement('A');
&nbsp; &nbsp; if(navigation.prev.label) a.innerHTML = typeof(navigation.prev.label) == 'string' ? navigation.prev.label : 'Prev';
&nbsp; &nbsp; if(navigation.prev.className) a.className = navigation.prev.className;
&nbsp; &nbsp; a.href = 'javascript:void(0);';
&nbsp; &nbsp; a.onfocus = function(){this.blur();};
&nbsp; &nbsp; a.onclick = function(){Slider.prev();};
&nbsp; &nbsp; navigationCont.appendChild(a);
&nbsp; &nbsp;}
&nbsp; &nbsp;var navigationLinks = [];
&nbsp; &nbsp;for(var i = 0; i &lt; images.length; i++){
&nbsp; &nbsp; a = newElement('A');
&nbsp; &nbsp; if(navigation.label) a.innerHTML = typeof(navigation.label) == 'string' ? navigation.label : i+1;
&nbsp; &nbsp; if(navigation.className) a.className = navigation.className;
&nbsp; &nbsp; a.href = 'javascript:void(0);';
&nbsp; &nbsp; a.id = parameters.container+'_SliderNavigation'+i;
&nbsp; &nbsp; a.onfocus = function(){this.blur();};
&nbsp; &nbsp; a.onclick = function(){Slider.go(this.id.replace(/[^\d]+/g, ''));};
&nbsp; &nbsp; navigationLinks.push(a);
&nbsp; &nbsp; navigationCont.appendChild(a);
&nbsp; &nbsp;}
&nbsp; &nbsp;if(navigation.next){
&nbsp; &nbsp; a = newElement('A');
&nbsp; &nbsp; if(navigation.next.label) a.innerHTML = typeof(navigation.next.label) == 'string' ? navigation.next.label : 'Next';
&nbsp; &nbsp; if(navigation.next.className) a.className = navigation.next.className;
&nbsp; &nbsp; a.href = 'javascript:void(0);';
&nbsp; &nbsp; a.onfocus = function(){this.blur();};
&nbsp; &nbsp; a.onclick = function(){Slider.next();};
&nbsp; &nbsp; navigationCont.appendChild(a);
&nbsp; &nbsp;}
&nbsp; &nbsp;var navigationUpd = function(){
&nbsp; &nbsp; for(var i = 0; i &lt; navigationLinks.length; i++) navigationLinks[i].className = navigationLinks[i].className.replace(/\bactive\b/g, '');
&nbsp; &nbsp; navigationLinks[current].className += ' active';
&nbsp; &nbsp;}
&nbsp; }else var navigationUpd = ef
&nbsp; //AUTOPLAY
&nbsp; if(display.autoplay){
&nbsp; &nbsp;var autoplayTimeout;
&nbsp; &nbsp;var autoplay = function(a){
&nbsp; &nbsp; if(autoplayTimeout) clearTimeout(autoplayTimeout);
&nbsp; &nbsp; if(a &amp;&amp; !(isHover &amp;&amp; display.pause)) autoplayTimeout = setTimeout(Slider.next, display.autoplay);
&nbsp; &nbsp;}//autoplay
&nbsp; }else var autoplay = ef
&nbsp; var doEffect = function(src){
&nbsp; &nbsp;eventCall('before');
&nbsp; &nbsp;showLoading(false); status = 'busy'; descriptionShow(); linkUpd(); navigationUpd();
&nbsp; &nbsp;Effects({effect: getEffect(), display: display, container: imagesCont, src: src, callback: function(img){
&nbsp; &nbsp; if(prevImg) prevImg.parentNode.removeChild(prevImg);
&nbsp; &nbsp; prevImg = img; status = 'free'; autoplay(true);
&nbsp; &nbsp; eventCall('after');
&nbsp; &nbsp;}, contentmode: contentmode});
&nbsp; };
&nbsp; Slider.next = function(){Slider.go(current + 1);}
&nbsp; Slider.prev = function(){Slider.go(current - 1);}
&nbsp; Slider.go = function(index){
&nbsp; &nbsp;index = (images.length + index) % images.length;
&nbsp; &nbsp;autoplay(false);
&nbsp; &nbsp;if(status != 'free' || current == index) return;
&nbsp; &nbsp;previous = current;
&nbsp; &nbsp;current = index;
&nbsp; &nbsp;eventCall('loading');
&nbsp; &nbsp;showLoading(true);
&nbsp; &nbsp;if(contentmode) doEffect(images[current]);
&nbsp; &nbsp;else loadImage(images[current], doEffect, display.always_show_loading);
&nbsp; }//go
&nbsp; Slider.get = function(a){
&nbsp; &nbsp;switch(a){
&nbsp; &nbsp; case 'length': return images.length; break;
&nbsp; &nbsp; case 'current': return current; break;
&nbsp; &nbsp; case 'previous': return previous; break;
&nbsp; &nbsp; case 'images': return images; break;
&nbsp; &nbsp; case 'links': return links; break;
&nbsp; &nbsp; case 'descriptions': return descriptions; break;
&nbsp; &nbsp;}
&nbsp; }//get
&nbsp; if(display.mousewheel){
&nbsp; &nbsp;onmousewheel = function(d){
&nbsp; &nbsp; if(d &gt; 0) Slider.prev();
&nbsp; &nbsp; else if(d &lt; 0) Slider.next();
&nbsp; &nbsp; return true;
&nbsp; &nbsp;};
&nbsp; &nbsp;function wheel(event){
&nbsp; &nbsp; var d = 0;
&nbsp; &nbsp; if(!event) event = window.event;
&nbsp; &nbsp; if(event.wheelDelta){
&nbsp; &nbsp; &nbsp;d = event.wheelDelta/120;
&nbsp; &nbsp; &nbsp;if(window.opera) d = -d;
&nbsp; &nbsp; }else if(event.detail) d = -event.detail/3;
&nbsp; &nbsp; if(d &amp;&amp; onmousewheel(d)){
&nbsp; &nbsp; &nbsp;if(event.preventDefault) event.preventDefault();
&nbsp; &nbsp; &nbsp;event.returnValue = false;
&nbsp; &nbsp; }
&nbsp; &nbsp;}//wheel
&nbsp; &nbsp;if(mainCont.addEventListener){
&nbsp; &nbsp; mainCont.addEventListener("DOMMouseScroll",wheel,false);
&nbsp; &nbsp; mainCont.addEventListener("mousewheel",wheel,false);
&nbsp; &nbsp;}else addElementEvent(mainCont, 'onmousewheel', wheel);
&nbsp; }
&nbsp; Slider.go(0);
&nbsp; return Slider;
&nbsp;}//Sliderman.slider
}
//]]&gt;
&lt;/script&gt;

&nbsp;&lt;!-- /sliderman.js --&gt;


&lt;div class="c"&gt;&lt;/div&gt;
&lt;div id="SliderNameNavigation"&gt;&lt;/div&gt;
&lt;div class="c"&gt;&lt;/div&gt;
&lt;script type="text/javascript"&gt;
// we created new effect and called it 'demo01'. We use this name later.
Sliderman.effect({name: 'demo01', cols: 10, rows: 5, delay: 10, fade: true, order: 'straight_stairs'});
var demoSlider = Sliderman.slider({container: 'SliderName', width: 560, height: 300, effects: 'demo01',
display: {
pause: true, // slider pauses on mouseover
autoplay: 3000, // 3 seconds slideshow
always_show_loading: 200, // testing loading mode
description: {background: '#ffffff', opacity: 0.5, height: 50, position: 'bottom'}, // image description box settings
&nbsp; &nbsp; &nbsp; loading: {background: '#000000', opacity: 0.2, image: 'https://lh6.googleusercontent.com/-L9uUNznsjlw/TYA_Y_hGZhI/AAAAAAAAAMc/kn0y8YKtCZg/s1600/loading.gif'}, // loading box settings
&nbsp; &nbsp; &nbsp; buttons: {opacity: 1, prev: {className: 'SliderNamePrev', label: ''}, next: {className: 'SliderNameNext', label: ''}}, // Next/Prev buttons settings
&nbsp; &nbsp; &nbsp; navigation: {container: 'SliderNameNavigation', label: '&amp;nbsp;'} // navigation (pages) settings
&nbsp; &nbsp; &nbsp;}});
&nbsp; &nbsp; &lt;/script&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;
É isso! Créditos ao blog Template e Acessórios.