以下实现“触摸滑动、自动滑动、点击滑动效果”三种效果集合,
在网上看了好多代码感觉好复杂好复杂,下定决心自己编一个,哈哈~~超简洁!!!!
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