SHARE
TWEET

Atividade DW2

_MANOEL_ Aug 20th, 2015 245 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>
RAW Paste Data
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
 
Top