API tools faq
paste
asimryu

jquery slide 20141030-3

asimryu
Oct 30th, 2014
263
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 4.46 KB | None | 0 0
raw download clone embed print report
  1. <!doctype html>
  2. <html lang="ko">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>slide</title>
  6. <style>
  7.     body{margin:0;}
  8.     #slidebox{position:relative;width:500px;height:300px;   margin:10px auto;overflow:hidden;}
  9.     #slide{width:500px;height:300px;overflow:hidden;list-style:none;    padding:0;margin:0;}
  10.     #slide li{position:absolute;left:0;top:0;}
  11.     #buttons, #numbers, #imgtitle{width:500px;height:auto;text-align:center;    margin:0 auto;}
  12. </style>
  13. </head>
  14. <body>
  15.     <div id="slidebox">
  16.         <ul id="slide">
  17.             <li title="음식 이미지입니다."><img src="http://lorempixel.com/500/300/food"></li>
  18.             <li title="멋진 자연입니다."><img src="http://lorempixel.com/500/300/nature"></li>
  19.             <li title="동물을 사랑합시다."><img src="http://lorempixel.com/500/300/animals"></li>
  20.             <li title="우리의 도시는 아름답습니다."><img src="http://lorempixel.com/500/300/city"></li>
  21.             <li title="열심히 운동합시다."><img src="http://lorempixel.com/500/300/sports"></li>
  22.         </ul>
  23.     </div>
  24.     <div id="imgtitle"></div>
  25.     <div id="numbers"></div>
  26.     <div id="buttons">
  27.         <button id="prev">이전</button>
  28.         <button id="next">다음</button>
  29.         <button id="up">위로</button>
  30.         <button id="down">아래로</button>
  31.         <button id="start">시작</button>
  32.         <button id="stop">중지</button>
  33.     </div>
  34.     <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
  35.     <script type="text/javascript">
  36.  
  37.         $(function(){
  38.  
  39.             $("#slide > li").css("left",-500);
  40.             var slides = $("#slide > li");
  41.             var sno = 0;
  42.             var max = slides.length - 1;
  43.             $(slides[sno]).css({left:0,top:0});
  44.             var isanimate = false;
  45.             var direction = "next";
  46.  
  47.             for( var i = 0; i <= max; i++ ) {
  48.                 var addhtml = " <a href='" + i + "'>" + (i+1) + "</a> ";
  49.                 $("#numbers").append( addhtml );
  50.             }  
  51.            
  52.             changeNumberColor();
  53.  
  54.             $("#numbers a").click(function(event){
  55.                 event.preventDefault();
  56.                 var tmpNo = $(this).attr("href");
  57.                 if(direction == "next" || direction == "dow"){
  58.                     sno = parseInt(tmpNo) - 1;
  59.                     if(sno < 0) sno = max;
  60.                 } else if(direction == "prev" || direction == "up"){
  61.                     sno = parseInt(tmpNo) + 1;
  62.                     if(sno >max) sno = 0;
  63.                 }
  64.                 isanimate = false;
  65.                 if( timer == null ) {
  66.                     $("#" + direction).click();
  67.                 }else{
  68.                     $("#stop").click();
  69.                     $("#" + direction).click();
  70.                     $("#start").click();
  71.                 }
  72.             });
  73.        
  74.             $("#next").click(function(){
  75.                 if( isanimate ) return;
  76.                 direction = "next";
  77.                 isanimate = true;
  78.                 $(slides[sno]).animate({left:500},1000,function(){isanimate=false;});
  79.                 sno++;
  80.                 if(sno>max) sno=0;
  81.                 $("#slide > li").css({left:-500,top:0});
  82.                 $(slides[sno]).animate({left:0},1000);
  83.                 changeNumberColor();
  84.             });
  85.  
  86.             $("#prev").click(function(){
  87.                 if( isanimate ) return;
  88.                 direction = "prev";
  89.                 isanimate = true;
  90.                 $(slides[sno]).animate({left:-500},1000,function(){isanimate=false;});
  91.                 sno--;
  92.                 if(sno<0) sno=max;
  93.                 $("#slide > li").css({left:500,top:0});
  94.                 $(slides[sno]).animate({left:0},1000);
  95.                 changeNumberColor();
  96.             });
  97.  
  98.             $("#up").click(function(){
  99.                 if( isanimate ) return;
  100.                 direction = "up";
  101.                 isanimate = true;
  102.                 $(slides[sno]).animate({top:-300},1000,function(){isanimate=false;});
  103.                 sno++;
  104.                 if(sno>max) sno=0;
  105.                 $("#slide > li").css({left:0,top:300});
  106.                 $(slides[sno]).animate({top:0},1000);
  107.                 changeNumberColor();
  108.             });
  109.  
  110.             $("#down").click(function(){
  111.                 if( isanimate ) return;
  112.                 direction = "down";
  113.                 isanimate = true;
  114.                 $(slides[sno]).animate({top:300},1000,function(){isanimate=false;});
  115.                 sno--;
  116.                 if(sno<0) sno=max;
  117.                 $("#slide > li").css({left:0,top:-300});
  118.                 $(slides[sno]).animate({top:0},1000);
  119.                 changeNumberColor();
  120.             });
  121.  
  122.             function changeNumberColor(){
  123.                 var slidelinks = $("#numbers a");
  124.                 for(var i = 0; i < slidelinks.length; i++){
  125.                     if(i == sno) {
  126.                         $(slidelinks[i]).css({color:"red",fontWeight:"bold"});
  127.                         var imgtitle = $(slides[sno]).attr("title");
  128.                         $("#imgtitle").html(imgtitle);
  129.                     } else {
  130.                         $(slidelinks[i]).css({color:"black",fontWeight:"normal"});
  131.                     }
  132.                 }
  133.             }
  134.  
  135.             var timer = null;
  136.             $("#start").click(function(){
  137.                 if( timer == null ) {
  138.                     timer = setInterval(function(){ $("#" + direction).click(); },3000);
  139.                 }
  140.             });
  141.  
  142.             $("#stop").click(function(){
  143.                 if( timer != null ) {
  144.                     clearInterval(timer);
  145.                     timer = null;
  146.                 }
  147.             });
  148.  
  149.             $("#start").click();
  150.  
  151.         });
  152.  
  153.     </script>
  154. </body>
  155. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
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!