<!DOCTYPE html>
<html>
<head lang="zh">
<meta charset="UTF-8">
<title></title>
<style>
*{margin:0; padding: 0;}
li{list-style-type: none;}
.imgBox{
width: 100%;
overflow: hidden;
}
.imgInBox{
width:400%;
}
.imgInBox li{
float:left;
width:25%;
position: relative;
}
.imgInBox li img{
width:100%;
}
.imgtitle{
width:100%;
background: rgba(0, 0, 0, 0.6);
color: #fff;
font-size: 16px;
text-align: center;
position: absolute;
bottom: 0px;
font-weight: 600;
line-height: 16px;
padding: 5px 0px;
}
</style>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"/>
</head>
<body>
<div class="imgBox" id="imgBox">
<ul class="imgInBox">
<li><img src="./images/1.jpg">
<div class="imgtitle">11111111111</div>
</li>
<li><img src="./images/2.jpg">
<div class="imgtitle">22222222222</div></li>
<li><img src="./images/3.jpg">
<div class="imgtitle">33333333333333</div></li>
<li><img src="./images/4.jpg">
<div class="imgtitle">444444444</div></li>
</ul>
</div>
<script type="text/javascript" src="js/libs/zepto/zepto.js"></script>
<script type="text/javascript" src="js/libs/zepto/zTouch.js"></script>
<script>
var transformBox = function (obj,value,time,has3d) {
var time=time?time:0;
transl=has3d?"translate3d("+value+"px,0,0)":"translate("+value+"px,0)";
obj.css({'-webkit-transform':transl,'-webkit-transition':time+'ms linear'});
}
//图片
var autoSlide = function (tPoint) {
var self = tPoint.self;
var children = self.children();
var width = children.width();
//定时
var imgInterval = setInterval(function () {
var count = tPoint.count;
if(count==-(tPoint.total-1)){
count=0;
}else{
count--;
}
var offset = count*width/tPoint.total;
transformBox(children,offset,500,tPoint.has3d);
tPoint.setAttr("count",count);
},2000);
tPoint.setAttr("imgInterval",imgInterval);
}
var imgArgs = {
sCallback: function (tPoint) {
if(tPoint.imgInterval !=null){
clearInterval(tPoint.imgInterval);
}
},
mCallback: function (tPoint) {
var self = tPoint.self;
var children = self.children();
var width = children.width();
var offset = tPoint.mX+tPoint.count*width/tPoint.total;
transformBox(children,offset,500,tPoint.has3d);
},
eCallback: function (tPoint){
var self = tPoint.self;
var children = self.children();
var width = children.width();
var count = tPoint.count;
switch(tPoint.direction){
case "left":
count--;
break;
case "right":
count++;
break;
}
if(count==1 || count==-tPoint.total){
count = tPoint.count;
}
var offset = count*width/tPoint.total;
transformBox(children,offset,500,tPoint.has3d);
tPoint.setAttr("count",count);
autoSlide(tPoint);
},
afterCallback: function (tPoint) {
autoSlide(tPoint);
}
}
$("#imgBox").Swipe(imgArgs);
</script>
</body>
<html>
<head lang="zh">
<meta charset="UTF-8">
<title></title>
<style>
*{margin:0; padding: 0;}
li{list-style-type: none;}
.imgBox{
width: 100%;
overflow: hidden;
}
.imgInBox{
width:400%;
}
.imgInBox li{
float:left;
width:25%;
position: relative;
}
.imgInBox li img{
width:100%;
}
.imgtitle{
width:100%;
background: rgba(0, 0, 0, 0.6);
color: #fff;
font-size: 16px;
text-align: center;
position: absolute;
bottom: 0px;
font-weight: 600;
line-height: 16px;
padding: 5px 0px;
}
</style>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"/>
</head>
<body>
<div class="imgBox" id="imgBox">
<ul class="imgInBox">
<li><img src="./images/1.jpg">
<div class="imgtitle">11111111111</div>
</li>
<li><img src="./images/2.jpg">
<div class="imgtitle">22222222222</div></li>
<li><img src="./images/3.jpg">
<div class="imgtitle">33333333333333</div></li>
<li><img src="./images/4.jpg">
<div class="imgtitle">444444444</div></li>
</ul>
</div>
<script type="text/javascript" src="js/libs/zepto/zepto.js"></script>
<script type="text/javascript" src="js/libs/zepto/zTouch.js"></script>
<script>
var transformBox = function (obj,value,time,has3d) {
var time=time?time:0;
transl=has3d?"translate3d("+value+"px,0,0)":"translate("+value+"px,0)";
obj.css({'-webkit-transform':transl,'-webkit-transition':time+'ms linear'});
}
//图片
var autoSlide = function (tPoint) {
var self = tPoint.self;
var children = self.children();
var width = children.width();
//定时
var imgInterval = setInterval(function () {
var count = tPoint.count;
if(count==-(tPoint.total-1)){
count=0;
}else{
count--;
}
var offset = count*width/tPoint.total;
transformBox(children,offset,500,tPoint.has3d);
tPoint.setAttr("count",count);
},2000);
tPoint.setAttr("imgInterval",imgInterval);
}
var imgArgs = {
sCallback: function (tPoint) {
if(tPoint.imgInterval !=null){
clearInterval(tPoint.imgInterval);
}
},
mCallback: function (tPoint) {
var self = tPoint.self;
var children = self.children();
var width = children.width();
var offset = tPoint.mX+tPoint.count*width/tPoint.total;
transformBox(children,offset,500,tPoint.has3d);
},
eCallback: function (tPoint){
var self = tPoint.self;
var children = self.children();
var width = children.width();
var count = tPoint.count;
switch(tPoint.direction){
case "left":
count--;
break;
case "right":
count++;
break;
}
if(count==1 || count==-tPoint.total){
count = tPoint.count;
}
var offset = count*width/tPoint.total;
transformBox(children,offset,500,tPoint.has3d);
tPoint.setAttr("count",count);
autoSlide(tPoint);
},
afterCallback: function (tPoint) {
autoSlide(tPoint);
}
}
$("#imgBox").Swipe(imgArgs);
</script>
</body>
</html>
图片自动轮换,手动移动轮换