jQuery幻灯片类切换不正确。

Question

jQuery幻灯片类切换不正确。

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类可能有错误，因为如果幻灯片在右边，则其左侧值可能与在左边时不同。请告诉我你们的想法，提前感谢你们的帮助！

- Justin Lathrop

2个回答

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

非常感谢Bibin的帮助！

- Justin Lathrop

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Bibin Velayudhan · Accepted Answer

试试这个

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

这将产生激活和停用的效果。