Hallo allemaal,
ik heb in javascript een slider gemaakt, maar er zitten nog wat problemen aan.
Over het algemeen doet hij het goed, maar soms flikkert ie, draait door, schiet terug, etc.
Ik weet niet waar de fout zit.
Ik hoop dat jullie me kunnen helpen.
Alvast Bedankt
MySQL
ik heb in javascript een slider gemaakt, maar er zitten nog wat problemen aan.
HTML:
<!DOCTYPE HTML>
<html>
<meta charset="utf-8">
<style>
#slider_sliders div{
position:relative;
float:left;
}
a.control_prev,a.control_next{
position:absolute;
top:40%;
z-index:500;
color:rgba(255,255,255,0);
text-decoration:none;
cursor:pointer;
height:60px;
width:40px;
text-align:center;
line-height:60px;
}
#slider:hover a.control_prev,#slider:hover a.control_next{
background:gray;
opacity:0.5;
color:white;
}
a.control_next{
right:0;
}
</style>
<div id="slider" style="position:relative;overflow:hidden;border:1px solid black;height:300px;">
<a href="#" class="control_prev" onClick="slider_back_click();"><</a>
<a href="#" class="control_next" onClick="slider_next_click();">></a>
<div id="slider_sliders" style="padding:0;position:relative;height:100%;">
<div style="background:red;">A</div>
<div style="background:green;">B</div>
<div style="background:blue;">C</div>
<div style="background:yellow;">D</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
var a;
var b;
var c;
var e = $('#slider_sliders').children();
var f = e.length;
for(var i=0;i<e.length;i++){
e[i].style.height = '100%';
e[i].style.width = '100%';
e[i].style.height = e[i].clientHeight+'px';
e[i].style.width = e[i].clientWidth+'px';
}
var g = e[0].clientWidth;
var strip = f * g;
var interval = setInterval(function(){
slider_next();
},5000);
slider_time = 5000;
function slider_back_click(){
clearTimeout(interval);
slider_back();
interval = setTimeout(function(){slider_next();},slider_time);
}
function slider_next_click(){
clearTimeout(interval);
slider_next();
interval = setTimeout(function(){slider_next();},slider_time);
}
function slider_back(){
a = document.getElementById('slider_sliders');
b = $(a);
c = b.children()[b.children().length-1];
a.style.left= -g+'px';
b.prepend(c);
b.animate({left:0},a.clientWidth/1.5,function(){});
}
function slider_next(){
a = document.getElementById('slider_sliders');
b = $(a);
c = b.children()[0];
b.animate({left:-g},a.clientWidth/1.5,function(){a.style.left='';});
setTimeout(function(){b.append(c);},a.clientWidth);
clearTimeout(interval);
interval = setTimeout(function(){slider_next();},slider_time);
}
document.getElementById('slider_sliders').style.width = strip+'px';
</script>Over het algemeen doet hij het goed, maar soms flikkert ie, draait door, schiet terug, etc.
Ik weet niet waar de fout zit.
Ik hoop dat jullie me kunnen helpen.
Alvast Bedankt
MySQL
