jq实现幻灯片

嘟噜嘟噜123

于 2022-06-06 21:45:29 发布

阅读量261

点赞数

文章标签： javascript jquery html

本文链接：https://blog.csdn.net/m0_62371223/article/details/125154908

版权


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<style>
			* {
				margin: 0;
				padding: 0;
			}

			.swiper {
				width: 800px;
				height: 600px;
				border: 1px solid #000;
				margin: 50px auto;
				overflow: hidden;
				position: relative;
			}

			.container {
				width: 4000px;
				white-space: nowrap;
				font-size: 0;
				position: absolute;

			}

			img {
				width: 800px;
				height: 600px;

			}
		</style>
		<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>
			$(function() {
			setInterval(function(){
				if($('.container').position().left>-3200){
					$(".container").animate({
					left: "+=-800"
				}, 2000)
				}else{
					$(".container").animate({
						left: "+=4000"
					}, 1)
				}
			},2000)
				


			})
		</script>
	</body>
</html>