API tools faq
paste
Advertisement
_MANOEL_

Atividade DW2

_MANOEL_
Aug 20th, 2015
2,820
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
ISPF Panel Definition 4.46 KB | None | 0 0
raw download clone embed print report
  1. <!doctype html>
  2. <html LANG="pt-br" ng-app>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Angular JS</title>
  6.     <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">
  7. </head>
  8. <body>
  9.     <style>
  10.         * {margin: 0; padding: 0;}
  11.         body {background: #fff}
  12.         a,img {border: none;}
  13.         .trs {-webkit-transition:all ease-OUT 0.5s;
  14.             -moz-transition:all ease-OUT 0.5s;
  15.             -o-transition:all ease-OUT 0.5s;
  16.             -ms-transition:all ease-OUT 0.5s;
  17.             transition:all ease-OUT 0.5s;}
  18.        
  19.         #slider {POSITION: relative; z-index: 1;}
  20.         #slider a { POSITION: absolute; top: 0; LEFT: 0; opacity: 0;filter:ALPHA(opacity=0);}
  21.         .ativo {opacity: 1!important; filter:ALPHA(opacity=100)!important;}
  22.        
  23.         /*controladores*/
  24.         span {background: #0190EE; cursor: pointer; opacity: 0;filter:ALPHA(opacity=0); POSITION: absolute; bottom: 40%; WIDTH: 43px; height: 43px; z-index: 5;}
  25.         .next {RIGHT: 10px;}
  26.         .next:before,.next:after {LEFT: 21px;}
  27.         .next:before {
  28.             -webkit-transform: rotate(-42deg);
  29.             top: 5px;
  30.         }
  31.         .next:after {
  32.             -webkit-transform: rotate(-132deg);
  33.             top: 19px;
  34.         }
  35.         .next:before,.next:after,.prev:before,.prev:after {content: "";
  36.             height: 20px;
  37.             background: #fff;
  38.             WIDTH: 1px;
  39.             POSITION: absolute;
  40.         }
  41.  
  42.         .prev {LEFT: 10px;}
  43.         .prev:before,.prev:after {LEFT: 18px;}
  44.         .prev:before {
  45.             -webkit-transform: rotate(42deg);
  46.             top: 5px;
  47.         }
  48.         .prev:after {
  49.             -webkit-transform: rotate(132deg);
  50.             top: 19px;
  51.         }
  52.  
  53.  
  54.         figure:hover span {opacity: 0.76;filter:ALPHA(opacity=76);}
  55.  
  56.         figure {
  57.             max-WIDTH: 937px;
  58.             height: 354px;
  59.             POSITION: relative;
  60.             overflow: hidden;
  61.             margin: 50px auto;
  62.         }
  63.  
  64.     figcaption {padding-LEFT: 20px;COLOR: #fff; font-family: "Kaushan Script","Lato","arial"; font-size: 22px; background: rgba(1,); WIDTH: 100%; POSITION: absolute; bottom: 0; LEFT: 0; line-height: 20px; height: 20px; z-index: 5}
  65.     </style>
  66.  
  67.     <figure>
  68.         <span class="trs next"></span>
  69.         <span class="trs prev"></span>
  70.  
  71.         <div id="slider">
  72.             <a href="#" class="trs">
  73.                 <img src="a.jpg" alt="Atividade" /></a>
  74.             <a href="#" class="trs">
  75.                 <img src="a.jpg" alt="Atividade" /></a>    
  76.         </div>
  77.  
  78.         <figcaption></figcaption>
  79.     </figure>
  80.  
  81.     <script TYPE="text/javascript">
  82.         function setaImagem(){
  83.             var settings = {
  84.                 primeiraImg: function(){
  85.                     elemento = document.querySelector("#slider a:first-child");
  86.                     elemento.classList.add("ativo");
  87.                     this.legenda(elemento);
  88.                 },
  89.  
  90.                 slide: function(){
  91.                     elemento = document.querySelector(".ativo");
  92.  
  93.                     if(elemento.nextElementSibling){
  94.                         elemento.nextElementSibling.classList.add("ativo");
  95.                         settings.legenda(elemento.nextElementSibling);
  96.                         elemento.classList.remove("ativo");
  97.                     }else{
  98.                         elemento.classList.remove("ativo");
  99.                         settings.primeiraImg();
  100.                     }
  101.  
  102.                 },
  103.  
  104.                 proximo: function(){
  105.                     clearInterval(intervalo);
  106.                     elemento = document.querySelector(".ativo");
  107.                    
  108.                     if(elemento.nextElementSibling){
  109.                         elemento.nextElementSibling.classList.add("ativo");
  110.                         settings.legenda(elemento.nextElementSibling);
  111.                         elemento.classList.remove("ativo");
  112.                     }else{
  113.                         elemento.classList.remove("ativo");
  114.                         settings.primeiraImg();
  115.                     }
  116.                     intervalo = setInterval(settings.slide,4000);
  117.                 },
  118.  
  119.                 anterior: function(){
  120.                     clearInterval(intervalo);
  121.                     elemento = document.querySelector(".ativo");
  122.                    
  123.                     if(elemento.previousElementSibling){
  124.                         elemento.previousElementSibling.classList.add("ativo");
  125.                         settings.legenda(elemento.previousElementSibling);
  126.                         elemento.classList.remove("ativo");
  127.                     }else{
  128.                         elemento.classList.remove("ativo");                    
  129.                         elemento = document.querySelector("a:last-child");
  130.                         elemento.classList.add("ativo");
  131.                         this.legenda(elemento);
  132.                     }
  133.                     intervalo = setInterval(settings.slide,4000);
  134.                 },
  135.  
  136.                 legenda: function(obj){
  137.                     var legenda = obj.querySelector("img").getAttribute("alt");
  138.                     document.querySelector("figcaption").innerHTML = legenda;
  139.                 }
  140.  
  141.             }
  142.  
  143.  
  144.             //chama o slide
  145.             settings.primeiraImg();
  146.  
  147.             //chama a legenda
  148.             settings.legenda(elemento);
  149.  
  150.             //chama o slide à um determinado tempo
  151.             var intervalo = setInterval(settings.slide,4000);
  152.             document.querySelector(".next").addEventListener("click",settings.proximo,false);
  153.             document.querySelector(".prev").addEventListener("click",settings.anterior,false);
  154.  
  155.         }
  156.  
  157.         WINDOW.addEventListener("load",setaImagem,false);
  158.     </script>
  159. </body>
  160. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!