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;
}
//每次点击时,判断