轮播图

//下面是html
<div class="jd_lun_bo_tu">
		<ul class="qing_chu_fu_dong">
			<li><a href="#"><img src="images/l8.jpg" alt=""></a></li>
			<li><a href="#"><img src="images/l1.jpg" alt=""></a></li>
			<li><a href="#"><img src="images/l2.jpg" alt=""></a></li>
			<li><a href="#"><img src="images/l3.jpg" alt=""></a></li>
			<li><a href="#"><img src="images/l4.jpg" alt=""></a></li>
			<li><a href="#"><img src="images/l5.jpg" alt=""></a></li>
			<li><a href="#"><img src="images/l6.jpg" alt=""></a></li>
			<li><a href="#"><img src="images/l7.jpg" alt=""></a></li>
			<li><a href="#"><img src="images/l8.jpg" alt=""></a></li>
			<li><a href="#"><img src="images/l1.jpg" alt=""></a></li>
		</ul>
		<ul>
			<li class="now"></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>
	</div>
//下面是js
<script>
	//找到轮播图
	var lun_bo_tu=document.querySelector(".jd_lun_bo_tu");
	//获取屏幕的宽度
	var ping_mu_kuang_du=lun_bo_tu.offsetWidth;
	var lun_bo_tu_tu_pian_box=lun_bo_tu.querySelector("ul:first-child");
	var lun_bo_tu_tu_dian_ul=lun_bo_tu.querySelector("ul:last-child");
	var lun_bo_tu_dian=lun_bo_tu_tu_dian_ul.querySelectorAll("li");
	//加过渡
	var jia_guo_du=function(){
		lun_bo_tu_tu_pian_box.style.transition='all 0.2s';
		lun_bo_tu_tu_pian_box.style.webkitTransition='all 0.2s';
	}
	//清过渡
	var qing_guo_du=function(){
		lun_bo_tu_tu_pian_box.style.transition='none';
		lun_bo_tu_tu_pian_box.style.webkitTransition='none';
	}
	//做位移
	var zhuo_wei_yi=function(wei_yi_chan_shu){
		lun_bo_tu_tu_pian_box.style.transform='translateX('+wei_yi_chan_shu+'px)';
		
		lun_bo_tu_tu_pian_box.style.webkitTransform='translateX('+wei_yi_chan_shu+'px)';
	}
	
	//程序的核心 hexin
	var lun_bo_tu_kai_shi_ji_shu=1;
	var ding_shi_qi=setInterval(function(){
		
		lun_bo_tu_kai_shi_ji_shu ++;
		//加过渡
		jia_guo_du();
		//做位移
		zhuo_wei_yi(-lun_bo_tu_kai_shi_ji_shu*ping_mu_kuang_du);
	},2000);
	//需要等最后一张动画结束去判断，是否瞬间定位到第一张。
	lun_bo_tu_tu_pian_box.addEventListener('transitionend',function(){
		//自动滚动的无缝
		if(lun_bo_tu_kai_shi_ji_shu>=9){
				//瞬间定位
			 	lun_bo_tu_kai_shi_ji_shu=1;
				
				//清过渡
				qing_guo_du();
				//做位移
				zhuo_wei_yi(-lun_bo_tu_kai_shi_ji_shu*ping_mu_kuang_du);
			 }
		//滑动的时候也需要无缝
			else if(lun_bo_tu_kai_shi_ji_shu<=0){
					//瞬间定位
			 	lun_bo_tu_kai_shi_ji_shu=8;
				
				//清过渡
				qing_guo_du();
				//做位移
				zhuo_wei_yi(-lun_bo_tu_kai_shi_ji_shu*ping_mu_kuang_du);		
				}
		//根据索引设置点
		lun_bo_tu_dian_fang_fa();
	
	});
	//设置点的方法
	var lun_bo_tu_dian_fang_fa=function(){
		for(var i=0;i<lun_bo_tu_dian.length ; i++){
			var obj=lun_bo_tu_dian[i];
			obj.classList.remove('now');
		}
		
		lun_bo_tu_dian[lun_bo_tu_kai_shi_ji_shu-1].classList.add('now');
	}
	//绑定滑动事件
	var x_zhou_qi_shi=0;
	var wei_yi_jie_guo=0;
	//可有可无
	var shi_fou_yi_dong=false;
	lun_bo_tu_tu_pian_box.addEventListener("touchstart",function(e){
		//清除定时器
		clearInterval(ding_shi_qi);
		//记录x轴的起始位置
		x_zhou_qi_shi=e.touches[0].clientX;
	});
	lun_bo_tu_tu_pian_box.addEventListener("touchmove",function(e){
		//记录滑动过程中的x坐标
		var x_hua_dong_zhuo_biao=e.touches[0].clientX;
		//计算位移 注意有正 负  
		wei_yi_jie_guo=x_hua_dong_zhuo_biao-x_zhou_qi_shi;
		//计算目标元素的位移
		//元素将要的定位=当前定位+手指移动的距离
		var yuan_shu_ding_wei_x=-lun_bo_tu_kai_shi_ji_shu*ping_mu_kuang_du+wei_yi_jie_guo;
		//滑动  元素随着手指的滑动做位置的改变
		qing_guo_du();
		zhuo_wei_yi(yuan_shu_ding_wei_x);
		//可有可无
		shi_fou_yi_dong=true;
		
		
	});
	lun_bo_tu_tu_pian_box.addEventListener("touchend",function(e){
		
		//可有可无
		if(shi_fou_yi_dong){
			//实现4.5
		//要使用移动的距离
			 if(Math.abs(wei_yi_jie_guo)<ping_mu_kuang_du/3){
			 	//吸附回原有图片
				jia_guo_du();
				zhuo_wei_yi(-lun_bo_tu_kai_shi_ji_shu*ping_mu_kuang_du);
			 }else{
				 //切换到下一张图片
				 //上一张  右滑动
				 if(wei_yi_jie_guo>0){
							lun_bo_tu_kai_shi_ji_shu--;
					 
						}
				 //下一张  左滑动
				 else{
							lun_bo_tu_kai_shi_ji_shu++;
						}
				 //根据lun_bo_tu_kai_shi_ji_shu去动画的移动
				 jia_guo_du();
				 zhuo_wei_yi(-lun_bo_tu_kai_shi_ji_shu*ping_mu_kuang_du);
			 }
			 }
		
		//最好做一次参数的重置 可有可无
		x_zhou_qi_shi=0;
		//可有可无
		wei_yi_jie_guo=0;
		//可有可无
		shi_fou_yi_dong=false;
		
		clearInterval(ding_shi_qi);
		//手指滑动后重新开启定时器
		ding_shi_qi=setInterval(function(){
		
		lun_bo_tu_kai_shi_ji_shu ++;
		//加过渡
		jia_guo_du();
		//做位移
		zhuo_wei_yi(-lun_bo_tu_kai_shi_ji_shu*ping_mu_kuang_du);
	},2000);
	});
	
};
</script>	

//下面是css
/*轮播图banner*/
.jd_lun_bo_tu{
	width: 100%;
	overflow: hidden;
	position: relative;
	
}
.jd_lun_bo_tu ul:first-child{
	width: 1000%;
	transform: translateX(-10%);
	-webkit-transform: translateX(-10%);
}
.jd_lun_bo_tu ul:first-child li{
	width: 10%;
	float: left;
}
.jd_lun_bo_tu ul:first-child li a{
	display: block;
	width: 100%;
}
.jd_lun_bo_tu ul:first-child li a img{
	display: block;
	width: 100%;
}
.jd_lun_bo_tu ul:last-child{
	position: absolute;
	width: 118px;
	height: 6px;
	left: 50%;
	margin-left: -59px;
	bottom: 6px;
}
.jd_lun_bo_tu ul:last-child li{
	width: 6px;
	height: 6px;
	border-radius: 3px;
	border: 1px solid #fff;
	margin-left: 10px;
	float: left;
}
.jd_lun_bo_tu ul:last-child li:first-child{
	margin-left: 0;
}
.jd_lun_bo_tu ul:last-child li.now{
	background-color: aliceblue;
}