(来自千峰1000集）案例 轮播图

介绍

轮播图一般出现在网站的首页位置
达到广告宣传的效果

点击左右按钮切换上下一张 javascript切换函数 设置的是5秒自动切换
点击下方焦点按钮 小圆圈变色 图片切换到指定位置

布局结构

四张图片重叠放置

左右一个切换的按钮
四个焦点按钮 和四张图片相互对应

HTML部分
默认只有第一张图片显示

在这里插入代码片
<div class="banner">
	<!-- 图片区域 -->
		<ul class="imgBox">
			<li class="active"><img src="`在这里插入代码片`" alt="加载异常"></li>
			<li><img src="img/02.jpg" alt="加载异常"></li>
			<li><img src="img/03.jpg" alt="加载异常"></li>
			<li><img src="img/04.jpg" alt="加载异常"></li>
		</ul>
		
		<!--
        	焦点区域
        -->
        
        <ol>
        	<li data-i="0" data-name="point"   class="active"></li>
        	<li data-i="1" data-name="point"></li>
        	<li data-i="2" data-name="point"></li>
        	<li data-i="3" data-name="point"></li>
        </ol>
        /*每个li 是一个小焦点*/
          <!-- 左右切换按钮 -->
        <div class="left">&lt;</div>
         <div class="right">&gt;</div>
		</div>
        

样式
opacity透明度属性

transition:opacity .5s linear;

css中的display属性

在这里插入代码片
<style>
			*{
				margin:0;
				padding:0;
			}/*通配符  选择器*/
			
			ul,ol,li{
				/*群组选择器*/
				list-style:none;
			}
/*以上都是默认样式  清掉 ol li 上的小点*/
			img{
				/*元素选择器*/
				width:100%;
				height:100%;
				display:block;
				/*display:block;   将元素变为块状元素 可以设置宽和高
				                   独占一行
				                   可以使用padding，margin的left和right产生边距效果，但是top和bottom就不行
				
			}
			

			.banner{
				/*class 选择器*/
				width:100%;
				height:500px;
				position:relative;
				/*position:relative; 绝对相对定位，
				relative和absolute的另外一个很重要的区别就是当被定义成absolute的对象被移出了，那么他原来的位置也就不存在了，
如果被定义成relative的对象被移出了 他原来的位置还在，别的元素就不能替代这个位置*/
				margin:50px 0;
			}
			
			.banner>ul{
				width:100%;
				height:100%;
				position:relative;
				/* 子元素选择器 */
			}
			
			
			.banner>ul>li{
				width:100%;
				height:100%;
				position:absolute;
				/* position 布局之绝对布局 absolute*/
				left:0;
				top:0;
				opacity:0;/*设置图片的透明度*/
				transition:opacity .5s linear;
				/*transition允许css的属性值在一定的时间区间内平滑地过渡*/
				/* 子元素选择器 */
			}
				
			.banner>ul>li.active{
				opacity:1;
				/* 子元素选择器 */
			}
			
			.banner>ol{
				width:200px;
				height:30px;
				position:absolute;
				left:30px;
				bottom:30px;
				background-color: rgba(0,0,0,.5);
				display:flex;
				/*flex布局*/
				jusit-content:space-around;
				align-items:center;
				border-radius:15px;
				/* 子元素选择器 */
			}
			.banner>ol>li{
				width:20px;
				height:20px;
				background-color: #fff;
				border-radius:50%;
				cursor:pointer;
				/* 子元素选择器 */
			}
			
			.banner>ol>li.active{
				background-color:orange;
				/* 子元素选择器 */
			}
			
			.banner>div{
				width:40px;
				height:60px;
				position:absolute;
				top:50%;
				transform:translateY(-50%);
				background-color:rgba(0,0,0,.5) ;
				
				display:flex;
				justify-content:center;
				align-items:center;
				font-size:30px;
				color:#fff;
				/* 子元素选择器 */
			}
			
			.banner>div.left{
				left:0;
				/* 子元素选择器 */
			}
			
			.banner>div.right{
				right:0;
				/* 子元素选择器 */
			}
			
		</style>

script部分

	<script>
			//获取到所有承载图片的li  和所有承载焦点的li
			var imgs = document.querySelectorAll('ul>li')
			var points = document.querySelectorAll('ol>li')
			var banner = document.querySelector('.banner')
			
			//准备一个变量，表示当前是第几张，默认是0，因为默认显示的是索引的第 0 张
			var index = 0
			
			//书写一个切换一张的函数
			//约定：
			//  参数为true,我们切换下一张
			//    参数为false,我们切换上一张
			//    参数为  数字，我们切换到指定索引的哪一张
			
			function changeOne(type){
				// 1.让当前这一张消失
				imgs[index].className=''
				points[index].className=''
				
				
				//2.根据type  传递来的参数   来切换index的值
				if(type === true){
					index++
				}else if(type === false)
				{
					index--
				}else{
					index = type
				}
				
				//判定一下   index 的边界值
				if(index >= imgs.length){
					index = 0
				}
				if(index<0){
					index = imgs.leng-1
				}
				
				//3. 让改变后的这一张显示出来
				imgs[index].className = 'active'
				points[index].className='active'
			}
			
			//给轮播图区域  盒子绑定点击事件
			banner.onclick=function(e){
				//判断点击的是左按钮
				if(e.target.className === 'left'){
					console.log('点击的是左按钮')
					//切换上一张，调用changeOne 方法传递参数为false
					changeOne(false)
				}
				
				//判断点击的是右按钮
				if(e.target.className==='right'){
					console.log('点击的是右按钮')
					//切换下一张，调用changeOne 方法传递参数为true
					changeOne(true)
				}
				
				//判断电机的是焦点盒子
				if(e.target.dataset.name ==='point'){
					console.log('点击的是焦点盒子')
					//拿到自己身上记录的索引
					var i = e.target.dataset.i-0
					//切换某一张，调用changeOne 方法传递参数为要切换的索引
					changeOne(i)
					}
				}
			
			//自动切换功能
			setInterval(function(){
				//切换到下一张
				changeOne(true)
			},5000)
		</script>

html完整代码可直接下载