JavaScript：单击按钮时加载简单图像
我对JavaScript相当陌生，但不熟悉编程。我的练习是创建一个显示图像的页面，并允许用户通过单击按钮转到下一个/上一个图像。我想在单击按钮时从服务器加载下一个/上一个图像，这样页面就不必一次将所有图像加载到浏览器中 这个版本只有一个按钮可以转到下一个图像，我正在尝试用jQuery或AJAX加载它。页面加载初始的“image0”，JavaScript调试器显示onClick事件执行并执行我预期的操作，但图像没有改变JavaScript：单击按钮时加载简单图像,javascript,image,Javascript,Image,我对JavaScript相当陌生，但不熟悉编程。我的练习是创建一个显示图像的页面，并允许用户通过单击按钮转到下一个/上一个图像。我想在单击按钮时从服务器加载下一个/上一个图像，这样页面就不必一次将所有图像加载到浏览器中 这个版本只有一个按钮可以转到下一个图像，我正在尝试用jQuery或AJAX加载它。页面加载初始的“image0”，JavaScript调试器显示onClick事件执行并执行我预期的操作，但图像没有改变 <html> <head> <script sr
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script>
var imageIndex = 0;
var jpgImageName = "image0"
var loadString = "images/" + jpgImageName + ".JPG";
function changeImage()
{
imageIndex++;
if (imageIndex > 2) { imageIndex = 0; }
var locationString = "images/image" + imageIndex + ".JPG";
var loadString = $("<img />").attr('src', locationString);
$("imageSlot").append(loadString);
}
</script>
</head>
<body>
<div id="imageSlot">
<img id="currentImage" src="images/image0.JPG" height="400" alt="image"+imageIndex/>
</div>
<button id="changeImage" onclick="changeImage()">Change Image</button>
</body>
</html>
var指数=0；
var jpgImageName=“image0”
var loadString=“images/”+jpgImageName+“.JPG”；
函数changeImage（）
{
imageIndex++；
如果（imageIndex>2）{imageIndex=0；}
var locationString=“images/image”+imageIndex+“.JPG”；
var loadString=$（“
改变形象
appendhtml（）append（）.load（）$('img').attr('src', locationString);
$('img').attr('src', locationString);
并删除append（）-行如果要用下一个图像替换当前图像，则可以尝试直接更改当前图像的src：
function changeImage()
{
imageIndex++;
if (imageIndex > 2) { imageIndex = 0; }
var locationString = "images/image" + imageIndex + ".JPG";
$('#currentImage').attr('src', locationString);
}
如果要用下一个图像替换当前图像，则可以尝试直接更改当前图像的src：
function changeImage()
{
imageIndex++;
if (imageIndex > 2) { imageIndex = 0; }
var locationString = "images/image" + imageIndex + ".JPG";
$('#currentImage').attr('src', locationString);
}
为您的函数尝试以下操作：
function changeImage(){
imageIndex++;
imageIndex = imageIndex % 2; //here '2' is the number of images you have (result is always 0 or 1 in this case)
var locationString = "images/image" + imageIndex + ".JPG";
$('#currentImage').attr('src', locationString);//set the 'src' attribute inline
}
为您的函数尝试以下操作：
function changeImage(){
imageIndex++;
imageIndex = imageIndex % 2; //here '2' is the number of images you have (result is always 0 or 1 in this case)
var locationString = "images/image" + imageIndex + ".JPG";
$('#currentImage').attr('src', locationString);//set the 'src' attribute inline
}
循环通常写为
imageIndex=（imageIndex+1）%3；imageIndex=（imageIndex+1）%3；