jqueryスライドショーのクラスの変更が正しく動作していません

jqueryエフェクトの独自の「スライドショー」タイプを作成しようとしています。私はかなり長い間このことをぶち壊していて、ただ円に入っているようだ。だからうまくいけばあなたのうちの一人が私が見逃しているものを見ることができる。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クラスでスライドが右にある場合、それは左にある場合とは異なる左の値を必要とする可能性があるので、私は思う。

皆さんのご意見を事前にお聞かせください。

出典

2012-04-21 Justin Lathrop

これは、アクティブおよび非アクティブの効果が得られます代わりに

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

と

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

のこの

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

を試してみてください。スライドショーのjQuery/CSSコード用

出典

2012-04-21 09:26:40

私の問題の大部分を解決し、解決してくれてありがとう、私はコードを修正して、スライドショーを動作させました。だから私は完全閉鎖のための完全な解決策を投稿するつもりです。 @BibinVelayudhanあなたの助けをありがとう！ –

最終的な解決策：

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-22 03:22:16

私の喜びjustin .. :) –

jqueryスライドショーのクラスの変更が正しく動作していません

答えて

関連する問題