dynamic images within slider
I have two div class 'container' and 'inner', inner show/hide a single
image that slides up from the bottom of the div. The issue comes when I
try to have the 'inner' div display an image from an if statement rather
than the image identified in the css. Can someone please show me where my
code is wrong.
<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(../bio_/slider1-bio.png); height:440px;
width:800px;}
.plr1{background-image:url(../bio_/slider1-bio.png);
background-repeat:no-repeat; height:440px; width:800px;}
.plr2 {background-image:url(../bio_/slider2-bio.png);
background-repeat:no-repeat; height:440px; width:800px;}
.plr3 {background-image:url(../bio_/slider3-bio.png);
background-repeat:no-repeat; height:440px; width:800px;}
</style>
<script>
function change(v) {
var target = document.getElementById("mySwipe");
if (v == "imgA") {target.className = "plr1";}
else if (v == "imgB") {target.className = "plr2";}
else if (v == "imgC") {target.className = "plr3";}
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="../slider/slider1.png" /></a></div>
<div><a id="imgB" href="#"><img src="../slider/slider2.png" /></a></div>
<div><a id="imgC" href="#"><img src="../slider/slider3.png" /></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>
No comments:
Post a Comment