JS如何實現左右滾動輪播代碼詳細點

{imgSrc:"（圖片 ）"},

{imgSrc:"（圖片 ）"},

{imgSrc:"（圖片 ）"},

{imgSrc:"（圖片 ）"},

{imgSrc:"（圖片 ）"},

{imgSrc:"（圖片 ）"}

];

var banner = document.getElementById("banner");

var list = document.getElementById("list");

for(var i = 0,len = datas.length;i<len;i++){

var div = document.createElement("div");

var li = document.createElement("li");

if(i==0){ //默認第壹項輪播項顯示 對應的控制按鈕被選中

div.className = "item active";

li.className = "active";

}else{ //其他項隱藏 其他的控制按鈕樣式不改變

div.className = "item";

li.className = "";

}

div.innerHTML = '<a href="' + datas[i].targetSrc + '">' +

'<img src="' + datas[i].imgSrc + '" />' +

'</a>';

li.innerHTML = i + 1;

banner.appendChild(div);

list.appendChild(li);

}

var lunBo = document.getElementById("lunBo");

var items = document.querySelectorAll("#lunBo #banner .item");

var lis = document.querySelectorAll("#lunBo #list li");

var currentIndex = 0;//(控制按鈕和輪播項***同的索引)

for(var i = 0,len = lis.length;i<len;i++){

lis[i].index = i;

lis[i].onmouseenter = function(){

currentIndex = this.index;

for(var j = 0;j<len;j++){

lis[j].className = "";

items[j].className = "item";

}

this.className = "active";

items[this.index].className = "item active";

}

}

var termId; //全局變量

function autoPlay(){

termId = setInterval(function(){

currentIndex++;

if(currentIndex==lis.length){

currentIndex = 0;

}

lis[currentIndex].onmouseenter();

},3000);

}

autoPlay();//打開頁面自動輪播

//鼠標進入停止輪播

lunBo.onmouseenter = function(){

clearInterval(termId);

}

//鼠標離開繼續輪播

lunBo.onmouseleave = function(){

autoPlay();

}

我這還有其他的，先采納壹下加我，我給妳發