Question

首先，我想说我是学习jQuery的新手，我正在尝试使用它创建幻灯片。

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

我的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>

我想要做的是在图像之间进行转换我该怎么办？我尝试使用fadeTo()函数但我无法成功。

感谢您的帮助

Answer 1

您的$("").fadeTo('slow',0);无效，因为您没有定位任何元素。

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

Answer 2

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

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

Answer 3

您需要获取所有图像，并将它们存储在数组中。显示第一个。单击显示下一个时（在数组中单步执行）并隐藏其余的。然后呢。其余的只是CSS。

Answer 4

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

jQuery fadeTo - 如何使用

4 个答案: