带左右按钮、渐隐渐现轮播图

最新推荐文章于 2022-03-09 08:36:26 发布

weixin_34380296

最新推荐文章于 2022-03-09 08:36:26 发布

阅读量141

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/mingjixiaohui/p/5254965.html

本文介绍了一种使用HTML、CSS及JavaScript实现图片轮播效果的方法。通过设置定时器自动切换图片，并允许用户手动控制前后页，实现了平滑过渡的视觉效果。

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#outer{
				position: relative;
				width: 800px;
				height: 450px;
				overflow: hidden;
				margin: 50px auto 0;
			}
			#outer img{
				position: absolute;
				width: 800px;
				height: 450px;
				opacity: 0;
			}
			#outer #show{
				opacity:1;
			}
			#prePage{
				position: absolute;
				left: 0;
				top: 50%;
				width: 50px;
				height: 100px;
				background: rgba(0,0,0,0.5);
				line-height: 100px;
				text-align: center;
				font-size: 40px;
				color: white;
				margin-top: -50px;
			}
			#nextPage{
				position: absolute;
				right: 0;
				top: 50%;
				width: 50px;
				height: 100px;
				background: rgba(0,0,0,0.5);
				line-height: 100px;
				text-align: center;
				font-size: 40px;
				color: white;
				margin-top: -50px;
			}
		</style>
	</head>
	<body>
		
		<div id="outer">
			<img src="img/1.jpg" alt=""  id="show"/>
				<img src="img/10.jpg" alt="" />
				<img src="img/11.jpg" alt="" />
				<img src="img/12.jpg" alt="" />
				<img src="img/2.jpg" alt="" />
			<span id="prePage"><</span><span id="nextPage">></span>
		</div>
		
		<script src="js/jquery-2.2.1.min.js"> </script>
		<script>
		
			var page = 0;
			var time = null;
			var time1= null;
			var time2 = null;
			run()
			function run(){
				time = setInterval(function(){
					page++;
					if(page>4)
					{
						page = 0;
					}
					ani();
				},3000);
			}
			
			$("#prePage").click(function(){
				clearInterval(time);
				clearTimeout(time1);

				page--;
				if(page<0)
				{
					page = 4;
				}
				console.log(page);
				$("#outer>img").stop();
				ani();
				time1 = setTimeout(function(){
					run();
				},1000)

				
			})
			
			$("#nextPage").click(function(){
				clearInterval(time);
				clearTimeout(time2);
				page++;
				if(page > 4)
				{
					page = 0;
				}
				console.log(page);
				$('#outer>img').stop();
				ani();
				time2 = setTimeout(function(){
					run();
				},1000)

				
			})
			
			function ani(){
				$("#outer>img").eq(page).siblings("img").animate({"opacity":"0"},500,function(){
					$("#outer>img").eq(page).animate({"opacity":1},500);
				})
			}
		</script>
		
	</body>
</html>