touchslider手机TAB触屏切换页面插件

收藏

分享一个手机触屏滑动的插件:swipe.js。请在手机移动设备查看演示效果。

0、请不要问“在不在”之类的问题，有问题直接问！1、学生或暂时没有工作的童鞋，整站资源免费下载！2、￥9.9充值终身VIP会员,加我微信，826096331 拉你进VIP群学习！3、程序员加油,技术改变世界。在线 充值

查看演示

加我微信，拉你进VIP群学习：

下载资源 下载积分： 30 积分

HTML

<div id="slider" class="swipe">
    <ul class="box01_list">
        <li class="li_list">
            <div class="pic_list"><img src="images/css3.gif"><span><a href="http://www.erdangjiade.com/js/516.html">jQuery.lottery.js微信手机抽奖 </a></span></div>
            <div class="news_list">
                <p><span class="s_arrow"></span><a href="#">纯CSS3实现超酷的鼠标悬停效果</a></p>
                <p><span class="s_arrow"></span><a href="#">CSS3实现响应式数据表格</a></p>
                <p><span class="s_arrow"></span><a href="#">纯CSS3制作漂亮的价格表</a></p>
                <p><span class="s_arrow"></span><a href="#">使用CSS3美化复选框checkbox</a></p>
            </div>
        </li>
        <li class="li_list">
            <div class="pic_list"><img src="images/grid.gif"><span><a href="http://www.erdangjiade.com/js/515.html">jQuery自定义手机触屏函数</a></span></div>
            <div class="news_list">
                <p><span class="s_arrow"></span><a href="#">jQuery复制表单元素</a></p>
                <p><span class="s_arrow"></span><a href="#">基于jQuery的进度条展示效果</a></p>
                <p><span class="s_arrow"></span><a href="#">JS实现网页加载进度条</a></p>
                <p><span class="s_arrow"></span><a href="#">JS实现自动倒计时30秒后按钮才可用</a></p>
            </div>
        </li>
    </ul>
</div>

js

由于是移动端应用，我们加载zepto.js，zepto就是体积小的jquery。接着加载触屏滑动插件touchslider.js。

<script type="text/javascript" src="js/zepto_min.js"></script> 
<script type="text/javascript" src="js/touchslider.js"></script>

var page = 'pagenavi';
var mslide = 'slider';
var mtitle = 'emtitle';
arrdiv = 'arrdiv';

var as = document.getElementById(page).getElementsByTagName('a');

var tt = new TouchSlider({id: mslide, 'auto': '-1', fx: 'ease-out', direction: 'left', speed: 600, timeout: 5000, 'before': function(index) {
        var as = document.getElementById(this.page).getElementsByTagName('a');
        as[this.p].className = '';
        as[index].className = 'active';
        this.p = index;
        var txt = as[index].innerText;
        $("#" + this.page).parent().find('.emtitle').text(txt);
        var txturl = as[index].getAttribute('href');
        var turl = txturl.split('#');
        $("#" + this.page).parent().find('.go_btn').attr('href', turl[1]);
    }});

tt.page = page;
tt.p = 0;
for (var i = 0; i < as.length; i++) {
    (function() {
        var j = i;
        as[j].tt = tt;
        as[j].onclick = function() {
            this.tt.slide(j);
            return false;
        }
    })();
}