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图片的宽度,并设置动画结束时,将滚动距离调整到初始值。最后,添加鼠标移入和移出事件,移入时停止动画,移出时开启动画。