最近公司要求开发wap版本页面，碰到了个图片滑动切换效果，折腾了半天，自己封装了一个比较通用的小控件，在此分享一下。
大概功能：可以自定义是否自动切换，支持单手滑动图片进行切换，支持左右滑动切换、循环切换等等，具体可以拿demo代码自己本地试试，注意只支持手机端哦
大概思路：通过touchstart、touchmove、touchend 三个事件加上css3的3d变化效果配合，实现滑动切换图片，
开发是基于Zepto框架，当然也支持其他任何一款手机端框架，只需将代码中的美元符号$换为指定框架操作符即可。
下面是提供的一个demo：
1、html
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"/> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content = "width=device-width, target-densitydpi=high-dpi, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-status-bar-style" content="black" /> <meta content="telephone=no" name="format-detection" /> <meta name="keywords" content="seokeywords"/> <meta name="description" content="seodescription"/> <title>mggScrollImg demo 作者：js明哥哥</title> <style> ul,li{margin:0;padding:0;} @media screen and (min-width:240px) { html, body{ font-size:9px; } } @media screen and (min-width:320px) { html, body{ font-size:12px; } } @media screen and (min-width:480px) { html, body{ font-size:18px; } } @media screen and (min-width:640px) { html, body{ font-size:24px; } } @media screen and (min-width:960px) { html, body{ font-size:36px; } } div.imgbox{width:25rem;height:16.5rem;overflow:hidden;margin:0 auto;} div.imgbox ul{clear:both;width:75rem;} div.imgbox ul li{float:left;width:25rem;height:16.5rem;overflow:hidden;text-align:center;} div.imgbox ul li img{width:24rem;height:16.5rem;} #page{color:red;} </style> </head> <body> <div class="imgbox"> <ul> <li><a href="http://home.cnblogs.com/u/huzhiming/"><img src="http://y2.ifengimg.com/df84c07b46e03f8e/2014/0512/rdn_53708f3d8533e.jpg"></img></a></li> <li><a href="http://home.cnblogs.com/u/huzhiming/"><img src="http://y2.ifengimg.com/df84c07b46e03f8e/2014/0512/rdn_53708f23aad06.jpg"></img></a></li> <li><a href="http://home.cnblogs.com/u/huzhiming/"><img src="http://y2.ifengimg.com/df84c07b46e03f8e/2014/0512/rdn_53708f345282b.jpg"></img></a></li> </ul> </div> <div>这里通过回调显示当前滚动到多少页:<span >0</span></div> <script src="http://zeptojs.com/zepto.min.js"></script> <script src="mggScrollImg.js"></script> <script> (function(){ /* 注意：$.mggScrollImg返回的scrollImg对象上有 next，prev，go三个方法，可以实现外部对滚动索引的控制。 如：scrollImg.next();//会切换到下一张图片 scrollImg.go(0);//会切换到第一张图片 */ var scrollImg = $.mggScrollImg('.imgbox ul',{ loop : true,//循环切换 auto : true,//自动切换 callback : function(ind){//这里传过来的是索引值 $('#page').text(ind+1); } }); })() </script> </body> </html>