javaScript系列---【轮播图】
<div class="box">
<ul class="imgList">
</ul>
<div class="btn">
<span class="leftBtn"></span>
<span class="rightBtn"></span>
</div>
<div class="circle">
<ul>
<li class="active"></li>
<li></li>
<li></li>
</ul>
</div>
</div>
<script> // 获取元素 var box = document.querySelector('.box'); var imgList = document.querySelector('.imgList'); var leftBtn = document.querySelector('.leftBtn'); var rightBtn = document.querySelector('.rightBtn'); var circleLis = document.querySelectorAll('.circle li'); ajax({ type: 'get', url: './data/banner.json', success: function (res) { // 第一步:遍历数据 获取数据 for (var i = 0; i < res.data.length; i++) { imgList.innerHTML += '<li><a href=""><img src=' + res.data[i].coverimg + ' alt=""></a></li>'; } // 声明变量记录图片编号(0-2, 3是临时工假0) var index = 0; // 第二步:绑定事件--点击右按钮 rightBtn.onclick = rightBtnHandler; function rightBtnHandler() { // 判断是否正在动画,如果在动画就直接结束 if (imgList.isAnimate) return; // 编号++ index++; change(); } // 自动轮播 var timer = setInterval(rightBtnHandler, 3000); // 鼠标进入box,停止轮播 box.onmouseenter = function () { clearInterval(timer); } // 鼠标离开box,继续轮播 box.onmouseleave = function () { timer = setInterval(rightBtnHandler, 3000); } // 第二步:绑定事件--点击左按钮 leftBtn.onclick = function () { // 判断是否正在动画,如果在动画就直接结束 if (imgList.isAnimate) return; // 编号-- index--; change(); } function change() { // 当点击左按钮要从0到2时 if (index < 0) { // 瞬间来到假0位置 imgList.style.left = -1920 * 3 + 'px'; // 把编号变为2 index = 2; } // 根据编号移动imgList bufferMove(imgList, { left: -1920 * index }, function () { // 如果有2到假0动画完成,瞬间回到真0位置, 图片编号跟随变化为0 if (index == 3) { imgList.style.left = '0px'; index = 0; } }); // 根据index修改小圆点 for (var i = 0; i < circleLis.length; i++) { circleLis[i].className = ''; } circleLis[index > 2 ? 0 : index].className = 'active'; } } });
</script>
// 缓冲运动函数 // ele: 元素 targetJson: 目标json值 callback: 回调函数 // 约定opacity在传参时手动放大100倍 function bufferMove(ele, targetJson, callback) { // 进入函数,表示元素要开始动画 ele.isAnimate = true; // 清除定时器 clearInterval(ele.timer); // 把定时器作为自定属性绑定在元素上,多个不同元素之间不会相互影响 ele.timer = setInterval(function () { // 假定已经到了终点(声明变量为true), 在forin中每次走完一步, 对当前位置进行判断, 如果有任意属性未到终点(变量变为false), 直到有一次全部都到达终点, 变量在forin执行完毕后仍为true, 停止定时器 var tag = true; // 遍历targetJson for (var attr in targetJson) { if (attr == 'opacity') { // 获取元素当前透明度(放大100倍) var nowattr = parseInt(getStyle(ele, attr) * 100); } else { var nowattr = parseInt(getStyle(ele, attr)); } // 计算步长: (目标值-当前值)/比例 var step = (targetJson[attr] - nowattr) / 10; // 对步长进行判断,如果是正方向运行向上取整,如果是负方向运行向下取整 step = step > 0 ? Math.ceil(step) : Math.floor(step); // console.log(step); // 加上步长 nowattr += step; // 赋值 if (attr == 'opacity') { // 赋值(透明度缩小100倍) ele.style[attr] = nowattr / 100; } else { ele.style[attr] = nowattr + 'px'; } // 有属性未到终点,变量变成false if (nowattr != targetJson[attr]) { tag = false; } } // 如果forin执行完毕tag仍未true,表示全部到达终点 if (tag) { clearInterval(ele.timer); // 结束动画,把isAnimate变为false ele.isAnimate = false; // 调用回调函数 // if (callback) { // callback(); // } callback && callback(); } }, 50); }
// 封装ajax // req是参数,格式json ex:{type: 'get', url: '请求路径', data: '参数', success: 回调函数} function ajax(req) { // 创建请求对象 var xhr = new XMLHttpRequest(); if (req.type.toLowerCase() == 'get') { // get // 如果有参数把参数拼接在url上 req.url = req.data ? req.url + '?' + req.data : req.url; // 配置 xhr.open('get', req.url, true); // 发送请求 xhr.send(); } else { // post // 2.配置 xhr.open('post', req.url, true); // post请求需要在发送请求前设置请求头, 设置编码方式 xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); // 3.发送 post请求的参数写在send方法中 req.data ? xhr.send(req.data) : xhr.send(); } // 监听事件 xhr.onreadystatechange = function () { if (xhr.readyState == 4) { if (xhr.status == 200) { // console.log(typeof xhr.responseText); // document.write(xhr.responseText); req.success(JSON.parse(xhr.responseText)); } } } }