滑块内的动态图像

时间:2013-09-13 00:21:38

标签: javascript jquery html css

我有两个div类'容器'和'内部',内部显示/隐藏从div底部向上滑动的单个图像。当我尝试让'inner'div显示if语句中的图像而不是css中标识的图像时,就会出现问题。有人可以告诉我我的代码错误的地方。

<style>
body {margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px;}
.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;}

.container {bottom:106px ;display:none ;position:absolute;}
.inner {background_image:url(); height:440px; width:800px;}

.brand1{background-image:url(apple_name.png); background-repeat:no-repeat; height:360px; width:360px;} 
.brand2{background-image:url(windows_name.png); background-repeat:no-repeat; height:360px; width:360px;} 
.brand3{background-image:url(android_name.png); background-repeat:no-repeat; height:360px; width:360px;} 
</style>


<script>
        function change(v) {
    var target = document.getElementById("mySwipe");

         if (v == "imgA") {target.className = "brand1";}
    else if (v == "imgB") {target.className = "brand2";}
    else if (v == "imgC") {target.className = "brand3";}
    else {target.className = "inner";}
}

function changeReset() {
    var target = document.getElementById("container");
    target.className = "inner";
}
</script>

<div id='mySwipe' style='width:720px; height:981px; margin-top:55px;' class='swipe'>
  <div class='swipe-wrap'>
    <div><a id="imgB" href="#"><img src="apple.jpg" /></a></div>
    <div><a id="imgB" href="#"><img src="windows.jpg" /></a></div>
    <div><a id="imgC" href="#"><img src="android.jpg" /></a></div>
  </div>
</div>

<script>

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

});

</script>

<div class='container'>
<div class='inner'>
</div>
</div>

这是小提琴:http://jsfiddle.net/ubfmT/

0 个答案:

没有答案