相關程式碼如下：在PC 端無法拖拽滑動 因為此觸發事件為touchstart、touchmove、touchend，所以此功能僅可在移動端實現滑動切換，實現效果是仿照mui框架的選項卡實現，未考慮相容性，如有錯誤歡迎指正
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>slide-tab</title>
<style>
*{
padding:0;
margin:0;
box-sizing:border-box;
}
.tab-nav{
margin-top:10px;
overflow: hidden;
touch-action: none;
}
.tab-slide{
display: flex;
flex-direction: row;
}
.tab-slide .slide-item{
text-align: center;
flex:1;
height:28px;
border-bottom:1px solid #efefef;
}
.tab-nav .tab-slide-main .main-content{
font-size:16px;
line-height:50px;
text-align:center;
width:100%;
display:inline-block;
border:1px solid #0f643f;
white-space: normal;
margin-top:10px;
}
.tab-nav .tab-slide-main{
font-size:0;
white-space: nowrap;
transition:all 0s linear;
transform: translate3d(0px, 0px, 0px) translateZ(0px);
transition-duration: 0ms;
transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
}
.slide-bar{
height:2px;
background-color:#df0384;
}
</style>
</head>
<body>
<div class="tab-nav">
<div class="tab-slide">
<div class="slide-item slide-active">登入</div>
<div class="slide-item">註冊</div>
<div class="slide-item ">找回密碼</div>
<div class="slide-item">註冊</div>
<div class="slide-item ">找回密碼</div>
</div>
<div class="slide-bar" id="slideBar"></div>
<div class="tab-slide-main" id="main">
<div class="main-content" id="mainM" draggable="true">登入內容</div>
<div class="main-content" draggable="true">註冊內容</div>
<div class="main-content" draggable="true">找回密碼</div>
<div class="main-content" draggable="true">註冊內容</div>
<div class="main-content" draggable="true">找回密碼</div>
</div>
</div>
<div class="demo"></div>
<script>
window.onload=function(){
let initx=0;
let endx=0;
let x=0;
let index=0;
let length=document.querySelectorAll('.main-content').length-1;
let pageWindow=window.innerWidth;
let moveDom=document.getElementById('main')
let mainM=document.getElementById('mainM')
let flag=true;
let bar=document.getElementById('slideBar');
let barmove=pageWindow/(length+1)
bar.style.width=barmove+'px'
document.ontouchstart=function(e){
main.style.transitionDuration=0+'ms'
initx=e.touches[0].pageX
}
document.ontouchmove=function(e){
flag=e.touches[0].pageX-initx;
x=e.touches[0].pageX-initx+endx;
moveDom.style.transform='translate3d('+x+'px,0,0)'
bar.style.transform='translate3d('+(-x/length)+'px,0,0)'
event.preventDefault();
}
document.ontouchend=function(e){
let move;
main.style.transitionDuration=500+'ms'
bar.style.transitionDuration=500+'ms'
if(Math.abs(flag)<(pageWindow/2)){
move=-pageWindow*index;
}else{
move=-(flag < 0 ? pageWindow*(index>= length ? length : ++index):pageWindow*(index<=0 ? 0 : --index));
}
moveDom.style.transform='translate3d('+move+'px,0,0)'
bar.style.transform='translate3d('+''+barmove*index+'px,0,0)'
endx=move;
}
}
</script>
</body>
</html>
複製程式碼移動端輪播圖
**此程式碼稍微改動，就可實現移動端輪播圖滑動的效果**<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://cdn.bootcss.com/jquery/3.3.0/jquery.js"></script>
<title>slide-tab3333</title>
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.tab-nav {
margin-top: 10px;
overflow: hidden;
touch-action: none;
position: relative;
}
/* .tab-slide{
display: flex;
flex-direction: row;
}
.tab-slide .slide-item{
text-align: center;
flex:1;
height:28px;
border-bottom:1px solid #efefef;
} */
.tab-nav .tab-slide-main .main-content {
line-height: 50px;
text-align: center;
width: 100%;
display: inline-block;
border-top: 1px solid #0f643f;
border-bottom: 1px solid #0f643f;
white-space: normal;
margin-top: 10px;
font-size: 14px;
}
.tab-nav .tab-slide-main .main-content img {
width: 100%;
height: 150px;
vertical-align: bottom;
transition: all 0.5s;
}
.tab-nav .tab-slide-main {
font-size: 0;
white-space: nowrap;
transition: all 1s linear;
transform: translate3d(0px, 0px, 0px) translateZ(0px);
transition-duration: 0ms;
transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
}
.doc {
overflow: hidden;
height: 30px;
position: absolute;
bottom: 0px;
z-index: 10;
margin-left: -15px;
left: 50%;
transform: translateX(-50%)
}
.doc li {
width: 8px;
height: 8px;
border-radius: 50%;
background: rgba(100, 92, 60, .5);
float: left;
text-decoration: none;
list-style-type: none;
color: #34f;
margin-left: 15px;
}
.doc li.active {
background: rgba(255, 40, 60, .5);
}
/* .slide-bar{
height:2px;
background-color:#df0384;
} */
</style>
</head>
<body>
<div class="tab-nav">
<div class="tab-slide-main" id="main">
<div class="main-content" id="mainM" draggable="true">
<img src="image/table.jpg" />
</div>
<div class="main-content" draggable="true">
<img src="image/map-new.png" />
</div>
<div class="main-content" draggable="true">
<img src="image/card.png" />
</div>
</div>
<ul class="doc" id="doc">
<li class="active"></li>
<li></li>
<li></li>
</ul>
</div>
<div class="demo"></div>
<script>
window.onload = function () {
let initx = 0;
let endx = 0;
let x = 0;
let index = 0;
let length = document.querySelectorAll('.main-content').length - 1;
let pageWindow = window.innerWidth;
let moveDom = document.getElementById('main')
let flag = true;
let doc = document.getElementById('doc')
var timer;
document.ontouchstart = function (e) {
main.style.transitionDuration = 0 + 'ms'
initx = e.touches[0].pageX;
clearInterval(timer)
}
document.ontouchmove = function (e) {
flag = e.touches[0].pageX - initx;
console.log(flag,index)
x = e.touches[0].pageX - initx -pageWindow*index;
console.log(x)
moveDom.style.transform = 'translate3d(' + x + 'px,0,0)'
event.preventDefault();
}
document.ontouchend = function (e) {
let move;
main.style.transitionDuration = 500 + 'ms'
if (Math.abs(flag) < (pageWindow / 2)) {
move = -pageWindow * index;
} else {
move = -(flag < 0 ? pageWindow * (index >= length ? length : ++index) : pageWindow * (index <=
0 ? 0 : --index));
}
moveDom.style.transform = 'translate3d(' + move + 'px,0,0)'
endx = move;
Array.from(doc.children).forEach(val => {
val.className = ''
})
doc.children[index].className = "active"
timerStart()
}
function timerStart() {
timer = setInterval(() => {
index++;
if (index == 3) {
index = 0;
}
moveDom.style.transform = 'translate3d(' + '-' + pageWindow * index + 'px,0,0)'
Array.from(doc.children).forEach(val => {
val.className = ''
})
doc.children[index].className = "active"
doc.children[index].className = "active"
main.style.transitionDuration = 500 + 'ms'
}, 1500)
}
timerStart()
}
</script>
</body>
</html>
複製程式碼