Question

我有一个内嵌列表，图像库水平集中，但有时这个图库的宽度可能比浏览器窗口大，所以有些图像不可见。

enter image description here

你们也可以在网上查看：http://3bum.com

如果图库宽度大于浏览器窗口，我希望每隔3秒淡出用户可以看到并淡入的图像，同时和地点，图像他 cant 看，避免替换相同的图片，只有在替换所有其他图像后，并在鼠标位于图库上时停止。

我不是一个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>

Answer 1

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

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

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

或

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

希望能帮助你继续建立你已经拥有的东西......祝你好运！

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

1 个答案: