2012-05-01 254 views
-1

嘿我正在尋找做一個簡單的下拉式jQuery圖像滑塊,當你點擊每個圖像,如果有人可以幫助我這將是一個救星,因爲我不是很好,仍然在學習HTML和jquery.So到目前爲止我的代碼是這樣的JQUERY圖像滑塊

<html> 
    <head> 
     <meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/> 
     <link rel="stylesheet" type="text/css" href="eventspage.css" /> 
     <title>Events page</title> 
     <style> 
      img { 
       float:left; 
      } 
      .container { 
       width:60%; 
       margin 
      } 
      #slider { 
       width:400px; 
       background-color:green; 
       height:200px; 
      } 
      div { 
       position:absolute; 
      } 
      .window { 
       width:400px; 
       height:400px; 
       overflow:hidden; 
       background-color: aqua; 
      } 
     </style> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"></script> 
    </head> 
    <body> 
     <div class="container"> 
      <button id="left">left</button> <button id="right">right</button> 

      <div class="window"> 
       <div id="slider" class="block"> 
        <img width="200px" src="person1.jpg"> 
        <img width="200px" src="person2.jpg"> 
       </div> 
      </div> 
     </div>  

     <script> 
      $("#right").click(function(){ 
       $(".block").animate({"left": "+=100px"}, "slow"); 
      }); 

      $("#left").click(function(){ 
       $(".block").animate({"left": "-=100px"}, "slow"); 
      }); 
     </script> 
    </body> 
</html> 

回答

-1

對於你的問題的下拉部分:

您可以通過在圖像上添加一個jQuery的事件處理程序,做到這一點

$("#slider img").click(function() { 
    //CODE TO OPEN THE DROPDOWN 
}); 
-1

jQuery Cycle是事實上的jQuery的圖像滑塊插件,基本上做這一切。

我不完全確定你的下拉是什麼意思,但它可能很容易在Cycle上實現。