求 JS 大神，教教我图片轮播、、好心求解
发布网友
发布时间：2022-04-22 15:36
共1个回答
热心网友
时间：2023-11-11 01:13
要实现图片滚动轮播，可以有很多方式，无非是通过调整外围容器的位置（left/top）或者内部图片容器的定位（marin-left/margin-top）来实现的。这里我以前者为例（向左滚动）：
通常的实现方式是：
1) 有一个外层容器，同时作为“视口”，这个viewPort有固定的尺寸，超出的部分隐藏，定位方式为“relative”；
2) 包含图片的容器（此处称为“画轴”），尺寸很大，可以容纳下要滚动图片的阵列，定位方式为“absolute”；
3) 滚动即是调整此画轴的偏移量，此处示例为left；
4) 如果图片要看上去是连续滚动（到最后一幅时接着出现第一幅）的，那么可以重复第一幅图像到阵列的最末，然后当画轴滚动到此时，重置偏移量到第一幅。
有了上述DOM结构后，就可以通过JS来控制画轴的偏移量了，如果使用动画，可以参考一些成熟的动画库，示例只提供最基本的线性动画（即匀速移动）。
HTML：
<!DOCTYPE html><html>
<head>
<meta charset='utf-8'>
</head>
<body>
<div class="viewPort">
<ul class="scroll" id="scroll">
<li><img src="img/scrollImage (0).jpg"></li>
<li><img src="img/scrollImage (1).jpg"></li>
<li><img src="img/scrollImage (2).jpg"></li>
<li><img src="img/scrollImage (3).jpg"></li>
<li><img src="img/scrollImage (4).jpg"></li>
<li><img src="img/scrollImage (0).jpg"></li>
</ul>
</div>
</body>
</html>
CSS：
width: 168px;
height: 168px;
position: relative;
overflow: hidden;
border: solid 1px #666;
}
.viewPort .scroll{
width: 10000px;
height: 168px;
position: absolute;
left: 0;
list-style: none;
margin: 0;
padding: 0;
}
.viewPort .scroll li{
width: 168px;
height: 168px;
float: left;
}
JS：
var scrollLeft = 0; // 记录画轴CSS left属性的值
var index = 0; // 当前显示的画的序号
// 滚动一幅画面，调整画轴scroll的left属性值。
function scrollByOne(){
var timer = setInterval(function(){
if (scrollLeft <= -168 * index) {
clearInterval(timer);
scrollLeft = -168 * index;
// 当滚动到最后一幅画面（与第一幅相同）时，重置。
if (index == 5) {
scrollLeft = 0;
scroll.style.left = '0';
index = 0;
}
} else {
scrollLeft -= 2;
scroll.style.left = scrollLeft + 'px';
}
}, 10);
}
// 滚动，每隔3秒钟滚动一幅。
setInterval(function(){
++index;
scrollByOne();
}, 3000);
代码：
