js轮播图

样式定位设计

1.要写一个轮播图模块，首先我们设置一个大的盒子wrap来装下这些内容。我们第一步先插入图片，将图片合并在同一块区域以后，插入左右按钮，分别可以控制图片向前播放和向后播放。样式插入完以后开始写js函数。

.wrap {
         
width: 500px;            
height: 500px;            
margin: 0 auto;       
}
<div class="wrap"></div>
<!--最大的盒子-->

（1）轮播图应该是使用列表，将每个图片存为一行，由于轮播图在一个地方切换图片，所以将长列表合并在同一个地方，

img {
               
width: 500px;            
height: 500px;        
}        

<ul class="list">           
	<li class="item">
	<img class="lunbo" src="33.jpg"></li>           
	<li class="item">
	<img class="lunbo" src="22.jpg"></li>           
	<li class="item">
	<img class="lunbo" src="11.jpg"></li>       
</ul>

（2）将ul的样式设置为none以去掉列表前面的小黑点的样式。因为是相对于大盒子的定位，所以使用relative来进行定位设置。

.list {
   
	width: 200px;
	height: 200px;
	list-style: none;                        
        position: relative;        
        }

因为在之前的盒子我设置的长宽刚好就是图片的长宽，所以list样式设置图片的长宽刚好100%就行，也可以去掉列表的样式

.item {
               
	position: absolute;
	/*将图片叠加在同一个区域*/                        
        width: 100%;
	height: 100%;        
	}

设置完这里以后运行发现第三张图（最后一张图）刚好在最上面

(3)插入button按钮，位于图片的左边和右边，类名都设置成btn，用来存放两者相同的地方，不同的地方分别用id="goPre"和id=“goNext”

<button type="button" class="btn"
id="goPre"><</button>          
<button type="button" class="btn"
id="goNext">></button>

对btn进行定位，同时进行了样式的设计：

.btn {
               
	width: 50px;
        height: 50px;
        position: absolute;
	top: 250px;
     	border-radius: 100%;
        border-color: white;
        border-width: 0.1px;
        background-color: rbga(128, 128, 128, 10);
	}
.btn:hover{
   
	background-color:lightcyan;
	}     

于是我们对左右两个按钮分别进行定位：

#goPre {
               
	left: 515px;        
	}

#goNext {
               
	right: 515px;
       }

这里的按钮就设计好了

（4）设置.item active

.item.active {
               
	opacity: 1;            
	z-index: 10;
}

<ul class="list">            
<li class="itemactive"><img class="lunbo" src="11.jpg"></li>           
<li class="item"><img class="lunbo" src="22.jpg"></li>            
<li class="item"><img class="lunbo" src="33.jpg"></li>
</ul>

li class=“item active” 这句话让第一张图片成为了当前显示的图片，