你的位置:首页 > Java教程

[Java教程]swipe.js 2.0 轻量级框架实现mobile web 左右滑动


属性总结笔记如下:

<style>.swipe {  overflow: hidden;  //隐藏溢出 清楚浮动  visibility: hidden; //规定元素不可见 (可以设置,当事件触发后,元素可见)  position: relative; //表示相对于浏览器的定位,应用中是相当于前面的容器来定位的} </style>
<script type="html/javascript">
  $("#bannerControl li:first").addClass("active"); //向第一个li元素添加一个类active;之后可以用".active"来调用这个active类(jQuery中的addClass方法)
  $("#bannerList li").css("width",$(window).width()+"px"); //设置li元素的一个或多个样式属性。以<name,value>对形式 ($(selector).css(name,value))$(window).width()浏览器可视宽度
  
  $(".banner").on("swipeleft",function(){ //在元素banner上,绑定swipeleft事件,事件被触发时执行函数function{}

              //见后面的myInner = setInterval(function(){})方法,关闭自动轮播效果
                        clearInterval(myInner);

              //取到当前图片的index索引值
                        var num = $("#bannerControl li.active").index(); //jQuery中.index()中搜索匹配元素,并返回元素的索引值;返回class=“active“的<li>元素在其同辈元素集合(<li>标签集合)中的索引值。
                        
              //根据当前索引,判断向左滑动时候的next index
              var count = num==(countPicNum-1)?0:num+1;

              //jQuery中” :eq()选择器 “(下标从0开始); 定义到next index的<li>标签,添加class=”active“, jQuery中的" .siblings() ",查找标签<li>集合中class=”active“的标签,并将找到的标签中的类class=”active“移除
                        $("#bannerControl li:eq("+count+")").addClass("active").siblings($("#bannerControl li:eq("+count+")")).removeClass("active");
                        
              //jQuery中”translate()“实现过渡效果translate(Xpx,Ypx);X方向是右,Y方向是下。”+“是连接符,”-($(window).width()*count)px“表示向左移动指定像素个单位,translateZ定义了3D转换(CSS3中属性)
              $("#bannerList").css("transform","translate("+-($(window).width()*count)+"px, 0px) translateZ(0px)");

              //函数定义了自动轮播效果,每隔3000毫秒轮播下一张图片
                        myInner = setInterval(function(){
                            var num = $("#bannerControl li.active").index();
                            var count = num==(countPicNum-1)?0:num+1;
                            $("#bannerControl li:eq("+count+")").addClass("active").siblings($("#bannerControl li:eq("+count+")")).removeClass("active");
                            $("#bannerList").css("transform","translate("+-($(window).width()*count)+"px, 0px) translateZ(0px)");
                        },3000);
                    });   

   
    success : function(data) {

    //我们试着添加alert(data["data"]);会返回[object, Object],[object, Object],[object, Object]

         //responseCode表示正常的登录状态
                if(0000==data["responseCode"]){

            //这个for循环, 添加所有的<li>标签
                    for(var i=0; i<data["data"].length; i++){

              //jQuery中的.append()方法, 在标签<ul id="bannerList"></ul>中添加<li></li>标签。每个标签中定义了图片属性。
                        $("#bannerList").append('<li><a href="'+data["data"][i]["linkUrl"]+'" target="_self"><img src="'+data["data"][i]["picUrl"]+'" alt="'+data["data"][i]["picName"]+'"></a></li>');
                        $("#bannerControl").append('<li></li>');
                    }

            //定义了图片的总张数 变量countPicNum来表示
                    var countPicNum = data["data"].length;

            
                    $(".control").css({"width":(countPicNum*15)+"px"});
                    $("#bannerControl").css("margin-left",-countPicNum*15*0.5+"px");
                    $("#bannerControl li:first").addClass("active");
                    $("#bannerList li").css("width",$(window).width()+"px");
                    $("#bannerList").css("width",($(window).width()*countPicNum)+"px");

            //定义了默认的自动轮播效果
                    $("#bannerControl li").on("click",function(){
                        clearInterval(myInner);
                        var num = $(this).index();
                        $(this).addClass("active").siblings(this).removeClass("active");
                        $("#bannerList").css("transform","translate("+-($(window).width()*num)+"px, 0px) translateZ(0px)");
                        myInner = setInterval(function(){
                            var num = $("#bannerControl li.active").index();
                            var count = num==(countPicNum-1)?0:num+1;
                            $("#bannerControl li:eq("+count+")").addClass("active").siblings($("#bannerControl li:eq("+count+")")).removeClass("active");
                            $("#bannerList").css("transform","translate("+-($(window).width()*count)+"px, 0px) translateZ(0px)");
                        },3000);
                    });
                    var myInner = setInterval(function(){
                        var num = $("#bannerControl li.active").index();
                        var count = num==(countPicNum-1)?0:num+1;
                        $("#bannerControl li:eq("+count+")").addClass("active").siblings($("#bannerControl li:eq("+count+")")).removeClass("active");
                        $("#bannerList").css("transform","translate("+-($(window).width()*count)+"px, 0px) translateZ(0px)");
                        //$("#bannerList").animate({"margin-left":-($(window).width()*count)+"px"});
                    },3000);                            
</script>

 那么我们找到了完美的轻量级替代方案,swipe.js 2.0.具体如下所示:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html ="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Mobile web轮播Demo展示</title></head>

//引入css样式<link rel="stylesheet" type="text/css" href="css/swipe.css"><body><div class="addWrap"> <div class="swipe" id="mySwipe"> <div class="swipe-wrap">

    //<a>标签的href属性用于指定超链接目标的URL,href属性的值可以是任何有效的相对或绝对的URL,包括片段标识符和JavaScript代码段。
    //javascript:是表示在触发<a>默认动作时,执行一段JavaScript代码,而 javascript:; 表示什么都不执行,这样点击<a>时就没有任何反应。当页面内容很多,有滚动条时,页面不会乱跳,用户体验更好。
<div><a href="javascript:;"><img class="img-responsive" src="images/1.jpg"/></a></div> <div><a href="javascript:;"><img class="img-responsive" src="images/2.jpg"/></a></div> <div><a href="javascript:;"><img class="img-responsive" src="images/3.jpg"/></a></div> </div> </div>

 // <ul id="position"> <li class="cur"></li> <li class=""></li> <li class=""></li> </ul></div><script src="js/swipe.js"></script> <script type="text/javascript">

//上文中<ul id="position">DOM中Element对象,表示HTML元素。var bullets = document.getElementById('position').getElementsByTagName('li');var banner = Swipe(document.getElementById('mySwipe'), {
  
   //开始自动幻灯片(以毫秒为单位 幻灯片之间的时间) auto: 2000,

   //continuous Boolean(default:true)创建一个无线的循环(当滑动到所有动画结束时是否循环滑动) continuous: true,

   //disableScroll Boolean(default:false) 当滚动滚动条时 是否停止幻灯片滚动 disableScroll:false,

   //幻灯片运行中的回调函数 callback: function(pos) { var i = bullets.length; while (i--) { bullets[i].className = ' '; } bullets[pos].className = 'cur'; }});</script></body></html>