1

这是基于被点击的寻呼机的点击不透明度动画功能。

function clickRotate(){

 $('.control-nav-wrapper ul li').click(function() {


 var oCurPhoto = $('#slideshow div.current');
            // i gives the index of the  li clicked.
            var i = $('.control-nav-wrapper ul li').index(this);
            //sets the equivlant index to the div
            var oCurPhotoIndex = $('#slideshow div').eq(i);

我不得不以某种方式删除这些类，以便它们都被设置为单击。

            $( "#slideshow div" ).each(function(){
                $(this).removeClass("previous, clicked");
            });

我试图将当前图像设置为 0，并使用 css 将单击的项目设置为 2 的 z-index，以便它会淡入。

            var oNxtPhoto = oCurPhotoIndex.next();

                if (oNxtPhoto.length == 0)
                    oNxtPhoto = $('#slideshow div:first');

                $(oCurPhoto).animate({opacity:0.0}, 200);

                oCurPhotoIndex.addClass('clicked').css({opacity:1.0},
                        function() {
                            oCurPhotoIndex.removeClass('current');
                 });

这可以作为定时幻灯片放映。

    function rotateImages() {
            var oCurPhoto = $('#slideshow div.current');
            var oNxtPhoto = oCurPhoto.next();
            if (oNxtPhoto.length == 0)
                oNxtPhoto = $('#slideshow div:first');

            oCurPhoto.removeClass('current').addClass('previous');
            oNxtPhoto.css({opacity:0.0}).addClass('current').animate({opacity:1.0}, 200,
                function() {
                    oCurPhoto.removeClass('previous');
                });


 #slideshow {
    position:relative;
    height:300px;
    width:537px;
    overflow: hidden;
    margin: 0 auto;

}

#slideshow div {
    position:absolute;
    top:0;
    left:0;
    z-index:0;
    opacity:.0;
    width: 500px;
    background: green;

}

#slideshow div.current {
    z-index:3;
    opacity: 1.0;
}

这是我试图用于单击项目的 css。

#slideshow div.clicked {
    z-index:2;
    opacity: 1.0;
}

#slideshow div.previous {
    z-index:1;
}

.control-nav-wrapper li{
    cursor: pointer;
}

请帮忙。谢谢你。

4

0 回答 0