使用JS制作轮播图的思路以及结构

JS实现原理：通过改变图片的偏移量来实现图片的切换
实现步骤：1、通过documnet.getElementById()获取页面需要操作的元素

window.onload=function(){
   
 
var lbt=document.getElementById("lbt");//获取轮播图父容器；
var list=document.getElementById("imgList");//获取图片列表；
var buttons=document.getElementById("Btn").getElementsByTagName("span");//获取图片切换圆点按钮；
var pre=document.getElementById("left");//获取向左切换箭头
var next=document.getElementById("right");//获取向右切换箭头； 

2、实现左右箭头的切换：给左右箭头绑定点击事件；
1)在页面图片列表的开始加上最后一张图片的附属图，在最后加上第一张图片的附属图
2)每次切换时判断切换后的位置是否大于-1610px或是小于-4830px（即是否切换到附属图的位置）：
如果大于-1610px,就把图片重新定位到真正的最后一张图的位置：-4830px;
如果小于-4830px,就把图片重新定位到真正的第一张图的位置：-1610px;

var index=1;//用于存放当前要显示的图片，初始值为第一张图片
var animated=false;//优化动画执行效果，只有当前切换动画未执行时，才能被执行。解决当前动画执行未完成时，多次点击切换按钮导致的页面卡图现象，初始值为false
 
pre.onclick=function(){
   
        //切换到当前图片左边的图片，如果当前是第一张，会切换到最后一张
        if(index==1){
   
            index=3;
        }
        //否则会切换到前一张，即index-1
        else{
   
            index-=1;    
        }
        //每次点击时，判断