轮播 多块内容 非单纯图片

//js部份
lunbo:function lunbo(){
		 var focus = document.querySelector('.banner');
		  // 获取图片容器也就是ul
		 var ul = document.querySelector("#ul-imgs");
		 console.log( ul);
		  // 获取ul下的li
		  var li = ul.children;
		  // 获取li的个数
		  var num = li.length;
		  // var num = document.querySelectorAll("#ul-imgs li").length;
		  // 获取ul的宽度
		  if (num > 0) {
              //医生在诊数量大于两人
			ul.style.width = (num + 2) * 100 + '%';//改变ul的宽
			ul.style.transform = 'translateX(-' + 100 / (num + 2) + '%)';//改变的方向，向x轴走动
			ul.appendChild(li[0].cloneNode(true));//向ul列表内插入一个克隆的li，克隆内容为ul下的第一个li;
            ul.insertBefore(li[num - 1].cloneNode(true), li[0]);
            //insertBefore 在已有的子节点前插入一个新的节点
		  } else if (num <= 1) {
			ul.style.width = num * 100 + '%';
			ul.style.transform = 'translateX(0)';
			return false
		  }
		  // 计算有几个圆点
		  // 获取父级
		  var path = document.querySelector('.banner #ul-idxs');
		  var li_path = path.children;
		  var p_num = $('.banner #ul-idxs > li').length;
		  for (var i = 0; i < num; i++) {
			var creatLi = document.createElement('li');
			path.appendChild(creatLi);
		  }
		  for (var i = 0; i < num + 2; i++) {
			li[i].style.width = 100 / (num + 2) + '%';
		  }
		  // 鼠标点击，或正在经过
		  li_path[0].classList.add('active');
		  var iNow = 1;
		  var x = -iNow * li[0].offsetWidth;
		  //在这里设置一个开关,是css运动结束后解锁
		  var bReady = true;
		  ul.addEventListener('touchstart', function (ev) {
			  clearInterval(timer);
			  if (bReady == false) {
				return;
			  }
			  bReady = false;
			  ul.style.transition = 'none';
			  var disX = ev.targetTouches[0].pageX - x;
			  var downX = ev.targetTouches[0].pageX;

			  function fnMove(ev) {
				x = ev.targetTouches[0].pageX - disX;
				ul.style.transform = 'translate3d(' + x + 'px,0,0)';
			  }
			  function fnEnd(ev) {
				var upX = ev.changedTouches[0].pageX;
				//判断是否移动距离大于50
				if (Math.abs(upX - downX) > 50) {
				  //左边移动
				  if (upX - downX < 0) {
					iNow++;
					if (iNow == li.length) {
					  iNow = li.length - 1;
					}
					if (iNow == num + 1) {
					  li_path[num - 1].classList.remove('active');
					  li_path[0].classList.add('active');
					} else {
					  li_path[iNow - 1].previousElementSibling.classList.remove('active');
					  li_path[iNow - 1].classList.add('active');
					}

				  } else {
					//右边移动
					iNow--;
					if (iNow == -1) {
					  iNow = 0;
					}
					if (iNow == 0) {
					  li_path[0].classList.remove('active');
					  li_path[num - 1].classList.add('active');
					} else {
					  li_path[iNow - 1].nextElementSibling.classList.remove('active');
					  li_path[iNow - 1].classList.add('active');
					}
				  }
				}else{

				}
				//储存此时ul的位置
				x = -iNow * li[0].offsetWidth;
				ul.style.transform = 'translate3d(' + x + 'px,0,0)';
				ul.style.transition = '300ms all ease';

				//监听li 当移动到两端的li时  瞬间移回
				function tEnd() {
				  if (iNow == num + 1) {
					iNow = 1;
				  }
				  if (iNow == 0) {
					iNow = num;
				  }
				  ul.style.transition = 'none'
				  x = -iNow * li[0].offsetWidth;
				  ul.style.transform = 'translate3d(' + x + 'px,0,0)';
				  bReady = true;
				}
				ul.addEventListener('transitionend', tEnd, false);
				//释放内存
				document.removeEventListener('touchend', fnEnd, false);
				document.removeEventListener('touchmove', fnMove, false);
			  }
			  document.addEventListener('touchmove', fnMove, false);
			  document.addEventListener('touchend', fnEnd, false);
			  //阻止默认事件
			  ev.preventDefault();
			},false);
		  //自动轮播
		  
		  var timer = setInterval(function () {
			iNow++;
			if (iNow == num + 1) {
			  x = -1 * li[0].offsetWidth;
			  li_path[num - 1].classList.remove('active');
			  li_path[0].classList.add('active');
			  ul.style.transition = 'none';
			  ul.style.transform = 'translate3d(' + 0 * li[0].offsetWidth + 'px,0,0)';
			  setTimeout(function () {
				ul.style.transition = '300ms all ease';
				ul.style.transform = 'translate3d(' + x + 'px,0,0)';
			  })
			  bReady = true;
			  iNow = 1;
			} else {
			  ul.style.transition = 'none';
			  x = -iNow * li[0].offsetWidth;
			  ul.style.transform = 'translate3d(' + x + 'px,0,0)';
			  ul.style.transition = '300ms all ease';
			  bReady = true;
			  li_path[iNow - 1].previousElementSibling.classList.remove('active');
			  li_path[iNow - 1].classList.add('active');
			  timer = 0;        
			}
		  }, 3000);
	},
	HTML部份
			<!-- 轮播图 -->
			<div class="banner">
            <div class="content" >
				<div class="bg" ></div>
                <ul id="ul-imgs">
                    <li v-for="(val,idx) of docList" :key="idx">
                        <div class="title">
                            <div class="title_name">
                                {{val.EXPERT_TYPE_NAME}}门诊
                            </div>
                            <div class="right">
                                {{department.department_name}}
                            </div>
                        </div>
                        <div class="content_body">
                            <div class="left">
                                <img :src="val.DOCTOR_AVATER" alt="" width="100%" height="100%">
                            </div>
                            <div class="right">
                                <div class="top">
                                    <div class="section">
                                        <p>医生</p>
                                        <p>{{val.DOCTOR_NAME}}</p>
                                    </div>
                                    <div class="section">
                                        <p>职称</p>
                                        <p>{{val.POST_NAME}}</p>
                                    </div>
                                </div>
                                <div class="bottom">
                                    <div class="detail">
                                        <p>{{val.DOCTOR_REMARK}}</p>
                                        <a @touchend="doctorDetailed(val.DOCTOR_ID)">
                                            【详细介绍】
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
            //图片下面的标点
            <div id="circle">
                <ul id="ul-idxs">
                </ul>
            </div>
			</div>

            <!-- 就诊信息 -->
            <!-- 当前挂号无人看诊 -->
            <div v-if="arr.length=='0'&&jiuzhen.length==0" class="wu_ren">
				<div class="wu_bg"></div>
                <div class="wu_ren_bord">
                    <p>当前诊室无患者看诊，可随时看诊</p>
                </div>
            </div>