jquery+mobile实现触摸滑动、自动滑动、点击滑动效果

JQuery 1465 0 2013-11-26

jquery+mobile实现触摸滑动、自动滑动、点击滑动效果

以下实现“触摸滑动、自动滑动、点击滑动效果”三种效果集合,

在网上看了好多代码感觉好复杂好复杂,下定决心自己编一个,哈哈~~超简洁!!!!

STYLE:
html,body{ padding:0px; margin:0px; font-size:12px} img{border:0px;}
a:link,a:visited{color:#333;text-decoration:none;} a:hover {text-decoration:underline;color: #F00;} a:active {text-decoration: none;}
#wrapper{ width:300px; height:120px; position:relative; overflow:hidden; margin:0 auto; }
#inner{ position:absolute; width:900px;}
#inner div{ width:300px; height:120px; float:left;} #inner div img{-moz-border-radius:5px; -webkit-border-radius:5px}
.full-circle{ background-color:#CCC; width:10px; height:10px; -moz-border-radius:5px; -webkit-border-radius:5px; float:left; margin:5px; cursor:pointer}
.cur{ background-color:#555}
#btns{ width:60px; height:20px; margin:0 auto;}

HTML:
<div id="main" style="padding-top:10px">
    <div id="wrapper">
        <div id="inner">
            <div><a href="/"><img src="m1.jpg" /></a></div>
            <div><a href="#"><img src="m2.jpg" /></a></div>
            <div><img src="m3.jpg" /></div>
        </div>
    </div>
    <div id="btns">
        <div class="full-circle cur"></div>
        <div class="full-circle"></div>
        <div class="full-circle"></div>
    </div>
</div>

JS:
<script language="javascript" src="jquery.min.js"></script><script language="javascript" src="jquery.mobile-1.3.2.min.js"></script>
<script language="javascript">
var curNum=0;
var autoNum=0;
var autoFun = setInterval(autoSlide, 3000);
//触摸滑动
$('#wrapper').swipeleft(function(){ //向左滑
    $('#inner').animate({left:'-=300'},500,function(){curNum+=1; $('.full-circle').removeClass('cur'); $('.full-circle').eq(curNum).addClass('cur'); });
    if(curNum==2){$('#inner').animate({left:'+=900'},1000); curNum=-1; $('.full-circle').removeClass('cur'); $('.full-circle').eq(curNum).addClass('cur'); }
});
$('#wrapper').swiperight(function(){  //向右滑
    $('#inner').animate({left:'+=300'},500,function(){curNum-=1; $('.full-circle').removeClass('cur'); $('.full-circle').eq(curNum).addClass('cur'); });
    if(curNum==0){$('#inner').animate({left:'-=900'},1000); curNum=3; $('.full-circle').removeClass('cur'); $('.full-circle').eq(curNum).addClass('cur'); }
});
//点击滑动
$('.full-circle').click(function(){var cbn=$('.full-circle').index(this); $('.full-circle').removeClass('cur'); $(this).addClass('cur'); switch(cbn){ case 0:$('#inner').animate({left:'0'},500); break; case 1:$('#inner').animate({left:'-300'},500); break; case 2:$('#inner').animate({left:'-600'},500); break; }
    autoNum=cbn; clearInterval(autoFun); autoFun = setInterval(autoSlide, 3000); //点击后先清除自动播放
});
//自动滑动
function autoSlide(){
    if(autoNum<3){
    $('#inner').animate({left:'-'+(autoNum*300)},500);
    }else{
    $('#inner').animate({left:'0'},1000); autoNum=0;
    }
    $('.full-circle').removeClass('cur'); $('.full-circle').eq(autoNum).addClass('cur');
    autoNum+=1;
}
$('#wrapper').hover(function(){clearInterval(autoFun);},function(){autoFun = setInterval(autoSlide, 3000);})
</script>

提供大家交流参考,根据需要自己删减-----作者:哈喽吧-JAES,交流QQ群:59103908

上一篇:调用jquery ui dialog 事件弹出/关闭dialog窗口

下一篇:jquery(JS)简单实现选择年份范围,高手飘过~~

讨论数量:1

天涯网魂 3 杠 5 星2013-11-26 12:28:12

以上代码还需要补上jquery mobile CSS样式:
<link href="jquery.mobile-1.3.2.min.css" rel="stylesheet" type="text/css">

请先登录再发表讨论。 2024-04-29

天涯网魂
3 杠 5 星
TA 的文章
TA 的随言
TA 的资源链