旋轉圖片以及說明和鏈接

我想作一個代碼一些改變，並添加一些更多的選擇：旋轉圖片以及說明和鏈接

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

您剛剛使用'新陣列'創建一個新的陣列... –

呃... ...這樣的事情？

（數組爲零，因此...初始索引爲0 [以1開頭爲「Maybach.png」而不是「BMW.png」]）。

「添加效果淡出，而圖像消失」 - 如果圖像消失已經做淡出......你應該解釋這一點...

但是......

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中，然後顯示圖像...（當顯示動畫的上一張圖像時，請執行此操作，以防止此圖像顯示時出現裝入間隙）

來源

2013-12-18 08:47:14 Frogmouth

哦謝謝，這真棒 –

這是一種享受......但有很多方法來完成這項工作......檢查你最好的一個！ - 如果使用head，HTML-CSS-JS功能強大。玩的開心！ – Frogmouth

這是一個itial代碼，我會在 –

旋轉圖片以及說明和鏈接

回答

相關問題