纯js实现轮播图

第一步

了解轮播图的原理

无缝轮播：将图片放到一排，通过改变left值来达到轮播的效果。
html：
<div id="big">
<div id="k1">
<div id="k2">
<img src="i/u=1002469206,453798154&fm=26&gp=0.jpg" />
<img src="i/u=1826811975,3277902237&fm=26&gp=0.jpg" />
<img src="i/u=2203067709,2519947503&fm=26&gp=0.jpg" />
<img src="i/u=2652008206,4240492946&fm=26&gp=0.jpg" />
<img src="i/u=3969936743,1799385820&fm=26&gp=0.jpg" />
</div>
<ul id="ul1">
<li id="b1"></li>
<li id="b2"></li>
<li id="b3"></li>
<li id="b4"></li>
<li id="b5"></li>
</ul>
</div>
<button type="button" id="d1" class="d11">></button>
<button type="button" id="d2" class="d22"><</button>
</div>
css: 通过绝对定位 将按钮放在图片的上面 并且实现将图片放到一横排取消图片之间的间距
#big　{
width: 350px;
height: 293px;
position: relative;
left: 0;
right: 0;
margin: 100px auto;
overflow:hidden;
#k1 {
#k2 {
width:500%;
position:absolute;
left: 0px;
right: 0;
img {
float: left;
width:350px;
}
}
ul {
padding-left: 150px;
padding-top: 187px;
z-index: 990;
li {
display: inline-block;
list-style-type: none;
width: 9px;
height: 9px;
border: none;
background-color: #15F510;
border-radius: 50%;
opacity: 0.7;
}
}
li:hover {
background-color:#432CEB;
}
}
.d11,.d22 {
position:absolute;
left: 0px;
right: 0;
width:30px;
height:30px;
margin-top: -120px;
opacity: 0.7;
}
#d1 {
margin-left: 320px;
margin-top:-120px;
}
button:hover {
background-color:#B1B0B0;
}
}
js：我感觉最难得的是控制图片的小圆点要跟着图片走（显示到第几张图），实现这个效果要让之前的小圆点恢复原来的颜色，并且在左右按键时也要跟着走，这个最后通过好多判断且使用同一个变量（让变量的值跟着图片不断变化）。
var k2 = document.getElementById('k2');
var k1 = document.getElementById('big');
var a1 = document.getElementById('d1');
var ul1 = document.getElementById('ul1');
var li =ul1.getElementsByTagName('li');
var a2 = document.getElementById('b1');
var num1 = 350,st,count=0,last = 0,count1,last1;
li[0].style.backgroundColor = '#432CEB';
k1.addEventListener('click',function(event){
var target = event.target;
switch(target.id){
case 'b1': fn1(1,0);break;
case 'b2': fn1(1,-350);break;
case 'b3': fn1(1,-700);break;
case 'b4': fn1(1,-1050);break;
case 'b5': fn1(1,-1400);break;
case 'd1': fn2("left",-350);break;
case 'd2': fn2('right',350);break;
}
});
k1.addEventListener('mouseout',function(event){
fn3();
});
k1.addEventListener('mousemove',function(event){
stop();
});
function fn1(temp,num) {//点击小圆点
if(temp === 1){
k2.style.left = num +'px';
}
num1 = num;
for(var i=0;i<5;i++){
if(num1 == 0 || num1 == -1750 || num1 == 700 || num1==300){
li[0].style.backgroundColor = '#432CEB';
}
if(num1 == -350){
li[1].style.backgroundColor = '#432CEB';
}
if(num1 == -700){
li[2].style.backgroundColor = '#432CEB';
}
if(num1 == -1050){
li[3].style.backgroundColor = '#432CEB';
}
if(num1 == -1400){
li[4].style.backgroundColor = '#432CEB';
}
li[i].style.backgroundColor = '#15F510';
}
}
function fn2(str,num) {
// 点击左右
num1 +=num;
if(num1 == 0 || num1 == -1750 || num1 == 700 || num1==300){
li[0].style.backgroundColor = '#432CEB';
li[4].style.backgroundColor = '#15F510';
}
if(num1 == -350){
li[1].style.backgroundColor = '#432CEB';
li[0].style.backgroundColor = '#15F510';
}
if(num1 == -700){
li[2].style.backgroundColor = '#432CEB';
li[1].style.backgroundColor = '#15F510';
}
if(num1 == -1050){
li[3].style.backgroundColor = '#432CEB';
li[2].style.backgroundColor = '#15F510';
}
if(num1 == -1400){
li[4].style.backgroundColor = '#432CEB';
li[3].style.backgroundColor = '#15F510';
}
if(str == 'left'){
// li[last].style.backgroundColor = '#15F510';
if(num1 == -1750){
num1 = 0;
}
k2.style.left = num1 + 'px';
// li[count].style.backgroundColor = '#432CEB';
// count +=1;
// last = count-1;
// if(count > 4){
// count = 0;
// }
}
if(str == 'right'){
if(num1 == 700 || num1 == 350){
num1 = -1400;
}
k2.style.left = num1 + 'px';
}
}
function fn3(){
st = setInterval(function(){
fn2("left",-350);
},2000);
}
fn3();
function stop() {
clearInterval(st);
}