js手机左右滑动

选项卡、轮播：

下载网址：http://www.superslide2.com/index.html
下载的js文件放在js目录下
从下载包里找需要的网页效果，css复制下来，改样式。

html代码：
<script src="{{$smarty.const.SKIN}}/script/TouchSlide.1.1.js"></script>（引用文件）

<div id="yang_card">

<div class="yang_tit" align="center">
<ul>
<li style="float:left;">羊汤系列</li>
<li style="float:left;margin-left:12.5%;">烤全羊系列</li>
<li style="float:right;">凉菜系列</li>
</ul>
</div>

<div class="yang_xian"></div>

<div class="yang_content">
<ul>
<li class="yang_xs"><img src="{{$smarty.const.SKIN}}/images/yang_tu.jpg" /></li>
<li><img src="{{$smarty.const.SKIN}}/images/yang_tu.jpg" /></li>
<li><img src="{{$smarty.const.SKIN}}/images/yang_tu.jpg" /></li>
</ul>
</div>

</div>

js代码：
<script type="text/javascript">

                TouchSlide({
                    slideCell:"#yang_card",
                    titCell:".yang_tit li",
                    mainCell:".yang_content ul",
                    effect:"leftLoop",
                    autoPlay:false,
                    autoPage:false,
                });

            </script>

css代码：

#yang_card
{width:100%;height:auto;margin:0 auto;}
.yang_tit
{width:85%;margin:0 auto;text-align:center;height:30px;line-height:30px;}
.yang_tit ul
{style:none;}
.yang_tit ul .on
{background:#4c4231;color:#c59e61;}
.yang_tit li
{width:25%;line-height:30px;font:14px;text-align:center;}
.yang_xian
{width:85%;height:1px;margin:0 auto;background:#4c4231;}
.yang_content
{width:100%;height:auto;}
.yang_content ul
{style:none;}
.yang_content li
{style:none;width:100%;margin:0 auto;display:none;}
.yang_content .yang_xs
{display:block;}
.yang_content li img
{width:100%;}