原生JS写轮播图（理解原理）

轮播图一般用框架是很少代码就可以完成的。那么用原生js是怎么写的呢？

首先轮播的图片是在ul里的li标签里。
1.获取ul元素，因为切换图片的时候，让整个ul向左移动一个图片的长度

var bigBobj = my$("box");
    var fdivobj = bigBobj.children[0];
    var ulobj = fdivobj.children[0];
    var spanobjs = fdivobj.children[1].children;

2.然后为每个切换图片的小按钮添加index属性，加在事件开始之前。
3.获取之后添加鼠标移动上的事件
4.鼠标进入小标即清除每个图标的class，然后当前的class变成自定义有样式的
这里可以用element.className= "’;或者element.removeAttribute(“class”)来清除样式
5.之后开始调用移动的函数

  for(var i=0;i<spanobjs.length;i++){
     
        spanobjs[i].setAttribute("index",i);
        spanobjs[i].onmouseover = function(){
     
            for(var j=0;j<spanobjs.length;j++){
     
                spanobjs[j].className = "";
                //spanobjs[j].removeAttribute("class")
            }
            this.className = "current";
            index = this.getAttribute("index");
            moveanimation(ulobj,-index*730) 
        }

移动的自定义函数
详情可见链接添加链接描述

function moveanimation(element,target){
     
    clearInterval(element.timeid)
    element.timeid = setInterval(function(){
     
        var step = 30;
        var current = element.offsetLeft;
        step = current<target?step:-step;
        if(Math.abs(current-target)>Math.abs(step)){
     
            element.style.left = current+step+"px";
        }else{
     
            clearInterval(element.timeid);
            element.style.left = target+"px";
        }
    },50)
}