最近用原生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;
最终显示效果