用原生JS写的轮播效果，怎么让它有滑动的效果，不是直接切换

JavaScript017

用原生JS写的轮播效果，怎么让它有滑动的效果，不是直接切换,第1张

如果是朝左翻页，就把当前页朝左偏移100%的宽度，让下一页同样朝左偏移100%宽度。以下是代码部分：

<html><head lang="en"><meta charset="UTF-8"><title></title><style>.banner{ width:300pxheight:250pxposition: relativez-index: 100background: skybluemargin:100px autooverflow:hidden } .banner .first{ left:0} .banner a{ width: 100%height: 100%position: absolutedisplay:blocktop:0left:100%} .banner a img{ width: 100%height: 100%} .banner .pre{ position: absoluteleft:0top:120pxbackground: graywidth:30pxheight:30pxborder-radius: 30pxline-height: 30pxtext-align: centeropacity: 0.4z-index: 1000cursor: pointer} .banner .next{ position: absoluteright:0top:120pxbackground: graywidth:30pxheight:30pxborder-radius: 30pxline-height: 30pxtext-align: centeropacity: 0.4z-index: 1000cursor: pointer} .

var datas = [

{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()

}

我这还有其他的，先采纳一下加我，我给你发