HTML5的出現，讓Web開發更加輕松和高效。在Web中，輪播圖也是功能日益復雜且使用頻率高的一個模塊。在HTML5中，我們可以使用JS輪播代碼實現輪播圖。

function Carousel(obj){
this.opt = obj;
this.root = $(obj.el);
this.timer = null;
this.items = this.root.find('.item');
this.navItems = this.root.find('.nav-item');
this.len = this.items.length;
this.cur = 0;
this.bindEvent();
}
Carousel.prototype.bindEvent = function(){
var _this = this;
this.navItems.on('click', function(){
var index = $(this).index();
_this.changeTo(index);
});
this.timer = setInterval(function(){
_this.changeTo(_this.cur+1);
}, this.opt.interval);
};
Carousel.prototype.changeTo = function(index){
this.items.eq(this.cur).removeClass('active');
this.navItems.eq(this.cur).removeClass('active');
this.cur = (index+this.len)%this.len;
this.items.eq(this.cur).addClass('active');
this.navItems.eq(this.cur).addClass('active');
};
var carousel = new Carousel({
el: '#carousel',
interval: 3000
});

這里我們定義了一個Carousel的構造函數，它的參數是一個對象，對象里包含一個元素el和一個間隔interval。這個函數綁定了點擊事件和自動輪播事件，以及切換輪播圖的函數changeTo。同時，我們在頁面中添加了.item和.nav-item兩個類名，分別為每張輪播圖和輪播圖對應的小點添加樣式。

隨著HTML5的逐漸完善，JS輪播代碼的實現方法也會發生變化。但這個簡單的JS輪播代碼在現在仍然可以實現輪播圖的基本功能。同時，我們也可以在這個基礎上更加靈活地進行二次開發，實現更多有趣的效果。