nach dem letzten Bild Diashow funktioniert nicht

Meine Diashow funktioniert gut in der ersten Zeit und zeigen drei Bilder richtig, aber es zeigt nicht wieder image2.Ich denke, es gibt ein Problem in meinem jquery Code, aber ich kann es nicht finden.Wenn Es gibt eine einfachere Möglichkeit, eine Slideshow wie diese zu erstellen, bitte sag es mir.nach dem letzten Bild Diashow funktioniert nicht

slideswitch(); 
 
var i=2; 
 
function slideswitch() 
 
{ 
 
\t "use strict"; 
 
\t i++; 
 
\t if(i===4){i=1;} 
 
\t if(i===1) 
 
\t { 
 
\t $('#img1').animate({right:'0'}); 
 
\t $('#img3').animate({left:'-100%'}); \t 
 
\t document.getElementById('img2').style.right='-100%'; 
 
\t } 
 
\t else if(i===2) 
 
\t { 
 
\t $('#img2').animate({right:'0'}); 
 
\t $('#img1').animate({left:'-100%'}); 
 
\t document.getElementById('img3').style.right='-100%'; \t 
 
\t } 
 
\t else if(i===3) 
 
\t { 
 
\t $('#img3').animate({right:'0'}); 
 
\t $('#img2').animate({left:'-100%'}); 
 
\t document.getElementById('img1').style.right='-100%'; \t 
 
\t } 
 
\t setTimeout(slideswitch,3000); 
 
}

#img3 
 
{ 
 
\t position:absolute; 
 
\t right:-100%; 
 
\t width:100%; 
 
\t height:100%; 
 
} 
 
#img2 
 
{ 
 
\t position:absolute; 
 
\t right:0; 
 
\t width:100%; 
 
\t height:100%; 
 
} 
 
#img1 
 
{ 
 
\t position:absolute; 
 
\t right:-100%; 
 
\t width:100%; 
 
\t height:100%; 
 
} 
 
.show 
 
{ 
 
\t width:100%; 
 
\t height:500px; 
 
\t position:relative; 
 
\t overflow:hidden; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<meta charset="utf-8"> 
 
<title>SlideShow</title> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
</head> 
 
<body> 
 
<div id="show" class="show"> 
 
<img src="https://www.w3.org/html/logo/downloads/HTML5_Logo_512.png" id="img1"/> 
 
<img src="http://wpguru.co.uk/wp-content/uploads/2013/09/CSS-Logo-214x300.png" id="img2" /> 
 
<img src="http://ric.mclaughlin.today/assets/themes/ricify/images/javascript.png" id="img3"/> 
 
</div> 
 
</body> 
 
</html>

Quelle

2016-06-29 Alireza

Wenn Sie einen Wert nach links oder rechts für jedes Element weisen Sie die anderen machen müssen Auto ist:

Ich habe einige Änderungen an Ihrem Skript Sie es hier sehen: https://jsfiddle.net/n6c7mstn/

slideswitch(); 
var i=2; 
function slideswitch() 
{ 
    "use strict"; 
    i++; 
    if(i===4){i=1;} 
    if(i===1) 
    { 
    $('#img1').animate({right:'0'}); 
    $('#img3').animate({left:'-100%'}); 
    document.getElementById('img2').style.right='-100%'; 
    } 
    else if(i===2) 
    { 
    $('#img2').animate({right:'0'}).css('left','auto'); 
    $('#img1').animate({left:'-100%'}).css('right','auto'); 
    document.getElementById('img3').style.right='-100%';  
    document.getElementById('img3').style.left='auto'; 
    } 
    else if(i===3) 
    { 
    $('#img3').animate({right:'0'}).css('left','auto'); 
    $('#img2').animate({left:'-100%'}).css('right','auto'); 
    document.getElementById('img1').style.right='-100%';  
    document.getElementById('img1').style.left='auto'; 
    } 
    setTimeout(slideswitch,3000); 
}

Quelle

2016-06-29 13:02:09

nach dem letzten Bild Diashow funktioniert nicht

Antwort

Verwandte Themen