轮播图共计四种方法，本期先向大家分享两种，下期会补充剩余二个方法

公共部分：

* {
				padding: 0px;
				margin: 0px;
			}
 
			.banner {
				width: 600px;
				margin: auto;
				border: 10px solid green;
				height: 350px;
				position: relative;
				/* overflow: hidden; */
			}
 
			.imgList img {
				width: 600px;
				height: 350px;
			}
 
			.imgList {
				position: absolute;
 
			}
 
			.imgList li {
				float: left;
				margin-right: 20px;
				list-style: none;
			}
 
			.circle {
				position: absolute;
				bottom: 15px;
				left: 50%;
				transform: translateX(-50%);
			}
 
			.circle a {
				width: 15px;
				height: 15px;
				background: green;
				display: block;
				border-radius: 50%;
				opacity: .8;
				float: left;
				margin-right: 10px;
			}
 
			.circle a.hover {
				background: black;
				opacity: .7;
			}
			.hover{
				background-color:red;
			}

HTML内容部分：
 

<div class="banner">
 
			<ul class="imgList">
				<li><img src="banner/1.png" /></li>
				<li><img src="banner/2.jpg" /></li>
				<li><img src="banner/3.jpg" /></li>
				<li><img src="banner/4.jpg" /></li>
 
			</ul>
			<div class="circle">
				
			</div>
		</div>

第一种方法的js内容：

    var imgList = document.querySelector('.imgList');
            var banner = document.querySelector('.banner');
            var circle = document.querySelector('.circle');
            //获取轮播图图片的长度  每个图片的宽度为620px  并将整体的宽度值赋给ul;
            window.οnlοad=function(){
                imgList.style.width = imgList.children.length * 620 + "px";
                //通过for循环，根据ul子标签的长度，创建相应的a标签个数；
                for (var i = 0; i < imgList.children.length; i++) {
                    var aNub = document.createElement('a');
                    //上面创建好a标签后，我们将建好的a标签放置circle后面依次排列
                    circle.appendChild(aNub);
                    aNub.setAttribute('index', i);        
         
                }
                circle.addEventListener('click',function(e){
                  var thisindex =e.target.getAttribute('index');
                  imgList.style.left=-thisindex*620+"px";
                  console.log(e.target.nodeName);
                   if(e.target.nodeName!='A'){
                       //返回false 即 退出操作
                       return false;
                   }
                    // thisIndex = e.target.getAttribute('index');
                    //调用小圆点改变样式的函数
                    // circlechange();
                })
            } 

第二种方法的js内容：

    var imgList = document.querySelector('.imgList');
            var banner = document.querySelector('.banner');
            var circle = document.querySelector('.circle');
            var circleA = circle.children;
            var thisIndex = 0;
            //获取轮播图图片的长度  每个图片的宽度为620px  并将整体的宽度值赋给ul;
            window.οnlοad=function(){
                imgList.style.width = imgList.children.length * 620 + "px";
                //通过for循环，根据ul子标签的长度，创建相应的a标签个数；
                for (var i = 0; i < imgList.children.length; i++) {
                    var aNub = document.createElement('a');
                    //上面创建好a标签后，我们将建好的a标签放置circle后面依次排列
                    circle.appendChild(aNub);
                    aNub.setAttribute('index', i);                

    let thisIndex=aNub.getAttribute('index');
                        aNub.οnclick=function(){
                          imgList.style.left=-thisIndex*620+"px";
                        }    

//为了后面的创建及编写需要，我们再创建一个index属性 
                    // console.log(index);        

}