Saber 酱的抱枕

最近做手机站用到了TouchSlide，记录一些现成的可以套用的范式。

banner切换：

<div id="focus" class="focus1">
	<div class="hd">
		<ul class="clearfix"></ul>
	</div>
	<div class="bd">
		<ul>
			<li><a href="swtlink"><img _src="images/banner1.jpg" src="images/blank.png" /></a></li>
			<li><a href="swtlink"><img _src="images/banner2.jpg" src="images/blank.png"/></a></li>
			<li><a href="swtlink"><img _src="images/banner1.jpg" src="images/blank.png"/></a></li>
		</ul>
	</div>
</div>
<script type="text/javascript">
	TouchSlide({
		slideCell:"#focus",
		titCell:".hd ul", //开启自动分页 autoPage:true ，此时设置 titCell 为导航元素包裹层
		mainCell:".bd ul",
		effect:"left",
		autoPlay:true,//自动播放
		autoPage:true, //自动分页
		switchLoad:"_src" //切换加载，真实图片路径为"_src"
	});
</script>

对应的css样式：

.banner{position: relative;}
.banner .hd{position: absolute;width: 54px;bottom: 3px;right: 3px;z-index: 999;}
.banner .hd li{width: 10px;height: 10px;background: #fff;border-radius: 10px;display: inline-block;margin:0 4px;overflow: hidden;color: #fff;cursor: pointer;}
.banner .hd li.on{background: #FFCC00;color: #FFCC00;}

tab切换：

<div id="tabBox1" class="tabBox">
	<div class="hd">
		<ul class="clearfix">
			<li class="on"><a href="javascript:void(0)">标题1</a></li>
			<li><a href="javascript:void(0)">标题2</a></li>
		</ul>
	</div>
	<div class="bd" id="tabBox1-bd">
		<div>内容</div>
		<div>内容</div>
	</div>
	<script type="text/javascript">
		TouchSlide({slideCell:"#tabBox1",effect:"leftLoop"});
	</script>
</div>

TouchSlide的一些记录