2012-05-01 96 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上实现。