手机版html页面左右滑动切换页面,移动端手指左右滑动切换内容demo

说在开头

最近移动端做了一个手指左右滑动切换内容的效果demo;

为了表示我的无私，决定分享给诸位；(详细代码见附件)

正文

先上html代码html>

穿衣助理

完成

整个页面ul部分是需要切换的部分具体内容有js拼接而成

css代码如下：(这里直接贴上了less编译之后)body,div,ul{margin: 0px;padding: 0px;}

.m-shape{box-sizing: border-box;}

.m-shape .cont{  overflow: hidden;box-sizing: border-box;

}

.j-cont{  margin: 0 auto;

width: 100%;}

.m-shape .cont ul {

width: 1000%;

position: relative;

margin: 0 7%;

overflow: hidden;

}

.m-shape .cont ul li {

display: inline-block;

float: left;

width: 8%;

padding: 0 0.3%;

overflow: hidden;

box-sizing: content-box;

}

.m-shape .cont ul li .tishi {

position: absolute;

border-radius: 50%;

background: url(../p_w_picpaths/Assist_icon.png) no-repeat;

background-size: 30px 30px;

width: 30px;

height: 30px;

right: 10px;

top: 10px;

}

.m-shape .cont ul li .title {

height: 40px;

line-height: 40px;

text-align: center;

}

.m-shape .cont ul li .cont {

height: 77%;

text-align: center;

}

.m-shape .cont ul li .cont .img {

height: 100%;

text-align: ce