如何用JavaScript实现轮播图的滚动效果
作者：互联网
最近在学JavaScript，想做一个带有滚动效果的轮播图，一开始做了很多尝试结果都不太对，后来看了一下别人的思路，自己也模仿的做了一个出来，代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>轮播图</title>
<style type="text/css">
ul {
list-style: none;
width: 1200px;
height: 600px;
padding: 0px;
}
li {
float: left;
}
li img {
width: 400px;
height: 600px;
}
.keep {
width: 400px;
height: 600px;
position: absolute;
overflow: hidden;
margin-left: 30%;
}
.left {
font-size: 25px;
color: rgba(187, 187, 187, 0.5);
border: 1px solid #bf9999;
border-radius: 100%;
width: 30px;
height: 30px;
padding-bottom: 3px;
font-weight: bold;
text-align: center;
vertical-align: middle;
position: absolute;
top: 250px;
left: 20px;
}
.right {
font-size: 25px;
color: rgba(187, 187, 187, 0.5);
border: 1px solid #bf9999;
border-radius: 100%;
padding-bottom: 3px;
width: 30px;
height: 30px;
font-weight: bold;
text-align: center;
vertical-align: middle;
position: absolute;
top: 250px;
left: 350px;
}
</style>
</head>
<body>
<div class="keep">
<ul>
<li><a href="#"><img src="img/1.png"></a></li>
<li><a href="#"><img src="img/2.jpg"></a></li>
<li><a href="#"><img src="img/3.png"></a></li>
</ul>
<!-- 左边移动 -->
<a href="###" onclick="left();">
<span class="left">
<
</span>
</a>
<!-- 右边移动 -->
<a href="###" onclick="right();">
<span class="right">
>
</span>
</a>
</div>
<script>
// 图片现在的位置
var nowImgPosition = 0;
// 需要移动的位置
var movePosition = 0;
// 按下左边按钮
function left() {
// 如果图片已经在最左边 - 回到最后一张
movePosition += 400;
if (movePosition > 0) {
movePosition = -800;
return;
}
}
// 按下右边按钮
function right() {
// 如果图片已经在最右边 - 回到第一张
movePosition -= 400;
if (movePosition < -800) {
movePosition = 0;
return;
}
}
// 每隔30毫秒图片移动一段距离
setInterval(function() {
nowImgPosition = nowImgPosition + (movePosition - nowImgPosition) / 10;
document.querySelector('ul').style.marginLeft = nowImgPosition + 'px';
}, 30);
</script>
</body>
</html>
上述代码可以实现滚动轮播图的效果，但如果想把这个轮播图嵌入到一个页面中还是有一点小问题，我把ul弄成一行，会占比较多的位置，如果要在ul的左右添加文字的话，位置会不对，所以这里最好将ul浮动起来不占位置。
我这里就是直接设定死了图片的宽，统一为400px。如果大家需要调图片的大小，可以将上述代码中所有的400px改为自己需要的图片大小宽度，记得把JS代码中的800改为（一张图片的宽度 * （轮播的图片数 - 1）），图片的高度就直接把上述代码中的600px改为图片的高度即可。这样做会比较麻烦，要改很多地方，大家可以在JS代码中统一设定一个图片的宽高大小的变量，然后用JS代码设置即可，这样以后修改的话只需要改两个变量的大小即可。
如果大家发现还有什么bug可以评论区一起讨论一下(*╹▽╹*)
long_long_later
发布了10 篇原创文章 · 获赞 15 · 访问量 1万+
私信
关注
标签：nowImgPosition,滚动,轮播,movePosition,JavaScript,187,图片,left 来源： https://blog.csdn.net/long_long_later/article/details/104588801