0

First I want to say that I am new in learning jQuery and I am trying to create a slideshow using it.

Here is the jQuery:

$(document).ready(function() {
    $("#Slider li img").click(function() {
        $("").fadeTo('slow',0);
        $('#mainImg').attr('src',$(this).attr('src').replace('thumb/', ''));
    });

    var imgSwap = [];
    $("#Slider li img").each(function() {
        imgUrl = this.src.replace('thumb/', '');
        imgSwap.push(imgUrl);
    });
    $(imgSwap).preload();
});

$.fn.preload = function() {
    this.each( function() { $('<img/>')[0].src = this; }); 
}

And my divs:

<div id="Slider"> 
    <img src="sliderImg/img_1.png" alt="" id="mainImg" />
    <ul>
        <li><img src="sliderImg/thumb/img_1.png" alt="" /></li>
        <li><img src="sliderImg/thumb/img_2.png" alt="" /></li>
        <li><img src="sliderImg/thumb/img_3.png" alt="" /></li>
        <li><img src="sliderImg/thumb/img_4.png" alt="" /></li>
        <li><img src="sliderImg/thumb/img_5.png" alt="" /></li>
        <li><img src="sliderImg/thumb/img_6.png" alt="" /></li>
        <li><img src="sliderImg/thumb/img_7.png" alt="" /></li>
        <li><img src="sliderImg/thumb/img_8.png" alt="" /></li>
        <li><img src="sliderImg/thumb/img_9.png" alt="" /></li>
    </ul>
</div>

What I want to do is to make transitions between the images.
How can I do such a thing? I tried to use the fadeTo() function but I could not succeed.

Thanks for help

4

4 回答 4

0

你$("").fadeTo('slow',0);不能工作，因为你没有针对任何元素。

您可以使用$(this).fadeTo('slow', 0);或任何其他选择器。

于 2013-10-22T17:46:19.260 回答
0

fadeTo 不用于淡化到不同的元素，它用于淡化到一个元素的不同样式。

你可以淡出一个元素，淡入另一个元素来做你想做的事情。

于 2013-10-22T17:46:27.183 回答
0

您需要获取所有图像，并将它们存储在一个数组中。显示第一个。单击显示下一个（在数组中前进一步）并隐藏其余部分时。然后以此类推。其余的只是 CSS。

于 2013-10-22T17:57:00.397 回答
0

其他答案突出了代码中的问题，但您可以考虑使用 JQuery 的幻灯片插件作为编写自己的幻灯片的替代方案。您可能会发现使用插件更容易实现您想要的效果。您可以在此处浏览 JQuery 插件网站上的幻灯片插件：http: //plugins.jquery.com/tag/slideshow/ 还有许多博客列出了 Google 可以找到的“最佳 jquery 幻灯片插件”。

于 2013-10-22T17:57:30.477 回答