Question

在图像之间滑动的功能（工作正常：

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

以下代码采用强制转换#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;}

Answer 1

您可以使用swype的回调方法。 Watch here for an example.

window.mySwipe = Swipe(elem, {
  // startSlide: 4,
  auto: 3000,
  callback: function(index, element) {
  var required_id = $(element).attr('id');
  alert(required_id);
   },

});

Answer 2

我明白了，谢谢。

我只需要了解代码所执行的操作比我期望的更多。

将ID结果传递给IF语句

2 个答案: