//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>
轮播 多块内容 非单纯图片
最新推荐文章于 2024-05-10 18:22:52 发布