Поверните изображения, а также описание и ссылку

0

Я хотел бы внести некоторые изменения в код и добавить еще несколько параметров:

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>
  • 0
    Вы просто использовали new Array для создания нового массива ...
Теги:
carousel

1 ответ

0

э-э... что-то вроде этого?

(Массив - это ZERO base, поэтому... начальный индекс равен 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);
});

Пример ЗДЕСЬ jsfiddler

Надеюсь, это поможет.

Простая предварительная загрузка изображения:

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

поэтому загружаемое изображение является gif trasparent singol pixel. когда вам нужно предварительно загружать, вам нужно только поместить data-src в src и показать изображение... (сделайте это, когда изображение предыдущей анимации было отображено для предотвращения разрыва загрузки при отображении этого изображения)

  • 0
    о, спасибо, это было круто
  • 0
    это удовольствие ... но есть много способов сделать эту работу ... проверяет ваш лучший! - HTML-CSS-JS мощны, если используются с головой. Веселиться!
Показать ещё 4 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню