Question

仅在javascript中，没有图书馆，我正在尝试创建旋转木马。我有2件物品：

主图像和标题的一个div（图像和标题在setTimeOut之后逐个动态加载）
另一个包含缩略图列表的人。我想点击缩略图显示正确的图片和标题。

这是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;
}

我的烦恼：

幻灯片内容显示最后一个变量而不是第一个变量。
缩略图上的陈词滥调不会交换＆＃34;幻灯片＆＃34;内容。

以下是a link我在哪里......

任何人都可以帮助我吗？

Answer 1

首先，您使用的全局i由function preload更改为7并由函数displayAllThumbs更改，因此您遇到了麻烦1。第二，你点击的功能是swapSlide(slide-' + 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;

    }

我可以接受吗？我添加了一个新函数来避免重复。

JS - 单击缩略图将显示正确的图像

1 个答案: