2011-10-11 31 views
0
<script type="text/JavaScript"> 
$(document).ready(function(){ 
    $('#button a').click(function(){ 
     var integer = $(this).attr('rel'); 
     $('#myslide .cover').animate({left:-160*(parseInt(integer)-1)}) /*----- Width of div mystuff (here 160) ------ */ 
     $('#button a').each(function(){ 
     $(this).removeClass('active'); 
      if($(this).hasClass('button'+integer)){ 
       $(this).addClass('active')} 
     }); 
    }); 
}); 
</script> 

HTML:自動旋轉的div使用jQuery

<div id="button"> 
     <a class="button1 active" rel="1" href="#"></a> 
     <a class="button2" rel="2" href="#"></a> 
     <a class="button3" rel="3" href="#"></a> 
    </div> <!-- end of div button--> 

    <div class="clear"></div> 

    <div id="myslide"> 
     <div class="cover"> 

      <div class="mystuff"> 
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas pharetra, elit sed hendrerit condimentum, libero elit tincidunt mauris, id rutrum tellus leo at urna. Fusce dui mi, lacinia sit amet blandit vitae, interdum ut eros. Nulla egestas imperdiet rutrum. Praesent vel metus ligula. In ut leo enim, in interdum urna. In hac habitasse platea dictumst. Nullam euismod, eros et venenatis adipiscing, libero libero cursus magna, et semper tellus ipsum eget libero. 
      </div> 
      <div class="mystuff"> 
       Aenean scelerisque ipsum a nunc placerat sed blandit odio sollicitudin. Donec sed velit id ipsum lobortis tincidunt a sit amet leo. Praesent sit amet nisl a arcu lobortis egestas. Nunc at felis in erat condimentum ornare vel vel nisl. Phasellus ultrices nisi vel leo commodo et rhoncus ipsum porttitor. Fusce eu ligula sit amet sapien ullamcorper adipiscing. Suspendisse non ipsum elit. Nunc vehicula, felis non scelerisque aliquam, tellus leo consequat sem, ac suscipit nisi risus a justo. Quisque sollicitudin iaculis nisl at luctus. Curabitur porttitor lacus et dui blandit vulputate. In eu quam quam. 
      </div> 
      <div class="mystuff"> 
       Suspendisse iaculis sodales dui pretium faucibus. Praesent vitae ipsum justo, id tempor tellus. In nulla leo, dignissim quis luctus sed, commodo nec velit. Aliquam ac nisl quam, quis tincidunt magna. Aenean nec massa elit, non ornare neque. Vestibulum at ipsum sit amet augue euismod consequat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus porttitor gravida massa at cursus. Sed ac viverra risus. 
      </div> 

     </div> <!-- end of div cover --> 
    </div> <!-- end of div myslide --> 

現在,它的工作當u壓制.button1,2等如何自動做到嗎? (autorotate)

+0

我希望有一個循環:) – Heihachi

回答

0

animate函數當前在click事件處理程序中,因此它將在該事件觸發時運行。直接在$(document).ready(function(){之內放置動畫將使文檔準備就緒後運行。

PS:可以縮短

$(document).ready(function(){ 

$(function(){ 
+0

可以ü把我的例子嗎? – Heihachi