{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()
}
我这还有其他的，先采纳一下加我，我给你发
在你原来的代码上进行了修改，加粗倾斜的部分是添加或者修改的位置
<script>
var timer1 = null
var el = null
var left = 1
function moveItRight() {
if (parseInt(el.style.left) >(screen.width - 50)) //el.style.left = 0
{
left = -1
}
else if (parseInt(el.style.left) <= 0) {
left = 1
}
el.style.left = parseInt(el.style.left) + 2 * left + 'px'//本题目最关键的一句代码，让el对象的左边距每次循环都增加2像素，也就是向右移动了2像素
timer1 = setTimeout(moveItRight, 25)//隔25毫秒后运行一次moveItRight函数
}
window.onload = function () {
el = document.getElementById("div1")
el.style.left = '500px'
moveItRight()
}
</script>
在自己网站需要添加切换图的位置放上以下的HTML代码（用来显示切换的8张图片）；图片可以是固定的几张图片，也可以使用动态调用代码来调用网站文章中的图片。在网站的CSS文件的底部粘贴下面的CSS文件，用来控制版块的样式。可以对CSS进行适当的修改来符合自己做网站的尺寸的需要。
http://www.free-web.cn/*案例滚动图片样式*/
.anli8{width:980pxmargin:0px auto}
.anli_fot{width:980pxheight:7pxbackground:url(../images/net2_07.jpg) no-repeatmargin-bottom:15px}
.infiniteCarousel {
border-left:1px solid #cccborder-right:1px solid #cccbackground-color:#F6F5F5width:978pxposition: relativeheight:190px
}
.infiniteCarousel .wrapper8 {
width:865pxheight:198pxposition:absolutetop:0margin-left:53px
}
.infiniteCarousel ul a img {
border:4px solid #E5E5E5width:190pxheight:130pxoverflow:hidden
}
.infiniteCarousel li{
text-align:centerfont-weight:normalfont-size:12pxcolor:#333line-height:26px
}
.infiniteCarousel .wrapper8 ul{
width:865pxmargin:0position:absolutepadding-top:10px
}
.infiniteCarousel .wrapper8 ul li {
display:blockfloat:leftpadding:10px
}
.infiniteCarousel .arrow {
display: blocktext-indent: -999pxposition:absolutetop:65pxcursor:pointer
}
.infiniteCarousel .forward {
width:46pxheight:45pxbackground:url(../images/net_05.jpg) no-repeatright:5pxoverflow:hidden
}
.infiniteCarousel .back {
width:46pxheight:45pxbackground:url(../images/net_03.jpg) no-repeatleft:5px
}
.infiniteCarousel .forward:hover {
width:46pxheight:45pxbackground:url(../images/net_05.jpg) no-repeatright:5px
}
.infiniteCarousel .back:hover {
width:46pxheight:45pxbackground:url(../images/net_03.jpg) no-repeatleft:5px
}
添加了DIV和CSS之后，只能将图片显示出来，但图片还不能动起来，还需要添加二个JS文件才能让它们自动切换起来。
下载二个JS文件，然后上传到自己网站空间的根目录下。
完成以上步骤之后，即可实现在自己网站上制作左右滚动的切换图的效果了。
