画像間をスワイプする機能 (正常に動作します:
<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;}