我需要在我的網站上循環瀏覽4個圖像,我不想在網站上添加另一個插件,所以我創建了自己的簡單傳送帶(html,css和js)優化一個簡單的jQuery圖像傳送帶
我的問題是,僅僅從看這段代碼,有沒有一種明顯更簡單/更好的方法來做到這一點?
HTML:
<section id="carousel">
<img src="images/image_00.jpg" width="202" height="162" />
</section>
CSS:
#carousel{text-align:center;position:relative;}
#carousel img{top:0;left:0;z-index:1;position:absolute;}
JS:
function carousel(el, base_url, images, i){
if (i == images.length) i = 0;
var el2 = $(el).clone();
$(el).css('z-index', '1');
el2.css('z-index', '0');
el2.attr('src', base_url + images[i]);
$(el).after(el2);
$(el).fadeOut('slow', function(){
$(this).remove();
});
i++;
var func = function(){return carousel(el, base_url, images, i);};
window.timer = setTimeout(func, 4000);
}
$(document).ready(function(){
carousel('#carousel img:first',
'images/',
['image_00.jpg',
'image_01.jpg',
'image_02.jpg',
'image_03.jpg'],
0);
});
爲什麼不使用CSS圖像的寬度和高度? – 2010-08-21 10:28:33
它只是一個複製粘貼。 無關 – Tombigel 2010-08-21 11:48:02