-2

画像間をスワイプする機能 (正常に動作します:

    <div id='mySwipe' style='width:720px; height:981px; margin-top:55px;' class='swipe'>
      <div class='swipe-wrap'>
        <div><a id="cast1" onClick="change('cast1'); return false" href="#"><img src="../slider/alexis-slider.png" /></a></div>
        <div><a id="cast2" onClick="change('cast2'); return false" href="#"><img src="../slider/joanna-slider.png" /></a></div>
        <div><a id="cast3" onClick="change('cast3'); return false" href="#"><img src="../slider/adriana-slider.png" /></a></div>
        <div><a id="cast4" onClick="change('cast4'); return false" href="#"><img src="../slider/melissa-slider.png" /></a></div>
      </div>
    </div>
<script>
// pure JS
    var elem = document.getElementById('mySwipe');
    window.mySwipe = Swipe(elem, {
    });
</script>

この次のコードは、cast# id を受け取り、それに特定のクラスを与えるため、表示する画像を認識します (画像は CSS で識別されます)。

<script type="text/javascript" language="Javascript/1.2">
    function change(v) {
    var target = document.getElementById("target");

         if (v == "cast1") {target.className = "imgA";} 
    else if (v == "cast2") {target.className = "imgB";} 
    else if (v == "cast3") {target.className = "imgC";} 
    else if (v == "cast4") {target.className = "imgD";} 

    else {target.className = "bio";}
}

function changeReset() {
    var target = document.getElementById("target");
    target.className = "bio";
}

// pure JS
    var elem = document.getElementById('mySwipe');
    window.mySwipe = Swipe(elem, {
    });
</script>

これらの両方のコード スニペットは個別に正常に動作しますが、スワイプ コード (cast1、2、3、または 4) からの ID の結果を if ステートメントに渡す方法がわかりません。誰かが私を助けてくれませんか、私はこれにほぼ2週間取り組んでいます。簡単だと思いますが、JavaScriptが苦手です。

CSSは次のとおりです。

.swipe {overflow: hidden; visibility: hidden; position: relative;}
.swipe-wrap {overflow: hidden; position: relative;}
.swipe-wrap > div {float:left; width:100%; position: relative;}
#mySwipe div b {display:block; margin:0px; margin-top:240px; background:url(""); height:1280px; width:720px;}
#inner {background: url("../bio_footer/alexis-bio.png") no-repeat 0 0; height:440px; width:800px;}
#target {background: url("") no-repeat 0 0; height:440px; width:800px;}
.bio {height:440px; width:800px;}
.imgA{background: url("../bio_footer/alexis-bio.png") no-repeat 0 0; height:440px; width:800px;} 
.imgB{background: url("../bio_footer/joanna-bio.png") no-repeat 0 0; height:440px; width:800px;} 
.imgC{background: url("../bio_footer/adriana-bio.png") no-repeat 0 0; height:440px; width:800px;} 
.imgD{background: url("../bio_footer/melissa-bio.png") no-repeat 0 0; height:440px; width:800px;}

.container {bottom:106px ;display:none ;position:absolute;} 
4

2 に答える 2