您现在的位置是:首页 > 学无止境> JS网站首页学无止境JS

兼容手机的幻灯片效果可手划

 
简介

不多说了,直接贴代码:

HTML代码:
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> <LINK href="css/studyfx.css" type=text/css rel=stylesheet> <script type="text/javascript" src="js/jquery.min.js"></script><script type="text/javascript" src="js/jquery.touchSwipe.min.js"></script><title>jquery特效,触屏特效,手机幻灯片,可用手滑动</title></head> <body> <div class="box"> <div class="mid01_box"> <div class="roll"><img src="images/img01.jpg" /></div> <div class="roll"><img src="images/img02.jpg" /></div> <div class="roll"><img src="images/img03.jpg" /></div> <div class="roll"><img src="images/img04.jpg" /></div> </div> <ul class="line" id="line_1"> <li class="on"></li> <li></li> <li></li> <li></li> </ul> </div><div class="box"> <div class="mid01_box"> <div class="roll"><img src="images/img05.jpg" /></div> <div class="roll"><img src="images/img06.jpg" /></div> <div class="roll"><img src="images/img07.jpg" /></div> <div class="roll"><img src="images/img08.jpg" /></div> </div> <ul class="line" id="line_2"> <li class="on"><img src="images/s1.jpg"></li> <li><img src="images/s2.jpg"></li> <li><img src="images/s3.jpg"></li> <li><img src="images/s4.jpg"></li> </ul> </div><script type="text/javascript" src="js/flash.js"></script> </body></html>

CSS:

*{ margin:0; padding:0;}
body{ width:100%;}
.box{width:500px; height:210px;text-align:center;font-weight: 300;font-size: 20px;line-height: 36px;position:relative;overflow:hidden; margin:0 auto;}
.mid01_box{position:absolute; width:400%; top:0; float:left; height:210px;}
/*mid01_box里的400%是对应前面幻灯片个数而定的,如果是5个width:500%*/
.roll{ height:200px; cursor:pointer; float:left; width:25%; overflow:hidden;}
/*
重点:
如果这里加了padding 或margin属性,注意,要在.roll里面加 比如: padding:0 10px; box-sizing:border-box;
否则会出问题
roll里的25%是对应前面幻灯片个数而定的,如果是5个width:20%
*/
.line{ width:100%; height:auto; position:absolute; top:170px; left:0;text-align:center; cursor:pointer;}
#line_1 li{margin:0; width:10px; height:10px; border-radius:8px; padding:0; background:#000; display:inline-block; list-style-type:none; margin:0 20px;}
#line_1 .on{ background:#f00;}
/*
这是里色块,也可以改为图片,比如
.line img{ width:28px; height:28px; border:2px solid #ccc; border-radius:28px;}
.line .on img{ border:2px solid #f60;}
*/
/*2*/
#line_2 li{ width:32px; height:32px; display:inline-block; list-style-type:none; margin:5px 20px;}
#line_2 img{ width:28px; height:28px; border:2px solid #ccc; border-radius:28px;}
#line_2 .on img{ border:2px solid #f60;}

js:

$(function(){
 rolltab(); 
 roll();
 nav();
});
var timer=null;
var offset=5000;//5s自动切换
var y=0; 
var e=-1;
function rolltab(){ 
 e++; 
 if(e>3){
 e=0 
 }
 tab(e);
 timer=window.setTimeout(rolltab,offset) 
}
function tab(e){
 var t=-(25*e)+"%";//这里的25指的是百分之25,这里是四个轮换,如果是5个,那改为20
 $('.mid01_box').css({'-webkit-transform':"translate("+t+")",'-webkit-transition':'500ms linear'} ); 
 $('.line').each(function(){
 $(this).find('li').eq(e).addClass('on');
 $(this).find('li').eq(e).siblings().removeClass('on');
 })
}
function time(){
 window.clearTimeout(timer,2000);
 timer=window.setTimeout(rolltab,offset) 
}
function nav(n){
 $('.line li').click(function(){
 var f=$(this).index();
 time(); 
 $(this).addClass('on');
 $(this).siblings().removeClass('on');
 yi=25*f;//同上面
 var x=-yi+"%"; 
 $(this).parents('.box').find('.mid01_box').css({'-webkit-transform':"translate("+x+")",'-webkit-transition':'500ms linear'} );
 e= $(this).prevAll().length;
 
 })
 
}
function roll(){
 $(".roll").each(function(){ 
 $(this).swipe({ 
 swipeLeft:function(){
 time();
 var i=$(this).index();
 if(i==3){
 return false;
 }else{
 var n=i+1;
 y=25*n;//同上面
 var t=-y+"%"; 
 $(this).parent('.mid01_box').css({'-webkit-transform':"translate("+t+")",'-webkit-transition':'500ms linear'} ); 
 $(this).parents('.box').find('.line li').eq(n).addClass('on');
 $(this).parents('.box').find('.line li').eq(n).siblings().removeClass('on')
 }
 
 },
 swipeRight:function() {
 time();
 var i=$(this).index();
 if(i==0){
 return false; 
 }else{
 var n=i-1;
 y=-25*n;//同上面
 var t=y+"%"; 
 $(this).parent('.mid01_box').css({'-webkit-transform':"translate("+t+")",'-webkit-transition':'500ms linear'} ); 
 $(this).parents('.box').find('.line li').eq(n).addClass('on');
 $(this).parents('.box').find('.line li').eq(n).siblings().removeClass('on')
 }
 
 }
 });
 }) 
}

jquery.touchSwipe.min.js


Top