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 に答える