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

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

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>

источник

2013-12-18 Abu Rayane

Вы только что использовали 'new Array', чтобы создать новый массив ... –

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

(массив 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); 
});

Example HERE jsfiddler

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

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

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

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

источник

2013-12-18 08:47:14 Frogmouth

oh спасибо, это было потрясающе –

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

это идиальный код, я сделаю больше один позже на –

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

ответ

Смежные вопросы