TouchSlide
可用于javascript触屏滑动特效插件，移动端滑动特效，触屏焦点图，触屏Tab切换，触屏多图切换等
方法引用（本次用轮播图为例）：
Js引入：
<script src="js/TouchSlide.1.1.js"></script>CSS样式：
body, p, input, h1, h2, h3, h4, h5, h6, ul, li, dl, dt, dd, form { margin: 0; padding: 0; list-style: none; vertical-align: middle; font-weight:normal; }
img { border:0; margin: 0; padding: 0; }
.focus {
width: 100%;
height: 140px;
margin: 0 auto;
position: relative;
overflow: hidden;
}
.focus .hd {
width: 100%;
height: 11px;
position: absolute;
z-index: 1;
bottom: 5px;
text-align: center;
}
.focus .hd ul {
display: inline-block;
height: 5px;
padding: 3px 5px;
background-color: rgba(255, 255, 255, 0.7);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
font-size: 0;
vertical-align: top;
}
.focus .hd ul li {
display: inline-block;
width: 5px;
height: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background: #8C8C8C;
margin: 0 5px;
vertical-align: top;
overflow: hidden;
}
.focus .hd ul .on {
background: #FE6C9C;
}
.focus .bd {
position: relative;
z-index: 0;
}
.focus .bd li img {
width: 100%;
height: 140px;
background: url(images/loading.gif) center center no-repeat;
}
.focus .bd li a {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
/* 取消链接高亮 */
}主代码:
<div id="focus" class="focus">
<div class="hd">
<ul></ul>
</div>
<div class="bd">
<ul>
<li><a href="#"><img _src="images/m1.jpg" src="images/blank.png" /></a></li>
<li><a href="#"><img _src="images/m2.jpg" src="images/blank.png"/></a></li>
<li><a href="#"><img _src="images/m3.jpg" src="images/blank.png"/></a></li>
<li><a href="#"><img _src="images/book1.jpg" src="images/blank.png"/></a></li>
</ul>
</div>
</div>
<!--这里是为了在这个DIV完毕后立即执行JS，避免整个页面加载完毕才执行。-->
<script type="text/javascript">
TouchSlide({
slideCell:"#focus",
titCell:".hd ul", //开启自动分页 autoPage:true ，此时设置 titCell 为导航元素包裹层 导航元素对象，鼠标触发元素即原标图点等。
mainCell:".bd ul", //要轮播的内容 图片
effect:"leftLoop", //轮播方向 向左循环滚动
autoPlay:true,//自动播放
autoPage:true, //自动分页
delayTime: 200, // 切换图片的延迟时间。 默认为200.
interTime: 2500, // 图片停留的时间，即各多少时间开始下一张图，默认为2500.
switchLoad:"_src" //切换加载，真实图片路径为"_src"
});
</script>==注意在这个DIV完毕后立即执行JS，避免整个页面加载完毕才执行==
此插件功能强大，此轮播图较为简单，每张页面轮播完毕后还可以触发函数，endFun。
用法 endFun:function(i,c){ }； 其中i为当前分页，c为总页数。
此处引用==SuperSlide==示范。
jQuery("#slideBox").slide({ mainCell:".bd ul",autoPlay:true,effect:"left",delayTime:2000,interTime:8000,
startFun:function(i,c){
$("#textarea").val( $("#textarea").val()+ "第"+(i+1)+"个效果开始，同时执行startFun函数。当前分页状态："+(i+1)+"/"+c+"\r\n")
},
endFun:function(i,c){
$("#textarea").val( $("#textarea").val()+ "第"+(i+1)+"个效果结束，开始执行endFun函数。当前分页状态："+(i+1)+"/"+c+"\r\n")
}
});