这里我们是采用SlipJs来实现的,比起自己从零开始,方便许多而且完美无BUG
slipjs官网:http://www.slipjs.com/
1、先看效果截图:
2、在线演示 http://www.slipjs.com/demo/img.html (手机访问)
3、知道你懒得在手机浏览器输入这么长的地址,你可以用UC浏览器或者QQ浏览器扫描二维码:
4、先来写HTML和CSS代码:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta id="viewport" name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="format-detection" content="telephone=no" />
<title>SlipJs演示</title>
<link rel="stylesheet" href=""/>
<style type="text/css">
*{
padding:0px;
margin:0px;
}
body{
background-color:#cbd2d8;
}
ul,li{
list-style-type: none;
}
header{
width: 100%;
height: 40px;
background: -webkit-gradient(linear,left top,left bottom,from(#6f85a2),to(#6f85a2));
text-shadow: 1px 1px rgba(0, 0, 0, .2);
line-height: 40px;
text-align: center;
color: #F3F3F3;
font-size: 19px;
font-weight: bold;
font-family: helvetica;
}
#change_screen_div{
position:relative;
width:320px;
height:188px;
overflow:hidden;
margin:auto;
border-top: 1px solid #3b3e41;
}
#change_screen_ul{
width:960px;
height:100%;
position: absolute;
}
#change_screen_ul img{
width:320px;
display:block;
height:100%;
}
#change_screen_ul li{
float:left;
}
.slider_status{
width:320px;
height:3px;
background-color: rgba(51, 51, 51, 0.5);
position:absolute;
bottom:0px;
}
#slider_status_span{
display:block;
width:107px;
height:100%;
background-color:#7a0103;
-webkit-transition: 300ms;
}
.note{
color:#4c566c;
text-shadow: 1px 1px white;
text-align:center;
width:80%;
margin:10px auto 20px; auto;
font-size:15px;
}
</style>
</head>
<body>
<header>触控图片轮换</header>
<div>
<div id="change_screen_div">
<ul id="change_screen_ul">
<li><img src="http://www.slipjs.com/demo/img/change01.jpg"></li>
<li><img src="http://www.slipjs.com/demo/img/change02.jpg"></li>
<li><img src="http://www.slipjs.com/demo/img/change03.jpg"></li>
</ul>
<div class="slider_status">
<span id="slider_status_span"></span>
</div>
</div>
<div class="note">使用 SlipJs 只需几行简单的代码就可以实现如此精致完美的效果。</div>
</div>
</body>
5、然后是js代码:
<script src="http://www.slipjs.com/3.0.1/ai.js" type="text/javascript"></script>
<script src="http://www.slipjs.com/3.0.1/slip-min.js" type="text/javascript"></script>
<script>
// 你可能会看到ai.js这个javascript文件,这个文件和slip.js无任何依赖关系,ai.js只是一些常用的函数如:ai.i,这些函数也有非常详细的注释。
document.addEventListener('DOMContentLoaded', function(){
ai.hideUrl();
var change_screen_ul = ai.i("change_screen_ul"),
slip_status_span = ai.i("slider_status_span");
function changeScreenEndFun() {
slip_status_span.style['webkitTransform'] = 'translateX('+this.page * 320/3+'px) translateZ(0)';
}
//核心代码
slip('page',change_screen_ul,{
change_time: 5000,
num: 3,
endFun: changeScreenEndFun,
infinite: true
});
//核心代码
}, false);
</script>
6、为了方便演示我们把代码合并在一个页面中,就变成这样了:
点击 + 展开代码
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta id="viewport" name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="format-detection" content="telephone=no" />
<title>SlipJs演示</title>
<link rel="stylesheet" href=""/>
<style type="text/css">
*{
padding:0px;
margin:0px;
}
body{
background-color:#cbd2d8;
}
ul,li{
list-style-type: none;
}
header{
width: 100%;
height: 40px;
background: -webkit-gradient(linear,left top,left bottom,from(#6f85a2),to(#6f85a2));
text-shadow: 1px 1px rgba(0, 0, 0, .2);
line-height: 40px;
text-align: center;
color: #F3F3F3;
font-size: 19px;
font-weight: bold;
font-family: helvetica;
}
#change_screen_div{
position:relative;
width:320px;
height:188px;
overflow:hidden;
margin:auto;
border-top: 1px solid #3b3e41;
}
#change_screen_ul{
width:960px;
height:100%;
position: absolute;
}
#change_screen_ul img{
width:320px;
display:block;
height:100%;
}
#change_screen_ul li{
float:left;
}
.slider_status{
width:320px;
height:3px;
background-color: rgba(51, 51, 51, 0.5);
position:absolute;
bottom:0px;
}
#slider_status_span{
display:block;
width:107px;
height:100%;
background-color:#7a0103;
-webkit-transition: 300ms;
}
.note{
color:#4c566c;
text-shadow: 1px 1px white;
text-align:center;
width:80%;
margin:10px auto 20px; auto;
font-size:15px;
}
</style>
</head>
<body>
<header>触控图片轮换</header>
<div>
<div id="change_screen_div">
<ul id="change_screen_ul">
<li><img src="http://www.slipjs.com/demo/img/change01.jpg"></li>
<li><img src="http://www.slipjs.com/demo/img/change02.jpg"></li>
<li><img src="http://www.slipjs.com/demo/img/change03.jpg"></li>
</ul>
<div class="slider_status">
<span id="slider_status_span"></span>
</div>
</div>
<div class="note">使用 SlipJs 只需几行简单的代码就可以实现如此精致完美的效果。</div>
</div>
</body>
<script src="http://www.slipjs.com/3.0.1/ai.js" type="text/javascript"></script>
<script src="http://www.slipjs.com/3.0.1/slip-min.js" type="text/javascript"></script>
<script>
// 你可能会看到ai.js这个javascript文件,这个文件和slip.js无任何依赖关系,ai.js只是一些常用的函数如:ai.i,这些函数也有非常详细的注释。
document.addEventListener('DOMContentLoaded', function(){
ai.hideUrl();
var change_screen_ul = ai.i("change_screen_ul"),
slip_status_span = ai.i("slider_status_span");
function changeScreenEndFun() {
slip_status_span.style['webkitTransform'] = 'translateX('+this.page * 320/3+'px) translateZ(0)';
}
//核心代码
slip('page',change_screen_ul,{
change_time: 5000,
num: 3,
endFun: changeScreenEndFun,
infinite: true
});
//核心代码
}, false);
</script>
</html>
7、完成,现在你就可以再手机上运行一下了,几张图片都是大美女吧。