简易轮播图

最新推荐文章于 2024-08-03 23:03:36 发布

菜鸟猪猪侠yy

最新推荐文章于 2024-08-03 23:03:36 发布

阅读量280

点赞数

分类专栏：个人demo 文章标签： css html javascript

本文链接：https://blog.csdn.net/qq_41743601/article/details/120328868

版权

个人demo 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

轮播图

文章目录

轮播图
- 1.代码（jquery+html+css）
- 2.效果图

1.代码（jquery+html+css）

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>轮播图</title>
		<style type="text/css">
			html,
			body {
				height: 100%;
			}
			
			* {
				margin: 0;
				padding: 0;
			}
			
			#box {
				border: 1px solid white;
				height: 100%;
				width: 100%;
				position: relative;
				background-color: pink;
			}
			
			#ImageContainer {
				height: 65%;
				width: 50%;
				background-color: royalblue;
				position: inherit;
				border-radius: 5px;
				overflow: hidden;				
				left: 25%;
				top: 20%;				
			}
			
			.showImage {
				position: absolute;
				height: 100%;
				width: 100%;
				background-color: chartreuse;
				opacity: 0;
				/*当你对图片进行opacity切换时,会触发过度动画,这里就可以设置延时*/
				transition: all 1.5s;
				
			}
			
			.showImage img {
				height: 100%;
				width: 100%;
			}
			
			div:nth-child(1) {
				opacity: 1;
			}
			
			.fitLeft {
				font-size: 40px;
				position: absolute;
				height: 70px;
				width: 60px;
				background-color: gainsboro;
				opacity: 0.6;
				color: white;
				cursor: pointer;
				text-align: center;
				line-height: 55px;
				top: 40%;
			}
			
			.fitLeft:hover {
				opacity: 0.8;
			}
			
			.fitRight {
				font-size: 40px;
				position: absolute;
				color: white;
				cursor: pointer;
				opacity: 0.6;
				height: 70px;
				width: 60px;
				background-color: gainsboro;
				text-align: center;
				line-height: 55px;
				right: 0;
				top: 40%;
			}
			
			.fitRight:hover {
				opacity: 0.8;
			}
			
			#circle {
				position: absolute;
				bottom: 3%;
				left: 35%;
			}
			
			#circle .circle_ul li {
				height: 20px;
				width: 20px;
				background-color: lightgray;
				list-style: none;
				cursor: pointer;
				float: left;
				margin-left: 30px;
				border-radius: 100%;
			}
		</style>
		<script type="text/javascript" src="jquery-1.11.0.js"></script>
	</head>

	<body>
		<div id="box">
			<div id="ImageContainer">
				<div class="showImage">
					<img src="../img/5.jpg" />
				</div>
				<div class="showImage">
					<img src="../img/10.jpg" />
				</div>
				<div class="showImage">
					<img src="../img/3.jpg" />
				</div>
				<div class="showImage">
					<img src="../img/4.jpg" />
				</div>
				<div class="showImage">
					<img src="../img/11.jpg" />
				</div>
				<!--左右切换图标-->
				<div class="fitLeft">&lt;</div>
				<div class="fitRight">&gt;</div>
				<div id="circle">
					<ul class="circle_ul">
						<li id="1"></li>
						<li id="2"></li>
						<li id="3"></li>
						<li id="4"></li>
						<li id="5"></li>
					</ul>
				</div>
			</div>
		</div>		
		<script type="text/javascript">
			//			逻辑业务层
			// 			1. index取值范围[0,4]
			$(function() {
				var index = 0;						
				//				实现左点击切换  
				$('.fitLeft').click(function() {					
					//					将当前图片进行隐藏
					$(".showImage").eq(index).css("opacity","0")
					$('li').eq(index).css("background-color","lightgray")
					if(index == 0) {
						//						切换到最后一张图片去  
						index = 4
						$('.showImage').eq(index).css("opacity","1")
						$('li').eq(index).css("background-color","lightslategray")
						console.log($('.showImage').eq(index))
					} else {
						index--
						$('.showImage').eq(index).css("opacity","1")
						$('li').eq(index).css("background-color","lightslategray")
						console.log($('.showImage').eq(index))
					}
				})
				
				//实现右点击切换		
				$('.fitRight').click(function() {							
					//					将当前图片进行隐藏
					$(".showImage").eq(index).css("opacity","0")
					$('li').eq(index).css("background-color","lightgray")
					if(index == 4) {
						//切换到最后一张图片去
						index = 0
						$('.showImage').eq(index).css("opacity","1")
						$('li').eq(index).css("background-color","lightslategray")
						console.log($('.showImage').eq(index))
					} else {
						index++
						$('.showImage').eq(index).css("opacity","1")
						$('li').eq(index).css("background-color","lightslategray")
						console.log($('.showImage').eq(index))
					}
				})
				
				//实现下方小圆圈颜色切换
				var id=0
				$('li').click(function(e){
//					将所有小圆圈的颜色变为未选中状态
					$('li').eq(id-1).css("background-color","lightgray")
					console.log(e.target.id)
					id=e.target.id
//					将选中的小圆圈颜色变为选中状态
					$('li').eq(id-1).css("background-color","lightslategray")
//					对图片进行切换
//					将当前的图片设为隐藏
					$('.showImage').eq(index).css("opacity","0")
//					将小圆圈对应的图片设为显示
					$('.showImage').eq(id-1).css("opacity","1")
//					更新index的值
					index=id-1;
				})
				
//				对图片进行间歇性变动  默认方向为left
				setInterval(function(){
					$('.showImage').eq(index).css("opacity","0")
					$('li').eq(0).css("background-color","lightgray")
					$('li').eq(index+1).css("background-color","lightgray")
					if(index==0){
						$('li').eq(index).css("background-color","lightslategray")
						index=4
					}else{
						index--
					}
					$('.showImage').eq(index).css("opacity","1")
//					更新下方小圆圈的颜色
					$('li').eq(index+1).css("background-color","lightslategray")
				},2000)
				
			})
		</script>

	</body>

</html>

2.效果图

在这里插入图片描述

菜鸟猪猪侠yy

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
简易轮播图

轮播图文章目录轮播图1.代码（jquery+html+css）2.效果图1.代码（jquery+html+css）<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>轮播图</title> <style type="text/css"> html, body { height: 100%; } *
复制链接

扫一扫

专栏目录