web前端之幻灯片（一）

最新推荐文章于 2023-08-10 13:28:17 发布

Zella Zhang

最新推荐文章于 2023-08-10 13:28:17 发布

阅读量1.3k

点赞数 1

分类专栏：前端文章标签： html5 jquery javascript css3

本文链接：https://blog.csdn.net/FemaleHacker/article/details/106984174

版权

前端专栏收录该内容

19 篇文章 3 订阅

订阅专栏

幻灯片

实现左右点击切换，左下角圆圈直接跳转到某张幻灯片。

效果图

幻灯片效果图

代码实现动图展示

幻灯片动图展示

html代码

<body>
	<div class="show">
		<div class="myShow">
			<div class="number">1 / 4</div>
			<img src="../image/huan1.jpg" alt="">
			<div class="text">introduction1</div>
		</div>
		<div class="myShow">
			<div class="number">2 / 4</div>
			<img src="../image/huan2.jpg" alt="">
			<div class="text">introduction2</div>
		</div>
		<div class="myShow">
			<div class="number">3 / 4</div>
			<img src="../image/huan3.jpg" alt="">
			<div class="text">introduction3</div>
		</div>
		<div class="myShow">
			<div class="number">4 / 4</div>
			<img src="../image/huan4.jpg" alt="">
			<div class="text">introduction4</div>
		</div>
		<div class="dot_contain">
			<div class="dot" onmouseenter="currentShow(1)">1</div>
			<div class="dot" onmouseenter="currentShow(2)">2</div>
			<div class="dot" onmouseenter="currentShow(3)">3</div>
			<div class="dot" onmouseenter="currentShow(4)">4</div>
		</div>

		<a class="prev">❮</a>
		<a class="next">❯</a>
	</div>
	<br>
</body>

css代码

<style>	
		*{
			font-family: 微软雅黑;
		}
		.show{
			max-width: 1000px;
			position: relative;
			margin:auto;
		}

		.myShow{
			display: none;
		}
		
		img{
			width: 100%;
		}

/*-------------------------------------------------------------------*/
		/*文字部分s*/
		.text {
			color: #f2f2f2;
			font-size: 15px;
			padding: 8px 12px;
			position: absolute;
			bottom: 8px;
			right: 8px;
			width: 50%;
			text-align: center;
			/*border:1px solid #000;*/
		}

 		/*数字文字部分*/
		.number{
		  color: #f2f2f2;
		  font-size: 12px;
		  padding: 8px 12px;
		  position: absolute;
		  top: 0;
		}
/*-------------------------------------------------------------------*/
		/*左右切换*/
		.prev,.next{
			cursor: pointer;
			position:absolute;
			top:50%;
			margin-top: -22px;
			padding: 16px;
			border-radius: 0 3px 3px 0;
			color: #000;
			font-size: 50px;
			font-weight: bold;
		}

		.next{
			right:0px;
		}

		.prev:hover, .next:hover {
			background-color:#DCDCDC;
			opacity: 0.3;
		}
/*-------------------------------------------------------------------*/
		/*幻灯片下方圆点*/
		.dot_contain{
			position:absolute;
			bottom:8px;
			text-align: center;
		}

		.dot{
			font-size: 10px;
			font-weight: bold;
			text-align: center;
			height: 20px;
			width: 20px;
			margin: 0 2px;
			background-color: #bbb;
			border-radius: 50%;
			display: inline-block;
		}

		.active, .dot:hover {
			background-color: #696969;
		}

	</style>

js代码

<script src="../jquery-1.11.3/jquery-1.11.3.min.js"></script>

<script>
	index = 1;
	show(index);
	 
	function changeShow(n) {
	  show(index += n);
	}
	 
	function currentShow(n) {
	  show(index = n);
	}
	
	function show(n) {
	//根据class名获取到shows和dots
	  shows=$('.myShow');
	  dots =$('.dot');

	  //获取到幻灯片长度-----即幻灯片个数
	  length=shows.length;

	  //获取到幻灯片下方圆圈个数
	  dotLength=dots.length;

	  //如果向后走到最后一张幻灯片时，则将index=1-----即切换到第一张幻灯片
	  if (n > length) {
	  	index = 1;
	  }else if (n < 1) {//如果向前走到第一张幻灯片时，则将index=length-----即切换到最后一张幻灯片
	  	index = length;
	  }


	  for (i = 0; i < length; i++) {
	      shows[i].style.display = "none"; 
	  }

	  for (i = 0; i < dotLength; i++) {
	      dots[i].className = dots[i].className.replace("active", "");
	  }

	  shows[index-1].style.display = "block"; 
	  dots[index-1].className += " active";
	}

	$('.prev').click(function(){
		changeShow(-1);
	});
	$('.next').click(function(){
		changeShow(1);
	}); 
</script>

☺️

Zella Zhang

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
web前端之幻灯片（一）

幻灯片实现左右点击切换，左下角圆圈直接跳转到某张幻灯片。效果图代码实现动图展示html代码<body> <div class="show"> <div class="myShow"> <div class="number">1 / 4</div> <img src="../image/huan1.jpg" alt=""> <div class="text">introduction1&l
复制链接

扫一扫