我的幻灯片第一次运行正常，正确显示了三张图片，但它不再显示 image2。我认为我的 jquery 代码有问题，但我找不到它。如果有更简单的方法创建这样的幻灯片请告诉我。
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'});
$('#img1').animate({left:'-100%'});
document.getElementById('img3').style.right='-100%';
}
else if(i===3)
{
$('#img3').animate({right:'0'});
$('#img2').animate({left:'-100%'});
document.getElementById('img1').style.right='-100%';
}
setTimeout(slideswitch,3000);
}#img3
{
position:absolute;
right:-100%;
width:100%;
height:100%;
}
#img2
{
position:absolute;
right:0;
width:100%;
height:100%;
}
#img1
{
position:absolute;
right:-100%;
width:100%;
height:100%;
}
.show
{
width:100%;
height:500px;
position:relative;
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>最佳答案
当你为任何元素赋值给 left 或 right 时，你必须让另一个元素为 auto :
我对您的脚本进行了一些编辑，您可以在此处查看: 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);
}
关于javascript - 最后一张图片幻灯片不起作用后，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38100177/