淡入淡出轮播图

最新推荐文章于 2024-04-19 18:24:22 发布

专注的小眼神

最新推荐文章于 2024-04-19 18:24:22 发布

阅读量1.2k

点赞数

分类专栏： Web 文章标签： html5 jquery 轮播淡入淡出

本文链接：https://blog.csdn.net/My_dream014/article/details/70184478

版权

Web 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

该轮播图实现了：5秒切换一次，可点击下方圆点手动切换，缓动效果为修改透明度(渐隐渐显)。

提示：该红色区域内的索引小球可以手动改变到自己想调的位置（在css文件下标注的位置）

以下是HTML5和js代码部分：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>首页</title>
		<link rel="stylesheet" href="css/home.css" />
		<link rel="stylesheet" type="text/css" href="css/new_file.css"/>
	</head>
	<body>
		<div class="container">
				<!--轮播-->
				<div class="carousel">
					<div class="window">
						<a href="#"><img src="img/img1.png" alt=""/></a>
						<a href="#"><img src="img/img2.jpg" alt=""/></a>
						<a href="#"><img src="img/img3.jpg" alt=""/></a>
						<a href="#"><img src="img/img4.jpg" alt=""/></a>
					</div>
					<!--索引-->
					<div class="paging">
						<div><a href="javascript:" index='0'></a></div>
						<div><a href="javascript:" index='1'></a></div>
						<div><a href="javascript:" index='2'></a></div>
						<div><a href="javascript:" index='3'></a></div>
					</div>
				</div>
			</div>
		</div>
	</body>
	<script type="text/javascript" src="js/jquery.min.js"></script>
	<script type="text/javascript">
		$('.paging a:first').addClass('active');//第一个索引显示
		$('.carousel .window a:gt(0)').hide();//第一个图片显示
		var i_num=0;//计数器
		var num=$('.carousel .window a').length;//图片个数
		//轮播开始函数
		rotateSwitch=function(){
			//定时器play，5000ms换一次
			play=setInterval(function(){
				if (i_num == num-1) {
					i_num=-1;
				}
				//图片轮播
				$('.carousel .window a').eq(i_num+1).fadeIn(500).siblings('a').fadeOut(500);
				//索引小球
				$('.paging div a').eq(i_num+1).addClass('active').parent().siblings('div').children().removeClass('active');
				i_num++;
				document.title=i_num;
			},5000)
		};
		rotateSwitch();
	//点击小球时的事件
		$('.paging div').click(function(){
			var triggerID = parseInt($(this).children().attr('index'));//获取点击小球的index属性值
			clearInterval(play);//清除定时器 play
			//图片轮播
			$('.carousel .window a').eq(triggerID).fadeIn(500).siblings('a').fadeOut(500);
			//索引小球
			$('.paging div a').eq(triggerID).addClass('active').parent().siblings('div').children().removeClass('active');
			i_num=triggerID;//把当前位置传给rotateSwitch
			rotateSwitch();
		})
	</script>

</html>

以下是css代码部分：

		/*轮播*/
		
		.carousel {
			position: absolute;
			z-index: 10;
			width: 960px;
			height: 382px;
			border: 4px white solid;
			-webkit-box-shadow: 0 10px 20px gray;
			box-shadow: 0 10px 20px gray;
			left: 50%;
			margin-left: -480px;
			margin-top: -40px;
		}
		
		.carousel .window img {
			position: absolute;
		}
		/*索引球的位置*/
		.carousel .paging {
			position: absolute;
			bottom: -40px;
			left: 50%;
			width: 125px;
			margin-left: -62.5px;
			line-height: 24px;
			overflow: hidden;
			text-align: center;
		}
		
		.carousel .paging div {
			float: left;
			width: 24px;
			height: 24px;
			border: 1px #dadada solid;
			box-shadow: 0 0 5px #dadada inset;
			-webkit-box-shadow: 0 0 5px #dadada inset;
			-moz-border-radius: 24px;
			-webkit-border-radius: 24px;
			border-radius: 24px;
			background: white;
			margin-left: 5px;
			cursor: pointer;
		}
		
		.carousel .paging .active {
			display: inline-block;
			width: 15px;
			height: 15px;
			-moz-border-radius: 15px;
			-webkit-border-radius: 15px;
			border-radius: 15px;
			background: #ff7800;
			margin: 4px auto;
		}

专注的小眼神

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
淡入淡出轮播图

该轮播图实现了：5秒切换一次，可点击下方圆点手动切换，缓动效果为修改透明度(渐隐渐显)。提示：该红色区域内的索引小球可以手动改变到自己想调的位置（在css文件下标注的位置）以下是HTML5和js代码部分：首页
复制链接

扫一扫