原生js实现轮播图

最近用原生js写了个很初级的轮播图，记录一下。

轮播图原理

大小相同的几张图片并排，通过css布局隐藏其他图片而只显示一张图片，通过设置left偏移量的不同来显示不同的图片。

基础布局

分成图片显示框，容纳并排几张图片的容器，左右切换的箭头，显示图片顺序及点击切换图片的小圆点部分

为了无缝滑动，复制第一张图片放在最后一张图片后面作为辅助图片。

			<div id="container">
				<ul id="inner">
					<li class="img-item"><a href="#"><img src="image/pic1.jpg"/></a></li>
					<li class="img-item"><a href="#"><img src="image/pic2.jpg"/></a></li>
					<li class="img-item"><a href="#"><img src="image/pic3.jpg"/></a></li>
					<li class="img-item"><a href="#"><img src="image/pic4.jpg"/></a></li>
					<li class="img-item"><a href="#"><img src="image/pic5.jpg"/></a></li>
					<li class="img-item"><a href="#"><img src="image/pic6.jpg"/></a></li>
					<li class="img-item"><a href="#"><img src="image/pic1.jpg"/></a></li>
				</ul>
				<div>
					<div class="arrow" id="left-arrow"><</div>
					<div class="arrow" id="right-arrow">></div>
				</div>
				<ul id="circle">
					<li class="current">1</li>
					<li>2</li>
					<li>3</li>
					<li>4</li>
					<li>5</li>
					<li>6</li>
				</ul>
			</div>	

JS操作

首先获取所需的变量和属性

		var container = document.getElementById('container');
		var inner = document.getElementById('inner')
		var left = document.getElementById('left-arrow');
		var right = document.getElementById('right-arrow');
		var circleList = document.getElementById('circle').getElementsByTagName('li');
		var index = 0;
		var moveOffset = container.offsetWidth;	//图片的显示宽度，基本偏移量
		var timer;//设置定时器变量

图片切换事件，更改图片的偏移量，设置小圆点样式

function animate(){
			clearCircle();//清除所有小圆点样式
			inner.style.left = index*moveOffset*(-1) + 'px';
			if(index == circleList.length){
				//轮播到最后一张索引值与下标值相同，偏移量变为第一张，下标也变为第一张
				inner.style.left = 0;
				index = 0;
				circleList[0].className = 'current';//设置小圆点样式
			}else{
				circleList[index].className = 'current';//设置小圆点样式
			}			
		}

箭头切换事件，左箭头减少索引值，右箭头增加索引值

		//右箭头切换事件
		right.onclick = function(){
			index++;
			if(index > circleList.length){
				index = 0;				
			}
			animate();
		}
		//左箭头切换事件
		left.onclick = function(){
			index--;
			if(index < 0){
				//为了实现无缝链接，复制最后一张与第一张相同，下标变为倒数第二张的，偏移量变为最后一张的
				index = circleList.length-1;
				inner.style.left = (index+1) * moveOffset *(-1)+'px';
			}
			animate();
		}

小圆点清除样式

function clearCircle(){
			for(var i=0; i< circleList.length; i++){
				circleList[i].className = '';
			}
		}

小圆点数字对应图片顺序

for(var i=0; i< circleList.length; i++){			
			circleList[i].onclick = function(){	
				index = this.innerText-1;
				animate();
			}			
		}

自动轮播事件

function autoMove(){
			timer = setInterval(function(){
				right.onclick();
			},2000);
		}

鼠标放在图片上停止轮播，鼠标移开继续轮播

		//鼠标处于图片位置停止轮播
		container.onmouseover = function(){
			clearInterval(timer);
		}
		//鼠标移开开始轮播
		container.onmouseout = autoMove;

最终显示效果

预览地址：https://zhaohh.github.io/slideshow/lunbo.html