Question

我想对代码进行一些更改并添加更多选项：

1-旋转图像，并附上每个图像的描述以及链接， 2-在图像消失时添加效果fadeOut。

这是我的小代码：

var images = new Array ('BMW.png', 'Maybach.png', 'Mercedes-Benz.png', 'Mini.png', 'Jaguar.png', 'Toyota.png');
var descs = new Array ('BMW', 'Maybach', 'Mercedes-Benz', 'Mini', 'Jaguar', 'Toyota');
var links = new Array ('www.url1.com', 'www.url2.com', 'www.url3.com', 'www.url4.com', 'www.url5.com', 'www.url6.com');
var index = 1;

function rotateImage()
{
    $('#myImage').fadeOut('fast', function()
    {
        $(this).attr('src', images[index]);

        $(this).fadeIn(2000, function()
        {
            if (index == images.length-1)
            {
                index = 0;
            }
            else
            {
                index++;
            }
        });
    });
}

$(document).ready(function()
{
    setInterval (rotateImage, 7000);
});
</script>
</head>
<body>
<div id="test">
    <a href="www.url1.com">
        <img class="rotate" id="myImage" src="BMW.png" width="800" height="300" alt="image test" />
    </a>
    <div class="rotate" id="myDesc" style="margin-top: -30px; margin-left: 30px;"></div>
</div>

Answer 1

呃...这样的事情？

（数组是ZERO基础所以...初始索引是0 [1，你以“Maybach.png”开头而不是“BMW.png”]。）

“在图像消失时添加效果fadeOut” - 如果图像消失已经消失了......你应该解释这一点......

...然而

var images = ['http://placehold.it/150x100', 'http://placehold.it/120x150', 'http://placehold.it/90x120', 'http://placehold.it/100x100', 'http://placehold.it/100x150', 'http://placehold.it/150x100'],
descs = ['BMW', 'Maybach', 'Mercedes-Benz', 'Mini', 'Jaguar', 'Toyota'],
links = ['www.url1.com', 'www.url2.com', 'www.url3.com', 'www.url4.com', 'www.url5.com', 'www.url6.com'],
index = 0; //start from first image
function rotateImage()
{
    $('#test').fadeOut('fast', function() //fadeout all block (if display none collapse your graphics use animate and "opacity") to hide without change display
    {
        $(this).find("a").attr('href', links[index]); //add href to url
        $(this).find("img").attr('src', images[index]); //add src to image
        $(this).find("#myDesc").text(descs[index]); //add description in desc div
        $(this).delay(500).fadeIn(2000, function() //delay (a little bit) to wait image load (for bigger image you need longer delay)
        {
            if (index == images.length-1)
            {
                index = 0;
            }
            else
            {
                index++;
            }
        });
    });
}

$(document).ready(function()
{
    rotateImage(); //fire first time and then use Setinterval for loop
    setInterval (rotateImage, 7000);
});

Example HERE jsfiddler

我希望这可以提供帮助。

简单图像预加载：

<img src="path/placeholder.gif" data-src="path/realImage.jpg" style="display:none" />

所以加载的图像是一个trasparent singol像素的gif。当您需要预加载时，只需要在data-src中放置src而不是显示图像...（在显示动画的上一张图像时执行此操作，以防止此图像显示时的负载间隙）

旋转图像以及描述和链接

1 个答案: