Question

我希望有一个横幅可以旋转图像（有效）但是如果单击下面的链接，我无法弄清楚如何让它去某个图像...一旦图像显示我希望它继续进行旋转。我正在使用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>

Answer 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：图像推子上点击不透明度变化

1 个答案: