2013-03-11 75 views
0

我期待有一個橫幅通過圖像旋轉(工作),但我不能工作如何讓它去一個特定的圖像,如果下面的鏈接點擊...一旦圖像顯示我希望它繼續進行旋轉。我使用的不透明度使圖像褪色,它運作良好,所以我只需要弄清楚如何讓.click函數以某種方式工作,我認爲。也許使用索引號碼?jQuery:與點擊不透明度變化的圖像推子

這是我的代碼:

<style type="text/css"> 

#images{ 
    position:relative; 
    display:block; 
    height: 450px; 
} 
#images img{ 
    position:absolute; 
} 
img.current{ 
    z-index:100; 

} 
img.next{ 
    z-index:99; 
} 
</style> 

<script language="javascript" type="text/javascript" src="js/jquery-1.4.2.js" ></script> 
<script language="javascript" type="text/javascript"> 

$("document").ready(// Start JQ 
    function(){ 
    var timing=3000 ; 
    var currentImg ; 
    var nextImg ; 
    setInterval(rotateImages,timing); 

    function rotateImages(){ 

     currentImg=$(".current"); 
     nextImg=currentImg.next() ; 

     if(nextImg.length==0){ 
      nextImg=$("#images img:first") ; 
     } 

     currentImg.removeClass("current").addClass("next") ; 

     nextImg.addClass("current").css({opacity:0}) 
      .animate({opacity:1},timing/2,function(){ 
       currentImg.removeClass("next") ; 
      }); 
     } 

}); // End JQ 
</script> 

</head> 

<body > 
    <div id="images"> 
     <img src="images/jpg/image1.jpg" alt="image1" class="current"/> 
     <img src="images/jpg/image2.jpg" alt="image2" /> 
     <img src="images/jpg/image3.jpg" alt="image3" /> 
     <img src="images/jpg/image4.jpg" alt="image4" /> 
    </div> 
    <div class="click"> 
     <a id="1">Image 1</a> 
     <a id="2">Image 2</a> 
     <a id="3">Image 3</a> 
     <a id="4">Image 4</a> 
    </div> 

回答

0
$('.click a').click(new function(){ 

    currentImg=$(".current"); 
    nextImgid=this.id ; 


     nextImg=$("#images img:("+nextImgid+")") ; 


currentImg.removeClass("current").addClass("next") ; 

nextImg.addClass("current").css({opacity:0}).animate({opacity:1},timing/2,function(  ){currentImg.removeClass("next") ; 
    }); 
    }); 

閱讀http://api.jquery.com/click/ 做出以上和旋轉之間的公共代碼的共同作用。

+0

我需要爲每一個新的功能還是有更容易的方法使用索引號碼?我是jQuery的新手,雖然我確信有一種方法可以做到,但我不知道如何。 – Hannah 2013-03-21 10:01:55

相關問題