js实现左右滚动轮播代码

代码：

var datas = [
{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();
}

 

 

文转来自：源码在线https://www.shengli.me/javascript/21.html