jQuery：单击不透明度更改的图像推子答案

【问题标题】：jQuery: Image fader with on click opacity changejQuery：单击不透明度更改的图像推子
【发布时间】：2013-02-26 23:09:19
【问题描述】：

我希望有一个横幅来旋转图像（有效）但是如果点击下面的链接，我无法弄清楚如何让它转到某个图像......一旦图像显示我希望它继续旋转。我正在使用 Opacity 使图像褪色并且效果很好，所以我只需要弄清楚如何让.click 函数以我认为的方式工作。也许使用索引号？

这是我的代码：

<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>

【问题讨论】：

标签： jquery css click jquery-animate opacity

【解决方案1】：

$('.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/ 并为上面和旋转之间的公共代码制作一个公共函数。

【讨论】：

我是否需要为每个函数添加一个新函数，或者是否有更简单的方法使用索引号？我是 jQuery 新手，虽然我确定有办法做到这一点，但我不确定如何。