JS实现轮播图

最新推荐文章于 2024-07-16 22:34:38 发布

原创最新推荐文章于 2024-07-16 22:34:38 发布 · 430 阅读

0 ·

CC 4.0 BY-SA版权

JS 专栏收录该内容

35 篇文章

订阅专栏

本文详细介绍了如何使用HTML和CSS创建一个简单的轮播图效果，并通过JavaScript实现了自动播放及手动切换图片的功能。文章包含了完整的代码示例，适合前端初学者实践。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>轮播图</title>
		<style>
		*{margin: 0; padding: 0;}
		ul{list-style: none;}
		.slideShow{
			position:relative;
			margin: 100px auto;
			width: 340px;
			height: 140px;
			overflow: hidden;					
		}	
		.slideShow ul{
			position: relative;
			width: 2000px;
		}
		.slideShow ul li{
			float: left;
			width: 340px;
			
		}
		.slideShow .nav{
			text-align: center;
			position: absolute;
			right: 10px;
			bottom: 10px;
			font-size: 12px;
			line-height: 18px;
			
		}
		.slideShow .nav span{
			-webkit-user-select: none;
			float: left;
			cursor: pointer;
			border-radius: 9px;
			display: inline-block;
			width: 18px;
			height: 18px;
			background: rgba(0,0,0,0.7);
			margin-left: 2px;
			color: #fff;
			opacity: 0.5;			
		}
		.slideShow .nav  span .active{ opacity:1;}
		
		</style>
		
	</head>
	<body>
		<div class="slideShow">
			<ul>
				<li><a href="#"><img src="img/0.jpg"/></a></li>
				<li><a href="#"><img src="img/1.jpg"/></a></li>
				<li><a href="#"><img src="img/2.jpg"/></a></li>
			</ul>
			<div class="nav">
				<span class="active">1</span>
				<span>2</span>
				<span>3</span>
				
			</div>
			
			
			
			
		</div>
		
		
		
		<script type="text/javascript" src="js/jquery-1.11.0.js" ></script>
		<script type="text/javascript" src="js/main.js" ></script>
		
	</body>
</html>

$(function(){
	
	var slideShow = $(".slideShow");
		ul = slideShow.find("ul");
		nav = slideShow.find(".nav span");
		picWith = ul.find("li").eq(0).width();
		timer = null;
		iNow = 0;
		
		
		console.log(picWith);
		slideShow.hover(function(){
			clearInterval(timer);
		},autoPlay);
		nav.on("click",function(){
			var me = $(this);
			index = me.index();
			console.log(index);
			iNow = index;
			ul.animate({
				"left" : - picWith * iNow 
			});
			nav.removeClass("active");
			me.addClass("active");
		})	
			autoPlay();
			function autoPlay(){
				timer = setInterval(function(){
				iNow++;
				if(iNow>nav.length-1)
				{
					iNow=0;
				}
				nav.eq(iNow).trigger("click");
				
			},2000);
				
				
			}	
})