css3+js 轮播图 白话详解！

发表于 作者 jiukeshuju 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<style type="text/css">
			/*
			html的写法：
			大框架写 div包裹div 里的 div包裹div
			
			 1，写公共参数。
			 2，写幻灯片容器参数。
			 3，写下一张 & 上一张 按钮 的样式
			 4，写左右切换按钮
			 5，写左右箭头的hover
			 6，写标题样式
			 7，写数字文本的样式
			 8，写下边的三个圆点。
			 9，写切换三个圆点的背景。
			 10，写js代码（）
			 
			 
			*/
			
			/* 元素的总高度和宽度包含内边距和边框 */
			* {
				box-sizing: border-box
			}
			
			/* body中的字体样式 */
			body {
				font-family: Verdana, sans-serif;
			}
			
			
			.slideshow-container {
				margin: auto;
				width: 1000px;
				position: relative;
			}
			.numbertext {
				color: #FEFEFE;
				position: absolute;
				top:20px;
				left:50px;
			}
			.text{
				position: absolute;
				padding: 8px 12px;
				bottom: 40px;
				width: 100%;
				text-align: center;
				color: #FEFEFE;
			}
			
			/* 下一张 & 上一张 按钮 的样式。*/
			.prev,
			.next {
				cursor: pointer;
				position: absolute;
				top: 50%;
				width: auto;
				margin-top: -22px;
				padding: 16px;
				color: white;
				font-weight: bold;
				font-size: 18px;
				/* 过渡 */
				transition: 0.6s ease;
				border-radius: 0 3px 3px 0;
			}
			
			/* 定位 "下一张" 按钮靠右 */
			.next {
				right: 0;
				border-radius: 3px 0 0 3px;
			}
			
			/* 标记符号 */
			.dot {
				cursor: pointer;
				height: 13px;
				width: 13px;
				margin: 0 2px;
				background-color: #bbb;
				border-radius: 50%;
				display: inline-block;
				transition: background-color 0.6s ease;
			}
			
			/*切换圆点选择的背景*/
			.active,
			.dot:hover {
				background-color: #717171;
			}
			
		</style>
		
		<!-- 祖父元素 -->
		<div class="slideshow-container">
			<!-- 父元素 -->
			<div class="mySlides fade">
				<!-- 子元素 -->
				<div class="numbertext">1 / 3</div>
				<img src="https://c.runoob.com/wp-content/uploads/2017/01/img_mountains_wide.jpg" style="width:100%">
				<div class="text">文本 1</div>
			</div>
		
			<div class="mySlides fade">
				<div class="numbertext">2 / 3</div>
				<img src="https://c.runoob.com/wp-content/uploads/2017/01/img_fjords_wide.jpg" style="width:100%">
				<div class="text">文本 2</div>
			</div>
		
			<div class="mySlides fade">
				<div class="numbertext">3 / 3</div>
				<img src="https://c.runoob.com/wp-content/uploads/2017/01/img_nature_wide.jpg" style="width:100%">
				<div class="text">文本 3</div>
			</div>
		
			<!-- 左右 -->
			<a class="prev" onclick="zyhd(-1)">❮</a>
			<a class="next" onclick="zyhd(1)">❯</a>
		</div>
		
		<br>
		
		<!-- 子元素 -->
		<div style="text-align:center">
			<span class="dot" onclick="ydhd(1)"></span>
			<span class="dot" onclick="ydhd(2)"></span>
			<span class="dot" onclick="ydhd(3)"></span>
		</div>
		
		<script>
			/*
			1，获得海报图dom
			2，获得3个圆点的dom
			3，左右判断是不是到首页。海报是123  参数传进来也是123.
				如果是首页，则到第3页。
				如果是尾页，则到第1页。
				也就是说，当小于1时，是3   当大于3时，是1.
				1 和 3   当小于1时，是3   当大于3时，是1.
				< 1 和 > 3 
			4，当用户点 < > 左右的时侯， 	
			
			*/
		   
			var suoyin = 1;
			xshb(suoyin);
			
			function zyhd(n){
				xshb(suoyin= suoyin + n);  // 参数1：1 + -1  = 0  参数2： 1+1=2   
			}
			
			function ydhd(n){
				xshb(suoyin = n);
			}
			
			function xshb(n){
			    var i; //初始变量
				var hbd = document.getElementsByClassName('mySlides');
				var ydd = document.getElementsByClassName('dot');
				
				
				if(n < 1){ 
					suoyin = hbd.length;
				}
				
				if (n > hbd.length){
					suoyin = 1;
				}
				
				for(i=0; i<hbd.length; i++){
					hbd[i].style.display="none";
				}
				
				for(i=0; i<ydd.length; i++){
					ydd[i].className = ydd[i].className.replace(" active", "");
				}
				
				hbd[suoyin - 1].style.display = "block"; //
				
				dots[suoyin - 1].className = dots[suoyin - 1].className + " active";
				
			}
		</script>
		
	</body>
</html>

发表评论

邮箱地址不会被公开。