这里我们是采用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、完成，现在你就可以再手机上运行一下了，几张图片都是大美女吧。