Javascript JS-单击缩略图将显示右侧图像

仅在javascript中，没有库，我正在尝试创建一个旋转木马。 我有两项：

主图像和标题的一个div图像和标题在设置超时后逐个动态加载

另一个有缩略图列表的。我想在点击缩略图时显示正确的图像和标题

以下是html：

<div class="slide">
<h2 id="description" class="title">La Slide #0</h2>
<img id="largeImg" class="car" src="images/0.jpg" width="658" height="267" alt="" />
</div>
<ul id="thumbs">
</ul>

以下是我的职责：

// Function to display the images and the captions switching from one to the other
function slideshowAuto() { 
document.querySelector('div.slide').id = 'slide-' + i;
var caption = document.getElementById("description");
caption.innerHTML = data.slides[i].slide_name; 
var img= document.getElementById("largeImg"); 
img.src = data.slides[i].image_src;  

if (i < totalSlides) { 
i++;
}  else  { 
i = 0; 
} 
setTimeout("slideshowAuto()",3000);  
} 

    // Function to display the images and the captions swaping from one to the other
function swapSlide() { 
document.querySelector('div.slide').id = 'slide-' + i;          // add an id on the current slide
var caption = document.getElementById("description"); 
caption.innerHTML = data.slides[i].slide_name; 
var img = document.getElementById("largeImg"); 
img.src = data.slides[i].image_src;

if (i < totalSlides) { 
i++;
}  else  { 
i = 0; 
} 
setTimeout("swapSlide()",50);  
} 

// Function to display all the thumbnails
function displayAllThumbs() {
thumbs = document.getElementById('thumbs');
html = '';
for( i=0 ; i < totalSlides; i++) {
html += '<li><a onclick="swapSlide(slide-' + i + ')"><img src="' + data.slides[i].thumbnail_src + '" alt="' + data.slides[i].slide_name + '" title="' + data.slides[i].slide_name + '" /></a></li>';
}
thumbs.innerHTML = html;
}

我的烦恼：

幻灯片内容显示最后一个变量，而不是第一个变量。 缩略图上的clic不会交换幻灯片内容。 这是我现在的位置

有人可以帮我吗？

首先，您使用了全局i，它由函数preload更改为7，并由函数displayAllThumbs重新更改，因此您遇到了问题1。 Scond，您单击的函数是swapSlide-“+i+”，参数是不存在的变量，而且您的swapSlide不接受参数

更改此选项将解决您的问题：

    function preload(images) {
        if (document.images) { 
            var imageArray = data.slides[i].image_src;
            var imageObjs = [];
            var imageObj = new Image();
            for(var j=0; j <= totalSlides - 1;j ++) {    
                imageObj.src = imageArray[j];
                imageObjs.push(imageObj);
            }
        }
    }

    // Function to display the images and the captions switching from one to the other
    function slideshowAuto() { 
        setSlide(i);

        if (i < totalSlides) { 
            i++;
        }  else  { 
            i = 0; 
        } 
        //document.getElementById('slide').style.webkitTransition = 'opacity 1s';
        setTimeout("slideshowAuto()",3000);  
    } 

    // Function to display the images and the captions swaping from one to the other
    function swapSlide(index) { 
        i=index;  //change the current i
        setSlide(index);
    } 

    // Function to display all the thumbnails
    function displayAllThumbs() {
        thumbs = document.getElementById('thumbs');
        html = '';
        for( var k=0 ; k < totalSlides; k++) {
            html += '<li><a onclick="swapSlide(' + k + ')"><img src="' + data.slides[k].thumbnail_src + '" alt="' + data.slides[k].slide_name + '" title="' + data.slides[k].slide_name + '" /></a></li>';
        }
        thumbs.innerHTML = html;
    }
    function setSlide(index){
            document.querySelector('div.slide').id = 'slide-' +index;           // add an id on the current slide
            var caption = document.getElementById("description"); 
            caption.innerHTML = data.slides[index].slide_name; 
            var img = document.getElementById("largeImg"); 
            img.src = data.slides[index].image_src;

    }

我能被录取吗？

---

我添加了一个新函数以避免重复。

具体帮助是什么？您的代码遇到了什么问题？我在HTML中只看到1个div，没有缩略图，也没有对问题的明确描述。@Meiloo缩略图和左右箭头如何？@RokoC.Buljan缩略图现在工作正常。我需要处理我的右/左箭头，以便它们移动ul以显示所有缩略图。现在，为了更好地总结这一点，我想知道我是否可以改进代码并避免代码重复：var caption=document.getElementByIddescription；caption.innerHTML=data.slides[index]。幻灯片名称；var img=document.getElementByIdlargeImg；img.src=data.slides[index].image\u src；有什么好主意吗？@Meiloo我在下面添加了一个新功能，以避免重复。