Advertisement
_MANOEL_

Atividade DW2

Aug 20th, 2015
1,405
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  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