jQuery插件-图像库（淡入/淡出）

我有一个图像库水平集中的内联列表，但有时此库的宽度可能大于浏览器窗口，因此某些图像将不可见

你们也可以在这里在线查看：

如果图库宽度大于浏览器窗口，我希望每3秒淡出一个用户可以看到的图像，然后淡入，同时淡出一个他看不到的图像，避免替换同一图像，只有在替换所有其他图像后，并在鼠标位于图库上方时停止

我不是javascript专家，所以我现在做的是：我可以切换两个随机图像，但首先我淡出一个，而不是淡入另一个，它不会同时淡出和淡入，也不会检查图像是否已经可见。如果鼠标在上面，则停止淡入/淡出

插件：

$.fn.fader = function ()
{
    var gallery = $(this),
        images = [];

    gallery.css(
        {
            marginLeft: '-' + (this.width() / 2) + 'px',
            visibility: 'visible'
        }).find('a').each(function ()
        {
            images.push($(this));
        });

    var fade = setInterval(function ()
    {
        fadeImages();
    }, 5000);

    var fadeImages = function ()
    {
        images.sort(function ()
        {
            return 0.5 - Math.random()
        });

        imagesToFade = images.slice(0, 2);

        var temporarySrc = imagesToFade[0].find('img').attr('src'),
            temporaryHref = imagesToFade[0].attr('href');

        switchImages(imagesToFade[0], imagesToFade[1].find('img').attr('src'));
        switchImages(imagesToFade[1], temporarySrc);

        switchLinks(imagesToFade[0], imagesToFade[1].attr('href'));
        switchLinks(imagesToFade[1], temporaryHref);
    }

    var switchImages = function (oldImage, newImage)
    {
        oldImage.find('img').animate(
            {
                opacity: 0.0
            }, 1000, function ()
            {
                oldImage.find('img').attr('src', newImage).animate(
                    {
                        opacity: 0.6
                    }, 1000);
            });
    }

    var switchLinks = function (oldImage, newImage)
    {
        oldImage.attr('href', newImage);
    }

    gallery.mouseover(function ()
    {
        clearInterval(fade);
    }).mouseout(function ()
        {
            fade = setInterval(function ()
            {
                fadeImages();
            }, 5000);
        })


};

html：

<section class="portfolio">
    <ul>
        <li>
            <a class="fancybox" rel="portfolio" href="http://farm9.staticflickr.com/8199/8220132885_9e693356e9_b.jpg">
                <img src="http://farm9.staticflickr.com/8199/8220132885_9e693356e9_m.jpg">
            </a>
        </li>
        <li>
            <a class="fancybox" rel="portfolio" href="http://farm9.staticflickr.com/8481/8215602321_69d9939b8b_b.jpg">
                <img src="http://farm9.staticflickr.com/8481/8215602321_69d9939b8b_m.jpg">
            </a>
        </li>
        <li>
            <a class="fancybox" rel="portfolio" href="http://farm9.staticflickr.com/8200/8220393833_e52cabfe80_b.jpg">
                <img src="http://farm9.staticflickr.com/8200/8220393833_e52cabfe80_m.jpg">
            </a>
        </li>
        <li>
            <a class="fancybox" rel="portfolio" href="http://farm9.staticflickr.com/8200/8207750975_bd288a2a1f_b.jpg">
                <img src="http://farm9.staticflickr.com/8200/8207750975_bd288a2a1f_m.jpg">
            </a>
        </li>
        <li>
            <a class="fancybox" rel="portfolio" href="http://farm9.staticflickr.com/8522/8478415115_152c6f5e55_b.jpg">
                <img src="http://farm9.staticflickr.com/8522/8478415115_152c6f5e55_m.jpg">
            </a>
        </li>
        <li>
            <a class="fancybox" rel="portfolio" href="http://farm9.staticflickr.com/8366/8483546751_86494ae914_b.jpg">
                <img src="http://farm9.staticflickr.com/8366/8483546751_86494ae914_m.jpg">
            </a>
        </li>
        <li>
            <a class="fancybox" rel="portfolio" href="http://farm9.staticflickr.com/8507/8454547519_f8116520e1_b.jpg">
                <img src="http://farm9.staticflickr.com/8507/8454547519_f8116520e1_m.jpg">
            </a>
        </li>
        <li>
            <a class="fancybox" rel="portfolio" href="http://farm8.staticflickr.com/7152/6394238505_c94fdd1d89_b.jpg">
                <img src="http://farm8.staticflickr.com/7152/6394238505_c94fdd1d89_m.jpg">
            </a>
        </li>
    </ul>
</section>

仅供参考，您的网站尚未公开，该链接只是将我们发送到一个godaddy.com页面

有一件事可能会有所帮助，您可以使查询选择器特定于可见或隐藏的元素，例如：

$("img:hidden").show();

或

希望这能帮助你在已有的基础上继续发展…祝你好运

$("img:visible").hide()