又爱又恨的轮播图来了（原生JS方法）

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_04.jpg" alt="" /></li>
            </ul>
            <div id="right">向右</div>
        </div>

CSS代码:

<style type="text/css">
			* {
				margin: 0;
				padding: 0;
				list-style: none;
			}
			
			#caroul {
				position: relative;
				width: 790px;
				height: 340px;
				font-size: 0;
				/*overflow: hidden;*/
			}
			
			ul {
				/*display: none;*/
				width: 999999px;
				height: 340px;
				position: relative;
				/*transition: 0.2s linear;*/
			}
			
			li {
				display: inline-block;
				width: 790px;
				height: 340px;
			}
			
			img {
				width: 790px;
				height: 340px;
			}
			
			#left,
			#right {
				position: absolute;
				width: 150px;
				height: 340px;
				background:rgba(0,0,0,.2);
				font-size: 30px;
				text-align: center;
				line-height: 340px;
				top: 0;
				z-index: 999;
			}
			
			#left {
				left: 0;
			}
			
			#right {
				right: 0;
			}
		</style>

效果图:

公共的JS变量：

 

                                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 i = 1;

点击向右:

function goRight() {
//					btn = false;	
					i++;//每一张的宽度 * 索引									
					ul.style.transform = 'translateX(-' + (i * width) + 'px)';//每一次走i * width的距离
					ul.style.transition = 'all .2s linear';//添加动画						
					//监听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)';
						}

					})
				}
				right.addEventListener('click',goRight);

点击向左:

function goLeft() {
//					btn = false;	
					i--;//每一张的宽度 * 索引									
					ul.style.transform = 'translateX(-' + (i * width) + 'px)';//走到第一张的前一张
					ul.style.transition = 'all .2s linear';//添加动画						
					//监听transition结束的时候
					ul.addEventListener("transitionend", function() {
//						btn = true;
						if(i == 0) {
							//重置动画时间，瞬间完成
							ul.style.transition = 'none';
							i = li.length;
							ul.style.transform = 'translateX(-' + i* width + 'px)';
						}

					})
				}
				left.addEventListener('click',goLeft);

　简单吧!