轮播图第二版(js原生)

实现功能:

1.单击左右两边按钮，可以滚动

2.页面加载完有定时器，循环播放

3.单击“小圆点”会滚动，“小圆点”对应图片显示

4.当你点击过快，不会出现空白（不做处理，点击过快，图片会消失）

5.“小圆点”是动态创建，在js里面加入，你加了多少张图片，对应有多少个“小圆点”出来

6.当你点击按钮，“小圆点’的样式会对应改变

效果图:

CSS代码：给大div一个:over-flow:hidden

<style type="text/css">
			* {
				margin: 0;
				padding: 0;
				list-style: none;
			}			
			#caroul {
				left: 50%;
				transform: translateX(-50%);
				position: relative;
				 790px;
				height: 340px;
				font-size: 0;
				overflow: hidden;
			}			
			ul {
				 999999px;
				height: 340px;
				position: relative;
			}
			
			ul:after {
				content: '';
				display: block;
				clear: both;
			}
			
			li {
				display: inline-block;
				 790px;
				height: 340px;
			}
			
			img {
				 790px;
				height: 340px;
			}
			
			#left,
			#right {
				position: absolute;
				 150px;
				height: 340px;
				background: rgba(0, 0, 0, .2);
				font-size: 30px;
				text-align: center;
				line-height: 340px;
				top: 0;
				z-index: 1;
				cursor: pointer;
			}
			
			#left {
				left: 0;
			}
			
			#right {
				right: 0;
			}
			
			span {
				/*display: block;*/
				text-align: center;
				 30px;
				height: 30px;
				background: yellow;
				border-radius: 50%;
				float: left;
				margin: 0 1px;
				cursor: pointer;
				transition: 0.2s linear;
			}
			
			.btn {
				position: absolute;
				bottom: 0;
				left: 50%;
				transform: translateX(-50%);
				/* 300px;*/
				height: auto;
			}
		</style>

　　HTML代码:注意格式

<div id="caroul">
			<div id="left">向左</div>
			<ul id="ul">
				<li><img src="img/campIcon_01.jpg" alt="" /></li>
				<li><img src="img/campIcon_02.jpg" alt="" /></li>
				<li><img src="img/campIcon_03.jpg" alt="" /></li>
				<li><img src="img/campIcon_03.jpg" alt="" /></li>
				<li><img src="img/campIcon_02.jpg" alt="" /></li>
				<li><img src="img/campIcon_02.jpg" alt="" /></li>
				<li><img src="img/campIcon_02.jpg" alt="" /></li>
				<li><img src="img/campIcon_02.jpg" alt="" /></li>
				<li><img src="img/campIcon_04.jpg" alt="" /></li>
			</ul>
			<div id="right">向右</div>
			<div class="btn">
				这里是动态创建“小圆点”
			</div>
</div>

　　创建DOM：

　　　　　　　　　　　　　　var caroul=document.getElementById('caroul');
			var left = document.getElementById('left');
			var right = document.getElementById('right');
			var ul = document.getElementById('ul');
			var li = document.querySelectorAll('li');
			var lis = li.length;
			var cloneLI = li[0].cloneNode(true); //复制第一张
			var clonelastLI = li[lis - 1].cloneNode(true); //复制最后一张
			ul.appendChild(cloneLI); //加载末尾
			ul.insertBefore(clonelastLI, li[0]); //加载第一张之前
			var width = li[0].offsetWidth; //获取ul宽度
			ul.style.transform = 'translateX(-' + width + 'px)'; //让第一张显示，因为前面还有一张			
			var btn = true; //定义开关按钮
			//当前轮播的索引
			var i = 1;//初始值为1
			var m;

　　动态创建“小圆点”

　　　　　　　　　　　　　　//动态创建点
			var click=document.getElementsByClassName('btn')[0];	
			for(var x=0;x<lis;x++){
				var dian=document.createElement('span');				
				click.appendChild(dian);
			}
			var span = document.getElementsByTagName('span');		
			span[0].style.background = 'gray';
			for(var y=0;y<span.length;y++){
				span[y].setAttribute('id',y+1);
			}
			click.style.width=span.length*span.offsetWidth+"px";

　　单击右边按钮:

　　　　　　　　　　　　　　　　function goRight() {
				btn = false;	
				i++; //每一张的宽度 * 索引									
				ul.style.transform = 'translateX(-' + (i * width) + 'px)'; //每一次走i * width的距离				
				ul.style.transition = 'all .2s linear'; //添加动画	
				//四个点的触发事件
				for(var j = 0; j < span.length; j++) {
					span[j].style.background = 'yellow';
				}
				if(i-1<span.length){
					span[i - 1].style.background = 'gray';
				}
				else{
					span[0].style.background = 'gray';
				}												
				//监听transition结束的时候
				ul.addEventListener("transitionend", function() {
					btn = true;
					if(i == li.length + 1) {
						//到达轮播的最后一张（克隆第一张的那个）
						//重置动画时间，瞬间完成					
						ul.style.transition = 'none';						
						i = 1;
						//回到起始位置
						ul.style.transform = 'translateX(-' + i * width + 'px)';
						//重新计算样式，阻断线程
//						setTimeout(0);
//						ul.style.transition = 'all 0s linear';
					}

				})
			}

　　阻断事件和定时器:

//阻断事件，当点击一次时，btn为false,当监听事件执行完，btn为true，如果在没有执行完监听事件，btn还是为false，goright()事件不起作用
			right.addEventListener('click',function(){
				if(btn==true){
					goRight();
				}
			})
			//定时器
			var time_right=window.setInterval(goRight,2000);
			//事件取消和开始
			function over(){			
					caroul.addEventListener('mouseover',function(){
						clearInterval(time_right);
					})
					caroul.addEventListener('mouseout',function(){
						time_right=window.setInterval(goRight,2000);
					})				
			}over();

　　“小圆点”的单击事件：

//四个点的点击事件			
			function spans() {
				for(var m= 0; m < span.length; m++) {
					span[m].addEventListener('click', function(e) {
						var x = parseInt(e.target.id);
						i=x;
						ul.style.transform = 'translateX(-' + x* width + 'px)';
						ul.style.transition = 'all .2s linear';
						for(var j = 0; j < span.length; j++) {
							span[j].style.background = 'yellow';
						}
						span[x-1].style.background = 'gray';
					})
					
				}
			}
			spans();

　　单击左边按钮:

　　　　　　　　　　　　　　　　　function goLeft() {
				btn = false;					
				i--; //每一张的宽度 * 索引	
				ul.style.transform = 'translateX(-' + (i * width) + 'px)'; //走到第一张的前一张
				ul.style.transition = 'all .2s linear'; //添加动画			
				//点的背景色
				for(var j = 0; j < span.length; j++) {
					span[j].style.background = 'yellow';
				}				
				if(i>0){
					span[i - 1].style.background = 'gray';
				}
				else{
					span[span.length-1].style.background = 'gray';
				}		

							
				//监听transition结束的时候
				ul.addEventListener("transitionend", function() {
					btn = true;
					if(i == 0) {
						//重置动画时间，瞬间完成
						span[span.length-1].style.background = 'gray';
						ul.style.transition = 'none';
						i = li.length;
						ul.style.transform = 'translateX(-' + i * width + 'px)';
					}

				})
			}
			//阻断事件，当点击一次时，btn为false,当监听事件执行完，btn为true，如果在没有执行完监听事件，btn还是为false，goright()事件不起作用
			left.addEventListener('click',function(){
				if(btn==true){
					goLeft();
				}
			})

太简单了！！！可也花了我三天时间，没办法，笨有笨的解决方法。