I have the following problem with 3 images with the following names and extensions:
f1.jpg
f2.jpg
f3.jpg
I'm doing a slide with JS but the first image and loaded correctly however when I click the next button it fails the next image does not appear follow the code:
o JS:
<script language="javascript">
function preload(){
imgs = Array('f1.jpg','f2.jpg','f3.jpg');
imgQtde = imgs.length;
for(i = 0;1<imgQtde;i++){
var preloadimg = new image();
preloadimg.src = imgs[i];
}
}
function iniciaSlider(){
preload();
max = 3;
min = 1;
fi = 1;
tr=true;
carregafoto("images/slide/f1.jpg");
document.getElementById("moldura").addEventListener("transitionend",fimTr);
}
function fimTr(){
tr = true;
}
function carregafoto(foto){
document.getElementById("moldura").style.backgroundImage = "URL("+foto+")";
}
function prox(){
if(tr){
tr = false;
fi++;
if (fi>max){
fi = min;
}
carregafoto("f"+fi+ ".jpg");
}
}
function ant(){
if(tr){
tr = false;
fi--;
if (fi<min){
fi = max;
}
carregafoto("f"+fi+ ".jpg");
}
}
</script>
HTML:
<input type="button" value="anterior" onclick="ant()" />
<input type="button" value="proximo" onclick="prox()" />
The CSS:
#moldura{
width: 100%;
height: 450px;
background-color: #eee;
transition:background-image 2s;
background-size: 100% 100%;
}
Where I'm wrong I've looked and refined several times but it does not work
#moldura {
width: 100%;
height: 450px;
background-color: #eee;
transition: background-image 2s;
background-size: 100% 100%;
}<!DOCTYPE html>
<head>
<title>DEVDREAM</title>
<meta name="" charset="UFT-8" />
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="js/menu.js"></script>
<script src="js/jquery.js"></script>
<script language="javascript">
function preload() {
imgs = Array('f1.jpg', 'f2.jpg', 'f3.jpg');
imgQtde = imgs.length;
for (i = 0; 1 < imgQtde; i++) {
var preloadimg = new image();
preloadimg.src = imgs[i];
}
}
function iniciaSlider() {
preload();
max = 3;
min = 1;
fi = 1;
tr = true;
carregafoto("images/slide/f1.jpg");
document.getElementById("moldura").addEventListener("transitionend", fimTr);
}
function fimTr() {
tr = true;
}
function carregafoto(foto) {
document.getElementById("moldura").style.backgroundImage = "URL(" + foto + ")";
}
function prox() {
if (tr) {
tr = false;
fi++;
if (fi > max) {
fi = min;
}
carregafoto("f" + fi + ".jpg");
}
}
function ant() {
if (tr) {
tr = false;
fi--;
if (fi < min) {
fi = max;
}
carregafoto("f" + fi + ".jpg");
}
}
</script>
</head>
<body onload="iniciaSlider()">
<header>
<div id="moldura"></div>
<input type="button" value="anterior" onclick="ant()" />
<input type="button" value="proximo" onclick="prox()" />
</header>
</body>
</html>