4

我正在尝试制作自己的“幻灯片”类型的 jquery 效果。我已经搞砸了很长一段时间，似乎只是在绕圈子。所以希望你们中的一个人能看到我所缺少的。

Javascript/jQuery 代码：

    <script type="text/javascript">
    $(document).ready(function(){
        $("body").css("display", "none");
        $("body").fadeIn(500);
        $('.slideDeactive').click(changeSlide);
    });

    function changeSlide(){
        $('.slideActive').addClass('slideDeactive').removeClass('slideActive');
        $(this.id).addClass('slideActive').removeClass('slideDeactive');
        $('.slideDeactive').click(changeSlide);
    }//end changeSlide
</script>

HTML 代码：

<body>
<div id="slideShow">
    <div id="slideShowItem0" class="slideActive">
        ITEM 0
    </div>
    <div id="slideShowItem1" class="slideDeactive">
        ITEM 1
    </div>
    <div id="slideShowItem2" class="slideDeactive">
        ITEM 2
    </div>
</div>

CSS代码：

#slideShow{
float: left;
border: solid white 2px;
width: 700px;
height: 200px;
}

#slideShowItem0, #slideShowItem1, #slideShowItem2{
position: relative;
width: 350px;
height: 100%;
}

.slideActive{
z-index: 1;
position: absolute;
left: 25%;
top: 0;

background-color: grey;
}

.slideDeactive{
background-color: fuchsia;

z-index: 0;
float: left;
top: -100%;

cursor: pointer;

/*Opacity compatible for all major browsers*/
filter: alpha(opacity=25);
-moz-opacity:0.25;
-khtml-opacity: 0.25;
opacity: 0.25;
}

我想我的 slideActive 类也可能有错误，因为如果幻灯片在右侧，那么我认为它可能需要与左侧不同的左侧值。

让我知道你们的想法，提前感谢您的帮助！

4

2 回答 2

3

尝试这个

$(document).ready(function(){
    $('.slideDeactive').live('click', function()
    {
        $('.slideActive').removeClass('slideActive').addClass('slideDeactive');
        $(this).addClass('slideActive').removeClass('slideDeactive');
    });
})

代替

$('.slideDeactive').click(changeSlide);

和

function changeSlide(){
        $('.slideActive').addClass('slideDeactive').removeClass('slideActive');
        $(this.id).addClass('slideActive').removeClass('slideDeactive');
        $('.slideDeactive').click(changeSlide);
    }//end changeSlide

这将获得主动和非主动的效果。

于 2012-04-21T09:26:40.873 回答
0

幻灯片 jquery/css 代码的最终解决方案：

HTML 代码：

<body>
<div id="slideShow">
    <div class="slideCenter">
        ITEM 0
    </div>
    <div class="slideLeft">
        ITEM 1
    </div>
    <div class="slideRight">
        ITEM 2
    </div>
</div>
</body>

jQuery代码：

    <script type="text/javascript">
    $(document).ready(function(){
        $("body").css("display", "none");
        $("body").fadeIn(500);

        $('.slideLeft').live('click', function(){
            $('.slideCenter').removeClass('slideCenter').addClass('slideLeft');
            $(this).addClass('slideCenter').removeClass('slideLeft');
        });

        $('.slideRight').live('click', function(){
            $('.slideCenter').removeClass('slideCenter').addClass('slideRight');
            $(this).addClass('slideCenter').removeClass('slideRight');
        });

    });
</script>

CSS 代码：

#slideShow{
float: left;
border: solid white 2px;
width: 700px;
height: 200px;

margin-top: 200px;
}

.slideCenter{
z-index: 1;
position: absolute;
margin-left: 175px;
width: 350px;
height: 200px;
float: left;

background-color: grey;
}

.slideLeft{
z-index: 0;
background-color: fuchsia;
float: left;
cursor: pointer;
width: 350px;
height: 200px;

/*Opacity compatible for all major browsers*/
filter: alpha(opacity=25);
-moz-opacity:0.25;
-khtml-opacity: 0.25;
opacity: 0.25;
}

.slideRight{
z-index: 0;
background-color: yellow;
float: right;
cursor: pointer;
width: 350px;
height: 200px;

/*Opacity compatible for all major browsers*/
filter: alpha(opacity=25);
-moz-opacity:0.25;
-khtml-opacity: 0.25;
opacity: 0.25;
}

非常感谢比宾的帮助！

于 2012-04-22T03:22:16.887 回答