/*轮播图*/
function bannerEffect(){
/*1.设置修改轮播图的页面结构
* a.在开始位置添加原始的最后一张图片
* b.在结束位置添加原始的第一张图片*/
/*1.1.获取轮播图结构*/
var banner=document.querySelector(".jd_banner");
/*1.2.获取图片容器*/
var imgBox=banner.querySelector("ul:first-of-type");
/*1.3.获取原始的第一张图片*/
var first=imgBox.querySelector("li:first-of-type");
/*1.4.获取原始的最后一张图片*/
var last=imgBox.querySelector("li:last-of-type");
/*1.5.在首尾插入两张图片 cloneNode:复制一个dom元素*/
imgBox.appendChild(first.cloneNode(true));
/*insertBefore(需要插入的dom元素，位置)*/
imgBox.insertBefore(last.cloneNode(true),imgBox.firstChild);
/*2.设置对应的样式*/
/*2.1获取所有li元素*/
var lis=imgBox.querySelectorAll("li");
/*2.2 获取li元素的数量*/
var count=lis.length;
/*2.3.获取banner的宽度*/
var bannerWidth=banner.offsetWidth;
/*2.4 设置图片盒子的宽度*/
imgBox.style.width=count*bannerWidth+"px";
/*2.5 设置每一个li(图片)元素的宽度*/
for(var i=0;i<lis.length;i++){
lis[i].style.width=bannerWidth+"px";
}
/*定义图片索引:图片已经有一个宽度的默认偏移*/
var index=1;
/*3.设置默认的偏移*/
imgBox.style.left=-bannerWidth+"px";
/*4.当屏幕变化的时候，重新计算宽度*/
window.onresize=function(){
/*4.1.获取banner的宽度,覆盖全局的宽度值*/
bannerWidth=banner.offsetWidth;
/*4.2 设置图片盒子的宽度*/
imgBox.style.width=count*bannerWidth+"px";
/*4.3设置每一个li(图片)元素的宽度*/
for(var i=0;i<lis.length;i++){
lis[i].style.width=bannerWidth+"px";
}
/*4.4重新设置定位值*/
imgBox.style.left=-index*bannerWidth+"px";
}
var timerId;
/*5.实现自动轮播*/
var startTime=function(){
timerId=setInterval(function(){
/*5.1 变换索引*/
index++;
/*5.2.添加过渡效果*/
imgBox.style.transition="left 0.5s ease-in-out";
/*5.3 设置偏移*/
imgBox.style.left=(-index*bannerWidth)+"px";
/*5.4 判断是否到最后一张，如果是则*/
setTimeout(function(){
if(index==count-1){
console.log(index);
index=1;
/*如果一个元素的某个属性之前添加过过渡效果，那么过渡属性会一直存在，如果不想要，则需要清除过渡效果*/
/*关闭过渡效果*/
imgBox.style.transition="none";
/*偏移到指定的位置*/
imgBox.style.left=(-index*bannerWidth)+"px";
}
},500);
},2000);
}
startTime();
/*6.实现手动轮播*/
var startX,moveX,distanceX;
/*为图片添加触摸事件--触摸开始*/
imgBox.addEventListener("touchstart",function(e){
/*清除定时器*/
clearInterval(timerId);
/*获取当前手指的起始位置*/
startX= e.targetTouches[0].clientX;
});
/*为图片添加触摸事件--滑动过程*/
imgBox.addEventListener("touchmove",function(e){
/*记录手指在滑动过程中的位置*/
moveX= e.targetTouches[0].clientX;
/*计算坐标的差异*/
distanceX=moveX-startX;
/*为了保证效果正常，将之前可能添加的过渡样式清除*/
imgBox.style.transition="none";
/*实现元素的偏移 left参照最原始的坐标
* 重大细节：本次的滑动操作应该基于之前轮播图已经偏移的距离*/
imgBox.style.left=(-index*bannerWidth + distanceX)+"px";
});
/*添加触摸结束事件*/
/*touchend:松开手指触发*/
imgBox.addEventListener("touchend",function(e){
/*获取当前滑动的距离，判断距离是否超出指定的范围 100px*/
if(Math.abs(distanceX) > 100){
/*判断滑动的方向*/
if(distanceX > 0){//上一张
index--;
}
else{ //下一张
index++;
}
/*翻页*/
imgBox.style.transition="left 0.5s ease-in-out";
imgBox.style.left=-index*bannerWidth+"px";
}
else if(Math.abs(distanceX) > 0){ //得保证用户确实进行过滑动操作
/*回弹*/
imgBox.style.transition="left 0.5s ease-in-out";
imgBox.style.left=-index*bannerWidth+"px";
}
//重新开启定时器
startTime();
});
/*webkitTransitionEnd:可以监听当前元素的过渡效果执行完毕，当一个元素的过渡效果执行完毕的时候，会触发这个事件*/
imgBox.addEventListener("webkitTransitionEnd",function(){
/*如果到了最后一张(count-1)，回到索引1*/
/*如果到了第一张(0)，回到索引count-2*/
if(index==count-1){
index=1;
/*清除过渡*/
imgBox.style.transition="none";
/*设置偏移*/
imgBox.style.left=-index*bannerWidth+"px";
}
else if(index==0){
index=count-2;
/*清除过渡*/
imgBox.style.transition="none";
/*设置偏移*/
imgBox.style.left=-index*bannerWidth+"px";
}
});
}