原生轮播图

好久不见. 提交于 2020-02-11 21:21:56
原生轮播图/* 功能说明: 1. 点击向右(左)的图标, 平滑切换到下(上)一页 2. 无限循环切换: 第一页的上一页为最后页, 最后一页的下一页是第一页 3. 每隔3s自动滑动到下一页 4. 当鼠标进入图片区域时, 自动切换停止, 当鼠标离开后,又开始自动切换 5. 切换页面时, 下面的圆点也同步更新 6. 点击圆点图标切换到对应的页 */
/**
   * 根据id得到对应的标签对象
   * @param {Object} id
   */
  function $(id) {
    return document.getElementById(id);
  }
/**
   * 给指定id对应的元素绑定点击监听
   * @param {Object} id
   * @param {Object} callback
   */
  function click(id, callback) {
    $(id).onclick = callback;
  }
  1 window.onload = function () {
  2 
  3     var listDiv = $("list");
  4     var totalTime = 400;//换页的总时间
  5     var intervalTime = 20;//移动的间隔时间
  6     var intervalId;//循环定时器的id(翻页中的不移动)
  7     var imgCount = 5; //图片的个数
  8     var moveing = false; //是否正在移动中
  9     var index = 0;//当前显示图片的下标(从0开始到imgCount-1)
 10     var buttonSpans = $("buttons").children; //所有标识圆点标签的集合
 11     var containerDiv = $("container");
 12     var intervalId2; //循环定时器的id(自动翻页)
 13 
 14     //给下一页绑定点击监听
 15     click("next", function () {
 16       //切换到下一页
 17       nextPage(true);
 18     });
 19 
 20     //给上一页绑定点击监听
 21     click("prev", function () {
 22       //切换到上一页
 23       nextPage(false);
 24     });
 25 
 26     //给所有的提示圆点绑定点击监听
 27     clickButtons();
 28 
 29     //启动定时自动翻页
 30     autoNextPage();
 31     //给容器div绑定鼠标移入的监听: 停止自动翻页
 32     containerDiv.onmouseover = function () {
 33       clearInterval(intervalId2);
 34     }
 35     //给容器div绑定鼠标移出的监听: 启动自动翻页
 36     containerDiv.onmouseout = function () {
 37       autoNextPage();
 38     };
 39 
 40     /**
 41      * 启动定时自动翻页
 42      */
 43     function autoNextPage() {
 44       intervalId2 = setInterval(function () {
 45         nextPage(true);
 46       }, 3000);
 47     }
 48 
 49     /**
 50      * 切换到下一页/上一页
 51      * true 下
 52      * false 上
 53      * index 目标页
 54      * @param {Object} next true
 55      */
 56     function nextPage(next) {
 57 
 58       //如果正在移动, 直接结束
 59       if (moveing) {
 60         return;
 61       }
 62       //标识正在移动
 63       moveing = true;
 64 
 65       //需要进行的总偏移量
 66       var offset;
 67       if (typeof next === 'boolean') {
 68         offset = next ? -600 : 600;
 69       } else {
 70         offset = -600 * (next - index);
 71       }
 72       //var offset = next ? -600 : 600;
 73       //每个小移动需要做的偏移量
 74       var itemOffset = offset / (totalTime / intervalTime);
 75       //切换完成时div的left的坐标
 76       var targetLeft = listDiv.offsetLeft + offset;
 77       //循环定时器
 78       intervalId = setInterval(function () {
 79         //var currentLeft = listDiv.offsetLeft;
 80         //得到当前这次偏移的样式left坐标
 81         var left = listDiv.offsetLeft + itemOffset;
 82         //如果已经到达目标位置
 83         if (left == targetLeft) {
 84           //移除定时器
 85           clearInterval(intervalId);
 86 
 87           //如果当前到达的是最左边的图片, 跳转到右边第二张图片的位置
 88           if (left == 0) {
 89             left = -imgCount * 600;
 90           } else if (left == -600 * (imgCount + 1)) {//如果当前到达的是最右边的图片, 跳转到左边第二张图片的位置
 91             left = -600;
 92           }
 93           //标识没有移动了
 94           moveing = false;
 95         }
 96         //指定div新的left坐标
 97         listDiv.style.left = left + "px";
 98       }, intervalTime);
 99 
100       //更新标识圆点
101       updateButtons(next);
102     }
103 
104     /**
105      * 更新标识圆点
106      * @param {Object} next
107      */
108     function updateButtons(next) {
109       //将当前的圆点更新为一般圆点
110       buttonSpans[index].removeAttribute("class");
111       //计算出目标圆点的下标
112       var targetIndex;
113       if (typeof next == 'boolean') {
114         if (next) {
115           targetIndex = index + 1;
116           if (targetIndex == imgCount) {
117             targetIndex = 0;
118           }
119         } else {
120           targetIndex = index - 1;
121           if (targetIndex == -1) {
122             targetIndex = imgCount - 1;
123           }
124         }
125       } else {
126         targetIndex = next;
127       }
128       //将标圆点的下标更新为当前下标
129       index = targetIndex;
130       //将目标圆点设置为当前圆点
131       buttonSpans[index].className = 'on';
132     }
133 
134     /**
135      * 给所有的圆点设置点击监听
136      */
137     function clickButtons() {
138       for (var i = 0, length = buttonSpans.length; i < length; i++) {
139 
140         buttonSpans[i].index = i;
141         buttonSpans[i].onclick = function () {
142           nextPage(this.index);
143         };
144 
145         /*
146          (function (index) {
147          buttonSpans[index].onclick = function () {
148          nextPage(index);
149          };
150          })(i);
151          */
152       }
153     }
154   };

 

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!