轮播图

<div class="jd_banner">
            <!-- 图片 -->
            <ul class="jd_bannerImg clearfix">
                <li>
                    <a href="javascript:;">
                        <img src="uploads/l1.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="javascript:;">
                        <img src="uploads/l2.jpg" alt="">
                    </a> 
                </li>
                <li>
                    <a href="javascript:;">
                        <img src="uploads/l3.jpg" alt="">  
                    </a>  
                </li>
                <li>
                    <a href="javascript:;">
                        <img src="uploads/l4.jpg" alt="">
                    </a> 
                </li>
                <li>
                    <a href="javascript:;">
                        <img src="uploads/l5.jpg" alt=""> 
                    </a> 
                </li>
                <li>
                    <a href="javascript:;">
                        <img src="uploads/l6.jpg" alt="">
                    </a> 
                </li>
                <li>
                    <a href="javascript:;">
                        <img src="uploads/l7.jpg" alt="">
                    </a> 
                </li>
                <li>
                    <a href="javascript:;">
                        <img src="uploads/l8.jpg" alt="">
                    </a> 
                </li>
            </ul>
            <div class="jd_bannerCircle">
                <ul class="jd_bannerLi">
                    <li class="active"></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </div>
        </div>

//轮播图
function bannerEffect(){
// 自动轮播图
//1.1获取轮播图结构
var banner=document.querySelector(".jd_banner");
//1.2获取ul块事件
var bannerImg=document.querySelector("ul:first-of-type");
//console.log(bannerImg);
//1.3获取原始的第一张图片
var first=bannerImg.querySelector("li:first-of-type");
//1.4获取原始的最后一张图片
var last=bannerImg.querySelector("li:last-of-type");
//1.5将两张图片插入到bannerImg容器中，用cloneNode(true)复制一个DOm元素
//1.6 将第一张图片插入到最后
bannerImg.appendChild(first.cloneNode(true));
//1.7 将最后一张图片插入到第一张图片的前面
bannerImg.insertBefore(last.cloneNode(true),first);
//2.1获取所有li事件
var lis=bannerImg.querySelectorAll("li");
//2.2获取所有lis个数
var count=lis.length;
console.log(count);
//2.3获取banner的宽度
var bannerWidth=banner.offsetWidth;
//console.log(bannerWidth);
//2.4获取ul下面li个数中总宽度就是为ul存放图片总宽度
bannerImg.style.width=bannerWidth*count+"px";
//2.5给每个li添加宽度 循环遍历
for(var i=0;i<count;i++){
lis[i].style.width=bannerWidth+"px";
}
var index=1;
bannerImg.style.left=-bannerWidth+"px";

//当屏幕发生变化的时候，需要重新获取宽度
window.onresize=function(){
//3.1需要重新获取banner的宽度
bannerWidth=banner.offsetWidth;
//3.2获取ul下面li个数中总宽度就是为ul存放图片总宽度
bannerImg.style.width=bannerWidth*count+"px";
//3.3给每个li添加宽度 循环遍历
for(var i=0;i<count;i++){
lis[i].style.width=bannerWidth+"px";
}
//重新计算偏移值left
bannerImg.style.left=(-bannerWidth*index)+"px";

}
// 点标记
var setIndicator=function(index){
var bannerCircle=document.querySelector(".jd_bannerCircle");
console.log(bannerCircle,9999);
var indicator=bannerCircle.querySelector("ul:last-of-type").querySelectorAll("li");
console.log(indicator,0000);
for(var i=0;i<indicator.length;i++){
indicator[i].classList.remove("active")
}
//为当前li添加active样式
indicator[index-1].classList.add("active");
}
var timerId;
var startTime=function(){
timerId= setInterval(function(){
index++;
// 添加过度效果
bannerImg.style.transition="left 0.3s ease-in-out";
bannerImg.style.left=-bannerWidth*index+"px";
//判断是否是最后一张图片
setTimeout(function(){
if(index==count-1){
index=1;
bannerImg.style.transition="none";
//偏移值
bannerImg.style.left=(-bannerWidth*index)+"px";
}
},500);
},1000);
}
startTime();
// 手动轮播图
var startX,moveX,disX;
/*标记当前过渡效果是否已经执行完毕*/
var isEnd=true;
// 为图片添加触摸事件，触摸开始
bannerImg.addEventListener("touchstart",function(e){
//console.log(333);
// 清除定时器
clearInterval(timerId);
startX=e.targetTouches[0].clientX;

});
//为图片添加触摸事件，触摸移动
bannerImg.addEventListener("touchmove",function(e){
// console.log(123);
if(isEnd==true){
moveX= e.targetTouches[0].clientX;
disX=moveX-startX;
//为了保证效果需要将之前的过度效果清除
bannerImg.style.transition="none";
//计算bannerImg偏移值
bannerImg.style.left=(-index*bannerWidth+disX)+"px";
// console.log(bannerImg.style.left);
}
});


//为图片添加结束事件，触摸结束
bannerImg.addEventListener("touchend",function(e){
/*松开手指，标记当前过渡效果正在执行*/
isEnd=false;
//获取当前滑动距离，去绝对值，当超过100px,就滑动下一张
if(Math.abs(disX)>100){

//判断滑动方向
if(disX>0){
index--; //上一张

}
else{
index++; //下一张

}
bannerImg.style.transition="left 0.5s ease-in-out";
bannerImg.style.left=(-index*bannerWidth)+"px";
console.log(333);
}
else if(Math.abs(disX>0)){
//回弹
bannerImg.style.transition="left 0.5s ease-in-out";
bannerImg.style.left=-index*bannerWidth+"px";
}
/*将上一次move所产生的数据重置为0*/
startX=0;
moveX=0;
disX=0;
});
/*webkitTransitionEnd:可以监听当前元素的过渡效果执行完毕，当一个元素的过渡效果执行完毕的时候，会触发这个事件*/
bannerImg.addEventListener("webkitTransitionEnd",function(){
/*如果到了最后一张(count-1)，回到索引1*/
/*如果到了第一张(0)，回到索引count-2*/
if(index==count-1){
index=1;
/*清除过渡*/
bannerImg.style.transition="none";
/*设置偏移*/
bannerImg.style.left=-index*bannerWidth+"px";
}
else if(index==0){
index=count-2;
/*清除过渡*/
bannerImg.style.transition="none";
/*设置偏移*/
bannerImg.style.left=-index*bannerWidth+"px";
}
setTimeout(function(){
setIndicator(index);
isEnd=true;
/*清除之前添加的定时器*/
clearInterval(timerId);
//重新开启定时器
startTime();
},100);
});
}