轮播图的两种方法及自动轮播

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

公共部分：

* {
				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');
         window.οnlοad=function()

   //获取轮播图图片的长度  每个图片的宽度为620px  并将整体的宽度值赋给ul;
                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);        

}

自动轮播部分：

css，及HTML内容与上同步；

js调用内容：

function animation(obj, target, callback) {
    clearInterval(obj.timer);//清除obj的timer方法，防止动画叠加
    obj.timer = setInterval(function () { //为元素对象添加timer方法，减少内存消耗 obj是全局对象，为其添加的方法不会随着回调函数结束而销毁
        var step = (target - obj.offsetLeft) / 10;//一个动作分十次做完，所以会有过程 减速
        //step不为整数时会出问题，前进时向上取值，后退时向下取值，往绝对值较大数值靠拢
        step = step > 0 ? Math.ceil(step) : Math.floor(step);
        if (obj.offsetLeft == target) {//前进与后退共用判断语句 ==
            clearInterval(obj.timer);
            /*  if (callback) {//判断是否有回调函数参数传递
                 callback();//调用
             } */
            // 逻辑与运算
            callback && callback();
        }
        else {//不写会影响if判断
            //步长为固定值：匀速；
            // obj.style.left = obj.offsetLeft + 1 + 'px';
            //缓动动画，算法：步长=（目标值-状态值）/ 10(可随机取值)
            obj.style.left = obj.offsetLeft + step + 'px';

        }
    }, 15)
}

js使用内容部分：

var imgList = document.querySelector('.imgList');
			var circle = document.querySelector('.circle');
			var circleA = circle.children;
			var thisIndex = 0;
			var banner = document.querySelector('.banner');
			//获取视口
			var banWidth = banner.offsetWidth;
			window.onload = function() {
				imgList.style.width = imgList.children.length * 620 + 'px';
				for (var i = 0; i < imgList.children.length; i++) {
					var aNode = document.createElement('a');
					circle.appendChild(aNode);
					aNode.setAttribute('index', i);
				}

				var num = 0;
				circle.addEventListener('click', function(e) {

					if (e.target.nodeName != 'A') {
						return false;
					}
					thisIndex = e.target.getAttribute('index');
					imgList.style.left = -thisIndex * 620 + 'px';
                      circlechange();
				})


                //自动轮播的定时器部分；
				setInterval(function(e) {
					if (num == imgList.children.length - 1) {
						//恢复初始
						imgList.style.left = 0 + 'px';
						num = 0;
					}
					num++;
					//添加动画效果
					animation(imgList, -num * banWidth);
				},2000)


				function circlechange() {
					//先清除样式 再添加样式
					for (var i = 0; i < circleA.length; i++) {
						circleA[i].className = '';
					}
					//默认设置0位置样式
					circleA[thisIndex].className = 'hover';
				}
			}