{imgSrc:"（图片 ）"},
{imgSrc:"（图片 ）"},
{imgSrc:"（图片 ）"},
{imgSrc:"（图片 ）"},
{imgSrc:"（图片 ）"},
{imgSrc:"（图片 ）"}
]
var banner = document.getElementById("banner")
var list = document.getElementById("list")
for(var i = 0,len = datas.lengthi<leni++){
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.lengthi<leni++){
lis[i].index = i
lis[i].onmouseenter = function(){
currentIndex = this.index
for(var j = 0j<lenj++){
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()
}
我这还有其他的，先采纳一下加我，我给你发
我们在 CSS 阶段就已经接触到轮播图。通过轮播图我们可以达到一些好玩的特效，但使用 CSS 做出来的轮播图只有左右切换，渐变切换和简单的点击切换。局限性较大，观看效果也不佳。但当我们接触 js 之后，你就发现使用js来实现轮播图后，在看CSS实现轮播的效果就是...。我想说啥你知道的。废话不多说，咱们一起看看如何使用js来实现轮播效果。
（本文以阴阳师中“平安世界”模块的轮播图为例）
这个轮播图，我们通过两大模块构成；左右点击模块和姓名点击模块。然后在两者相关联来达到最终的效果。
在使用js实现轮播图的效果前，先使用HTML和CSS完善这一模块的布局。
本轮播图使用8张图片。每次出现两张。我们在使用HTML和CSS布局时可以先把第一组的两张图片放好位置。其他的放在两边隐藏起来。需要使用的时候在出现移动到中间。
左右点击切换模块：
我们通过对左右按钮进行点击监听。在点击后做出反应。左右点击的思路一样。我们先说一下右边按钮点击事件。
当我们点击右边按钮后，我们通过对点击次数进行累计。此处我使用初始化常量然后累加最后通过判断来达到循环效果
对每一张图片进行编码，以此来达到循环切换图片的效果。在切换图片时，我们可以使用排他思想。当点击按钮切换下一张图片的时候，我们可以先遍历所有的图片，把所有的图片移动到两边，然后将要移动的图片移动到中央来达到切换效果
在移动的过程中的动画和定时器设置的延迟可以自己添加一下。
左边按钮的原理和右边一样反操作即可。注意常量要使用一个。否则两个按钮都只能单方向运动，可能还会出现其他问题。
本次现讲一下左右切换的思路。
