jQuery에서 슬라이드 효과 만들기

Grooveshark 재생 목록 또는 You tube 재생 목록과 같은 슬라이드 효과를 만들려고합니다. 지금까지 내가 한 것은 버튼과 막대를 구현하는 것이지만 이제는 슬라이드 효과 구현에 갇혀 있습니다. 이것은 나의 HTML 파일의 코드입니다 :jQuery에서 슬라이드 효과 만들기

<!DOCTYPE html> 
    <html> 
     <head> 
      <title>CAMBIAR...</title> 
      <link rel="stylesheet" href="html 5/slider.css" /> 
      <script type="text/javascript" src="jquery-1.7.1.min.js"></script> 
      <script type="text/javascript" src="jquery-ui-1.8.18.custom.min.js"></script> 
     </head> 

     <body> 
      <div id="slider"> 
       <div id="atras">&lt</div> 
       <div id="content"> 
        &nbsp; 
       </div> 
       <div id="adelante">&gt</div> 
       <div id="operaciones"> 
        <div id="add">+</div> 
       </div> 
       <div id="footer"></div> 
      </div> 
      <script> 
       $(document).ready(
        function() { 
         var cuenta = 0; 
         var elementos = Array(); 

         $("#slider #atras").mousedown(function() { 
          $(this).css({"box-shadow": "inset 5px 0px 10px rgba(0, 0, 0, 0.5)", 
             "color": "white"}); 
         }); 

         $("#slider #atras").mouseup(function() { 
          $(this).css({"box-shadow": "5px 5px 10px rgba(0, 0, 0, 0.5)", 
             "color": "black"}); 
         }); 

         $("#slider #adelante").mousedown(function() { 
          $(this).css({"box-shadow": "inset -5px 0px 10px rgba(0, 0, 0, 0.5)", 
             "color": "white"}); 
         }); 

         $("#slider #adelante").mouseup(function() { 
          $(this).css({"box-shadow": "5px 5px 10px rgba(0, 0, 0, 0.5)", 
             "color": "black"}); 
         }); 

         $("#slider #operaciones #add").click(function() { 
          var new_element = $("<div class='element' id='unique'>"+ (++cuenta) +"</div>"); 
          //new_element.insertAfter($("#slider #content .element:last-child")); 
          $("#slider #content").prepend(new_element); 
         }); 
        }); 
      </script> 
     </body> 
    </html>

이 내 CSS 파일입니다 : 나는 사람이 나를 도울 수있는 기대

* { 
     margin: 0px; 
     padding: 0px; 
    } 

    body { 
     background: #57595a; 
     font-family: Helvetica, sans-serif; 
     font-size: 16px; 
     text-align: center; 
    } 

    #slider { 
     border: 5px dotted white ; 
     margin: 20px auto; 
     line-height: 6.3em; 
     padding: 10px; 
     width: 95%; 
    } 

    #slider #atras { 
     background-color: #CCCCCC; 
     border-radius: 0.25em; 
     box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5); 
     color: black; 
     float: left; 
     height: 100%; 
     width: 3%; 
    } 

    #slider #atras:hover { 
     cursor: pointer; 
    } 
    #slider #content { 
     text-align: left; 
     float: left; 
     width: 74%; 
    } 

    #slider #adelante { 
     background-color: #CCCCCC; 
     border-radius: 0.25em; 
     box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5); 
     color: black; 
     float: left; 
     height: 100%; 
     width: 3%; 
    } 

    #slider #adelante { 
     cursor: pointer; 
    } 

    #slider #operaciones { 
     float: left; 
     width: 20%; 
    } 

    #slider #content .element { 
     background: orange; 
     border-radius: 0.5em; 
     box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5); 
     color: white; 
     display: inline-block; 
     height: 100px; 
     margin: auto 5px; 
     text-align: center; 
     text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); 
     width: 100px; 
    } 

    #slider #operaciones #add { 
     background-color: #f99200; 
     border-radius: 0.5em; 
     box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5); 
     color: white; 
     display: inline-block; 
     height: 50px; 
     vertical-align: middle; 
     margin: 2px 5px; 
     line-height: 3.2em; 
     text-align: center; 
     text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); 
     width: 50px; 
    } 

    #slider #content .element:hover { 
     background-color: #8a8a8a; 
     color: white; 
    } 

    #slider #operaciones #add:hover { 
     background-color: rgb(97, 103, 106); 
     cursor: pointer; 
    } 

    #footer { 
     clear: both; 
    }

. 어떤 방법이든 유효합니다. 단지 무엇을해야 할지를 알 필요가 있습니다. 고마워, 모두의 도움에 감사드립니다. 슬라이드 천이 효과 속성으로 이루어질 수 jQuery를 모바일

출처

2012-03-29 Andrés

중복 가능성 [I 자바 스크립트에서 회전식/슬라이더 효과를 생성 할 수 있는가? (http://stackoverflow.com/questions/ 9937471/how-can-i-create-a-carousel-slider-effect-in-javascript) –

<a href="#newpage" data-transition="slide">click here</a>

의

출처

2012-04-16 20:11:54 Priebe

jQuery에서 슬라이드 효과 만들기

답변

관련 문제