JavaScript实现幻灯片

原创于 2022-05-23 21:30:40 发布

· 731 阅读

版权

文章标签：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			.swiper{
				width: 800px;
				height: 600px;
				border: 1px solid red;
				margin: 50px auto;
				overflow: hidden;
			}
			.swiper img{
				width: 800px;
				height: 600px;
				object-fit: cover;
				
			}
			.container{
				width: 4000px;
				white-space: nowrap;
				font-size: 0;
			}
		</style>
	</head>
	<body>
		<div class="swiper">
			<div class="container">
					<img src="imgs/1.png" alt="">
					<img src="imgs/2.png" alt="">
					<img src="imgs/3.png" alt="">
					<img src="imgs/4.png" alt="">
					<img src="imgs/5.png" alt="">
					<img src="imgs/1.png" alt="">
                    //图片到最后一张会直接跳转第二张，所以在最后我们需要把第一张图片放在最后一张后面。
			</div>
		</div>
		<script>
			// 图片轮播就是把swiper.scrollLeft值，每隔3000毫秒加800
			// 获取到swiper
			var index = 0;// 存储当前是第几张
			var width = 800; // 每张图片的宽
			var len = 5; // 图片共有几张
			var swiper = document.querySelector(".swiper");
			setInterval(function(){
				// swiper.scrollLeft+=width;
				//让index加1
				// 做出动画效果
				var offset = 0;//记录一次切换滚动的距离
				
				var id = setInterval(function(){
					offset+=40;// 让滚动距离加40
					swiper.scrollLeft+=40;
					if(offset>=width){ //如果大于width清除间隔调用
						clearInterval(id);
					}
				},16)
				index++;
				// 如果大于等于长度5
				if(index>=len){
					index = 0;// index清空
					swiper.scrollLeft = 0; // 滚动为0.
				} 
			},3000)
		</script>
	</body>
</html>