最後の画像スライドショーの後に

スライドショーが初めて正常に動作し、3つの画像が正しく表示されますが、画像2が表示されません。私のjqueryコードに問題があると思いますが、このようなスライドショーを作成する簡単な方法があります。最後の画像スライドショーの後に

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>

出典

2016-06-29 Alireza

あなたが任意の要素放置する価値や権利を割り当てるときは、他の自動で行う必要があります。

私はあなたがここでそれを見ることができるスクリプトにいくつかの編集をしました： 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); 
}

出典

2016-06-29 13:02:09

最後の画像スライドショーの後に

答えて

関連する問題