Question

我的幻灯片第一次正常工作并正确显示三张图片，但它没有再显示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>

Answer 1

为任何元素分配左侧或右侧的值时，您必须使另一个元素为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);
}

在最后一张图片之后幻灯片显示无效

1 个答案: