web前端之幻灯片（二）--自动播放

最新推荐文章于 2023-04-21 20:56:05 发布

Zella Zhang

最新推荐文章于 2023-04-21 20:56:05 发布

阅读量1.2k

点赞数 2

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

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

版权

前端专栏收录该内容

19 篇文章 3 订阅

订阅专栏

幻灯片

实现幻灯片自动放映，左下角圆圈直接跳转到某张幻灯片。
如果想点击切换，请见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</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>
	</div>
</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;
		}
/*-------------------------------------------------------------------*/
		/*幻灯片下方圆点*/
		.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 = 0;
	show();

	function currentShow(n) {
		show(index = n-1);
	}

	function show() {
		//获取到class
		shows=$('.myShow');
	    dots=$('.dot');

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

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


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

	    index++;

	    if (index > length) {
	    	index = 1;
	   	}

	    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";

	    setTimeout(show, 2000); // 切换时间
	    //切换时间可根据自己喜欢调节
	}
</script>

☺️

Zella Zhang

关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
web前端之幻灯片（二）--自动播放

幻灯片实现幻灯片自动放映，左下角圆圈直接跳转到某张幻灯片。如果想左右切换，请见web前端之幻灯片（一）效果图代码实现动图展示html代码<body> <div class="show"> <div class="myShow"> <div class="number">1 / 4</div> <img src="../image/huan1.jpg" alt=""> <div class="
复制链接

扫一扫