Создайте эффект слайда в jQuery

Я пытаюсь сделать эффект слайда, например, список воспроизведения Grooveshark или список воспроизведения трубки You. То, что я сделал до сих пор, это реализовать кнопки и панель, но теперь я застрял в реализации эффекта слайда. Это код моего 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; 
    }

Я ожидаю, что кто-то может помочь мне с этим. Любой подход действителен, мне просто нужно знать, что делать, а не делать это. Спасибо, я ценю помощь каждого.

источник

2012-03-29 Andrés

возможно дубликат [Как я могу создать эффект карусельного/ползунок в JavaScript?] (Http://stackoverflow.com/questions/ 9937471/как-кан-я-Create-A-карусель-слайдер эффект-в-JavaScript) –

Для JQuery Mobile эффект слайд может быть сделано с атрибутом перехода

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

источник

2012-04-16 20:11:54 Priebe

Создайте эффект слайда в jQuery

ответ

Смежные вопросы