jQuery知识点升华

<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>