0

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

在此处输入图像描述

你们也可以在这里在线查看：http: //3bum.com

如果画廊宽度大于浏览器窗口，我想每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>
4

1 回答 1

1

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

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

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

或者

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

希望这可以帮助您在已有的基础上继续构建...祝您好运！

于 2013-08-12T04:31:00.570 回答