Beste,
Ik ben met een site bezig maar ben nu een slideshow aan plaatsen.
Maar ik moet over de plaatjes wat beweegt moet een tekst met een achtergrond plaatje.
Ik krijg het op geen 1 manier wat in me op komt, wat ik normaal zou doen.
Jullie misschien een iedee.
Van nummer 108 tot nummer 120 moet eigelijk bij elke plaatje een ander tekst komen.
Code
<!-- The following codes demostrate jssor slider work independently without any other javascript library. -->
<script type="text/javascript" src="js/jssor.slider-20.min.js"></script>
<!-- use jssor.slider-20.debug.js instead for debug -->
<script>
jssor_1_slider_init = function() {
var jssor_1_options = {
$AutoPlay: true,
$ArrowNavigatorOptions: {
$Class: $JssorArrowNavigator$
},
$BulletNavigatorOptions: {
$Class: $JssorBulletNavigator$
}
};
var jssor_1_slider = new $JssorSlider$("jssor_2", jssor_1_options);
//responsive code begin
//you can remove responsive code if you don't want the slider scales while window resizes
function ScaleSlider() {
var refSize = jssor_1_slider.$Elmt.parentNode.clientWidth;
if (refSize) {
refSize = Math.min(refSize, 980);
jssor_1_slider.$ScaleWidth(refSize);
}
else {
window.setTimeout(ScaleSlider, 30);
}
}
ScaleSlider();
$Jssor$.$AddEvent(window, "load", ScaleSlider);
$Jssor$.$AddEvent(window, "resize", $Jssor$.$WindowResizeFilter(window, ScaleSlider));
$Jssor$.$AddEvent(window, "orientationchange", ScaleSlider);
//responsive code end
};
</script>
<style>
/* jssor slider bullet navigator skin 01 css */
/*
.jssorb01 div (normal)
.jssorb01 div:hover (normal mouseover)
.jssorb01 .av (active)
.jssorb01 .av:hover (active mouseover)
.jssorb01 .dn (mousedown)
*/
.jssorb01 {
position: absolute;
}
.jssorb01 div, .jssorb01 div:hover, .jssorb01 .av {
position: absolute;
/* size of bullet elment */
width: 12px;
height: 12px;
filter: alpha(opacity=70);
opacity: .7;
overflow: hidden;
cursor: pointer;
border: #000 1px solid;
}
.jssorb01 div { background-color: gray; }
.jssorb01 div:hover, .jssorb01 .av:hover { background-color: #d3d3d3; }
.jssorb01 .av { background-color: #fff; }
.jssorb01 .dn, .jssorb01 .dn:hover { background-color: #555555; }
/* jssor slider arrow navigator skin 02 css */
/*
.jssora02l (normal)
.jssora02r (normal)
.jssora02l:hover (normal mouseover)
.jssora02r:hover (normal mouseover)
.jssora02l.jssora02ldn (mousedown)
.jssora02r.jssora02rdn (mousedown)
*/
.jssora02l, .jssora02r {
display: block;
position: absolute;
/* size of arrow element */
width: 55px;
height: 55px;
cursor: pointer;
background: url('images/slideshow/a02.png') no-repeat;
overflow: hidden;
}
.jssora02l { background-position: -3px -33px; }
.jssora02r { background-position: -63px -33px; }
.jssora02l:hover { background-position: -123px -33px; }
.jssora02r:hover { background-position: -183px -33px; }
.jssora02l.jssora02ldn { background-position: -3px -33px; }
.jssora02r.jssora02rdn { background-position: -63px -33px; }
</style>
<div id="jssor_2" style="position: relative; margin: 0 auto; top: 10px; left: 0px; width: 980px; height: 300px; overflow: hidden; visibility: hidden;">
<!-- Loading Screen -->
<div data-u="loading" style="position: absolute; top: 0px; left: 0px;">
<div style="filter: alpha(opacity=70); opacity: 0.7; position: absolute; display: block; top: 0px; left: 0px; width: 100%; height: 100%;"></div>
<div style="position:absolute;display:block;background:url('images/slideshow/loading.gif') no-repeat center center;top:0px;left:0px;width:100%;height:100%;"></div>
</div>
<div data-u="slides" style="cursor: default; position: relative; top: 0px; left: 0px; width: 980px; height: 300px; overflow: hidden;">
<div style="display: none;">
<img data-u="image" src="images/slideshow/001.jpg" />
</div>
<div style="display: none;">
<img data-u="image" src="images/slideshow/002.jpg" />
</div>
<div style="display: none;">
<img data-u="image" src="images/slideshow/003.png" />
</div>
<div style="display: none;">
<img data-u="image" src="images/slideshow/004.png" />
</div>
<div style="display: none;">
<img data-u="image" src="images/slideshow/005.png" />
</div>
</div>
<!-- Bullet Navigator -->
<div data-u="navigator" class="jssorb01" style="bottom:16px;right:10px;">
<div data-u="prototype" style="width:12px;height:12px;"></div>
</div>
<!-- Arrow Navigator -->
<span data-u="arrowleft" class="jssora02l" style="top:123px;left:8px;width:55px;height:55px;" data-autocenter="2"></span>
<span data-u="arrowright" class="jssora02r" style="top:123px;right:8px;width:55px;height:55px;" data-autocenter="2"></span>
</div>
<script>
jssor_1_slider_init();
</script>