利用JavaScript实现Banner图片的无缝滚动效果

1.HTML结构

```html

```
上面是实现Banner图片的无缝滚动效果的基本HTML结构，其中container是容器，box是容器里的图片列表，item是每一张图片。

2.CSS

```css
.container {
width: 600px;
height: 300px;
position: relative;
overflow: hidden;
margin: 0 auto;
}

.box {
width: 30000px;
position: absolute;
left: 0;
top: 0;
height: 100%;
}

.item {
float: left;
width: 600px;
height: 300px;
}
```

上面是CSS代码，container是容器，设置宽度为600px，高度为300px，position为relative，overflow为hidden，使得容器只显示内容的部分，box是容器里的图片列表，设置宽度为30000px，使图片可以水平排列，item是每一张图片，设置宽度为600px，高度为300px。

3.JavaScript

```javascript
// 获取元素
var box = document.getElementById('box');
var container = document.getElementById('container');

// 初始化变量
var itemWidth = 600;
var item = box.getElementsByClassName('item');

// 添加定时器
var timer = setInterval(function(){
// 获取第一张图片
var firstItem = item[0];
// 将第一张图片放到最后
box.appendChild(firstItem);
// 设置滚动距离
box.style.left = -itemWidth + 'px';
// 滚动动画
animate();
}, 3000);

// 滚动动画
function animate(){
// 设置滚动动画
var left = parseInt(box.style.left) + itemWidth;
box.style.left = left + 'px';
// 设置动画结束时，将滚动距离调整到初始值
if(left > 0){
box.style.left = -itemWidth * (item.length - 1) + 'px';
}
}

// 鼠标移入，停止动画
container.onmouseover = function(){
clearInterval(timer);
};

// 鼠标移出，开启动画
container.onmouseout = function(){
timer = setInterval(function(){
var firstItem = item[0];
box.appendChild(firstItem);
box.style.left = -itemWidth + 'px';
animate();
}, 3000);
};
```

上面是实现Banner图片的无缝滚动效果的完整代码，首先使用getElementById()方法获取到container和box元素，然后初始化变量itemWidth，item，用来设置每一张Banner图片的宽度和每一张Banner图片。接着添加定时器，每隔3秒，将第一张Banner图片放到最后，并设置滚动距离，调用滚动动画函数。滚动动画函数中，设置滚动动画，每次滚动距离为每一张Banner图片的宽度，并设置动画结束时，将滚动距离调整到初始值。最后，添加鼠标移入和移出事件，移入时停止动画，移出时开启动画。