-
Notifications
You must be signed in to change notification settings - Fork 37
/
Copy pathdemostracion.html
7 lines (7 loc) · 2.36 KB
/
demostracion.html
1
2
3
4
5
6
7
<!--Si estás mirando este código fuente, dejame felicitarte:
lo has desencriptado para nada, porque no tiene nada secreto.
Solo un poco del mismo código que vas a encontrar en
http://github.com/prigazzi/slider-jquery/ solo que personalizado
para esta demostración en particular.
Ahora, ve a la url de Github y deja un comentario al respecto ;)-->
<!DOCTYPE HTML><html lang="en-US"><head><meta charset="UTF-8"><title>plugin jQuery</title><script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script><script type="text/javascript">(function(a,b,c){a.fn.marquesina=function(b,c){return this.each(function(){$container=a(this).children().eq(0);if($container){var d=$container.children();var e=d.length;var f=d.outerWidth(true);var g=Math.floor(a(this).width()/f);var h=1;var i=false}$container.css("width",(e+g)*f);for(var j=0;j<g;j++){$container.append(d.eq(j).clone())}a(c).click(function(a){a.preventDefault();if(!i){if(h>e){h=2;$container.fadeOut("fast",function(){$container.css("left","0px")});$container.fadeIn("fast")}else{h++}i=true;$container.animate({left:"-="+f},"swing",function(){i=false})}});a(b).click(function(a){a.preventDefault();if(!i){if(h==1){$container.fadeOut("fast",function(){$container.css("left",e*f*-1)});$container.fadeIn("fast");h=e}else{h--}i=true;$container.animate({left:"+="+f},"swing",function(){i=false})}})})}})(jQuery,window) </script><style type="text/css"> section{width:480px;margin:70px auto;}section a{color:#444;display:inline-block;font-size:5em;text-align:center;text-decoration:none;vertical-align:middle;width:238px;}section a:hover{color:#000;}#marco{border:5px solid grey;height:167px;overflow:visible;width:460px;padding:0;}#marco ul{position:relative;margin:0;padding:0;}#marco li{border:1px dashed grey;float:left;font-size:40px;line-height:165px;list-style:none;text-align:center;width:228px;margin:0;}.uno{background-color:rgba(255,200,200,0.6);}.dos{background-color:rgba(200,255,200,0.6);}</style></head><body><section><div id="marco"><ul><li class="foto uno">1</li><li class="foto dos">2</li><li class="foto">3</li><li class="foto">4</li><li class="foto">5</li></ul></div><a href="#" id="anterior">«</a><a href="#" id="siguiente">»</a></section><script type="text/javascript">$(function(){$('#marco').marquesina('#anterior', '#siguiente');});</script></body></html>