在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; 
    }

我希望有人可以帮助我了这一点。任何方法都是有效的，我只需要知道该怎么做，而不是完成它。谢谢，我感谢大家的帮助。

来源

2012-03-29 Andrés

可能重复的[如何创建在JavaScript的圆盘传送带/滑效果？]（http://stackoverflow.com/questions/ 9937471 /如何-可以-I-创建-A-转盘滑块效果的在JavaScript的） – 2012-10-24 04:11:23

对于jQuery Mobile的滑动作用可与过渡属性进行

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

的

来源

2012-04-16 20:11:54 Priebe

在jQuery中创建幻灯片效果

回答

相关问题