API tools faq
paste
Advertisement
asimryu

20150923 jquery-slide 2

asimryu
Sep 22nd, 2015
177
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 3.38 KB | None | 0 0
raw download clone embed print report
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>HTML5</title>
  6. <style>
  7. body { margin:0; }
  8. .wrap {
  9.     width:1000px;
  10.     margin:0 auto;
  11. }
  12. header {
  13. width:100%;
  14. height:300px;
  15. background-image:url(images/main.jpg);
  16. background-position: center;
  17. }
  18. nav {
  19.     width:100%;
  20.     height: 50px;
  21.     background-color:rgb(0,0,0);
  22. }
  23. nav a {
  24.     padding:0 10px;
  25.     height:50px;
  26.     color:white;
  27.     font-size: 1.7em;
  28.     line-height:50px;
  29.     display:inline-block;
  30.     text-decoration:none;
  31. }
  32. nav a:hover {
  33.     background-color:#f00;
  34. }
  35. section, aside { float:left; min-height:400px; }
  36. section { width:640px; }
  37. aside { width:360px; }
  38. footer {
  39.     clear:both;
  40.     width:100%;
  41.     height: 50px;
  42.     line-height: 50px;
  43.     color: white;
  44.     text-align: center;
  45.     background-color:#000;
  46. }
  47. .slide {
  48.     position:relative;
  49.     width:640px;
  50.     height:480px;
  51.     margin:10px 0;
  52.     overflow:hidden;
  53. }
  54. .slide > img {
  55.     position: absolute;
  56.     width: 640px;
  57.     height: 480px;
  58.     left: -640px;
  59.     top: 0;
  60. }
  61. </style>
  62. </head>
  63. <body>
  64. <div class="wrap">
  65.  <header></header>
  66.  <nav>
  67.   <a href="#">HOME</a>
  68.   <a href="#">JavaScript</a>
  69.   <a href="#">CSS</a>
  70.   <a href="#">PHP&amp;MySql</a>
  71.  </nav>
  72.  <div class="main">
  73.   <section>
  74.    <article class="slide">
  75.     <img src="images/1.jpg">
  76.     <img src="images/2.jpg">
  77.     <img src="images/3.jpg">
  78.     <img src="images/4.jpg">
  79.     <img src="images/5.jpg">
  80.    </article>
  81.     <p>
  82.      <button class="prevnext" data-dir="prev">이전</button>
  83.      <button class="prevnext" data-dir="next">다음</button>
  84.      <button class="prevnext" data-dir="up">위로</button>
  85.      <button class="prevnext" data-dir="down">아래로</button>
  86.     </p>
  87.   </section>
  88.   <aside>
  89.   </aside>
  90.  </div>
  91.  <footer>&copy;2015 유승열 All Rights Reserved</footer>
  92. </div>
  93.     <script src="http://code.jquery.com/jquery-latest.js"></script>
  94. <script>
  95. var sno = 0;
  96. var slides = $(".slide > img");
  97. var max = slides.length - 1;
  98. $( slides[sno] ).css("left","0");
  99. var isAnimating = false;
  100. $(".prevnext").click(function(){
  101.     if( isAnimating == true ) return;
  102.     isAnimating = true;
  103.     var dir = $(this).attr("data-dir");
  104.     var initLeft = 0;
  105.     var initTop = 0;
  106.     var toLeft = 0;
  107.     var toTop = 0;
  108.     var endLeft = 0;
  109.     var endTop = 0;
  110.     var num = 0;
  111.     if( dir == "next" ) {
  112.         initLeft = "-640px";
  113.         initTop = 0;
  114.         toLeft = 0;
  115.         toTop = 0;
  116.         endLeft = "640px";
  117.         endTop = 0;
  118.         num = 1;
  119.     } else if( dir == "prev" ) {
  120.         initLeft = "640px";
  121.         initTop = 0;       
  122.         toLeft = 0;
  123.         toTop = 0;
  124.         endLeft = "-640px";
  125.         endTop = 0;
  126.         num = -1;
  127.     } else if( dir == "up" ) {
  128.         initLeft = 0;
  129.         initTop = "480px";     
  130.         toLeft = 0;
  131.         toTop = 0;
  132.         endLeft = 0;
  133.         endTop = "-480px";
  134.         num = 1;
  135.     } else if( dir == "down" ) {
  136.         initLeft = 0;
  137.         initTop = "-480px";    
  138.         toLeft = 0;
  139.         toTop = 0;
  140.         endLeft = 0;
  141.         endTop = "480px";
  142.         num = -1;
  143.     }
  144.     for( var i = 0; i <= max; i++){
  145.         if( i != sno ) {
  146.             $(slides[i]).css({"left":initLeft,"top":initTop});
  147.         }
  148.     }
  149.     //현재 보이는 이미지 애니메이션
  150.     $( slides[sno] ).animate({"left":endLeft,"top":endTop},2000,function(){
  151.         $(this).css({"left":initLeft,"top":initTop});
  152.     });
  153.     sno = sno + num;
  154.     if( sno > max ) sno = 0;
  155.     if( sno < 0 ) sno = max;
  156.     //새로 나타날 이미지 애니메이션
  157.     $( slides[sno] ).animate({"left":toLeft,"top":toTop},2000,function(){ isAnimating=false; });
  158. });
  159. //var timer = setInterval(function(){ $(".next").click(); },2000);
  160. </script>
  161. </body>
  162. </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!