知识点预览1.幻灯片制作2.json数据格式及ajax01-轮播图-获取相关元素【AppleScript】纯文本view__复制代码？123456var$slide=$`('.slide'),``//`div$slideList=$`('.slide_list'),`//轮播列表`$lis=$`('.slide_listli'),/`/carousel中的四个li$prevBtn=$`('.prev'),``//上一个按钮`$nextBtn=$`('.next'),``//下一个按钮`$pointsList=$`('.points');/`/小圆点列表2-轮播图-添加小圆点[AppleScript]纯文本view__复制代码?1234567/`/[/size][/font`][`font=Microsoft雅黑][size=3]1.`根据图片数量动态添加小点for(`vari=0;i``<``iPicCount;i++){`$pointsList.append`('
')`;}/`/1.1第0个小点默认高亮`$pointsList.children`(':first').addClass('active');`轮播图-监听小圆点事件-下一个【AppleScript】纯文本查看__复制代码？]``2。动画前的准备，除了第一个，放在760`$lis.`not(':first').css({``'left':760});`variNowIndex=0的位置`;/`/即将显示的那个variPreviousIndex=0`;//``上一个，`也是要移动的/`/2.1点击小圆点使图片移动动画`$pointsList.delegate`('li','click',``function``(){`/`/记录要显示的图片的索引`iNowIndex=$`(this).index()`;/`/动画移动`fnMoveAnmation`();`}`)`;/`/publicfunction`functionfnMoveAnmation`(`){/`/小圆点高亮处理`$pointsList.children`().eq(iNowIndex).addClass('active').siblings().removeClass('active')`;/`/显示下一张`if(`iNowIndex>iPreviousIndex`){/`/让当前显示的图片从0向左移动-760是出现`$lis.eq`(iPreviousIndex)的位置。animate({``'left':-760});`/`/将图片从原来760的位置移动到0的位置`$lis.eq`(iNowIndex).animate({``'left':0});`/`/记录本次显示的索引，作为下一个动画要设置的位置索引`iPreviousIndex=iNowIndex;}}carouselimage-smalldotevent-previous[AppleScript]plaintext查看__复制代码？1xxxxxxxxxxelse{/`/显示上一个//``准备动画从左到右移动$lis.eq(iNowIndex).css({``'left':-760});//``将当前显示的图片从0移到右边760的位置$lis.eq(iPreviousIndex).animate({``'left':760});//``将要显示的图片从原来的-760移动到0的位置$lis.eq(iNowIndex).animate({``'left':0});/`/记录本次显示的索引，作为下一次动画要设置的位置的索引iPreviousIndex=iNowIndex;}轮播图-跳跃点击BUG解决[AppleScript]纯文本视图重复点击同一个小点时的bug__复制代码？123函数fnMoveAnmation`(`){/`/如果重复点击小圆点，什么都不做`if(`iNowIndex==``iPreviousIndex)return`;[AppleScript]Plaintextview__Copycode?1234567从右向左滑动时/`/解决跳跃式点击BUG``:迈出第一步，把会出现的图片丢到应该出现的位置760`$lis.eq`(iNowIndex).css({"left":760})`fromlefttoright滑动时/`/解决跳跃式点击BUG``:迈出第一步，把会出现的图片扔到应该出现的地方-760`$lis.eq`(iNowIndex).css({"left":-760})`Carouselimage-monitortheclickoftheleftbutton[AppleScript]plaintextview__复制代码？123456/`/3.`点击左边上一个按钮$prevBtn.click`(function``(){`iNowIndex`--;`fnMoveAnmation`();`}`)`轮播图-点击按钮右边[AppleScript]plaintextview__Copycode?12345/`/4.`点击右边的next按钮$nextBtn.click`(function``(){`iNowIndex`++;`fnMoveAnmation`();`}`)`fnMoveAnmation`();`}`)`fnMoveAnmation`功能调整[AppleScript]纯文本视图右边的按钮要向左移动显示第0个if(`iNowIndex>iPicCount-1`){/`/下一张图片时：上一张的下一张图片是第0张`iNowIndex=0`;`/`/动画从右向左移动的准备`$lis.eq`(iNowIndex).css({``'left':760});`/`/让当前显示的图片从0向左移动-760是出现的位置`$lis.eq`(iPreviousIndex).animate({``'left':-760});`}elseif(`iNowIndex<0)``{``//如果是第0张时，继续点击左边的上一张按钮`/`/当是上一张时：上一张我们应该是第0张中的一张就是最后`iNowIndex=iPicCount-1`;`/`/准备动画从左到右移动`$lis.eq`(iNowIndex).css({``'left':-760});`/`/让当前显示的图片从0向右移动760的位置`$lis.eq`(iPreviousIndex).animate({``'left':760});`}else{/`/向左和向右移动right正常情况下将滚动代码放在else`}轮播图中——左右键的bug动画还没有执行，点击左右键时不会做任何事件bIsAnmation=false;//给左右键点击事件添加if动画，动画执行时直接返回fnMoveAnmation，将bIsAnmation设为true。在动画完成后的回调中，将bIsAnmation改回false；滚动`functionfnAutoMove`(`){iNowIndex`++;`fnMoveAnmation`();`}/`/5.`定时器自动滚动varoTimer=setInterval`(fnAutoMove,3000);`Carouselmap-mouseevent[AppleScript]纯文本视图__复制代码？12345678/`/6.鼠标事件`$slide.mouseenter`(function``(){`clearInterval`(oTimer)`;}`)`;$slide.mouseleave`(function``(){`oTimer=setInterval`(fnAutoMove,3000);`}`)`JSON概述和书写格式JSON是JavaScriptObjectNotation的首字母缩写，这个词的意思是JavaScript对象表示法，这里的JSON指的是一种类似于JavaScript对象的数据格式。目前，这种数据格式比较流行，并逐渐取代传统的XML数据格式。JSON格式的数据：【AppleScript】纯文本查看字符串值需要用双引号括起来，单引号或者不引号都会导致读取数据出错。[AppleScript]纯文本视图__复制代码?1[`"tom",18,"programmer"`]3-ajax加载JSON数据$.ajax使用常用参数：1.url请求地址2.类型请求方式，默认为'GET'，常用'POST'请求成功后的回调函数6.error设置请求失败后的回调函数7.async设置是否异步，默认值为'true'，表示异步*前文：*\[AppleScript\]_纯文本查看__复制代码_[?](http://bbs.itheima.com/#)010203040506070809101112`$.ajax``(``{``url``:```js``/``data``.json'``,``type``:```GET'``,``dataType``:```json'``,``data``：``{``'aa'``：``1``}``成功``：``函数``（``数据``??）``{``警报``（``数据``.``name``)``;``}``,``error``:``function``(``)``{``alert``(``'服务器超时，请再试一次Try!'``)``;``}``}``)``;`*新的写法（推荐）：*\[AppleScript\]_plaintextview__copycode_[?](http://bbs.iheima.com/#)0102030405060708091011121314`$.ajax``(``{``url``:``'js``/``数据``.json'``,``type``:``'GET'``,``dataType``:``'json'``,``data``:``{``'aa'``:``1``}``}``)```.done``(``function``(``data``)``{``alert``(``data``.``name``)``;``}``)``.fail``(``function``(``)``{``alert``(``'服务器超时，请重试！'``)``;``}``)``;``/``/``data``.json中的数据：``{``"name"``:``"tom"``,``"age"``:``18``}`***ajax每天刷新新鲜***准备请求的json数据*请求后先校验数据，再写功能代码**15-jsonp原理***ajax只能请求数据或者同域下的资源，有时候需要跨域请求数据，就需要用到jsonp技术，jsonp可以跨域请求数据，其原理主要是利用script标签跨域链接资源jsonp和ajax的原理完全不同，但是jQuery将它们封装成了同一个函数。**16-jsonp跨域请求***\[AppleScript\]_纯文本查看__复制代码_[?](http://bbs.itheima.com/#)1`xxxxxxxxxx$.ajax``(``{``url``:``'js``/``data``.js'``,```type``:``'``get``'``,``dataType``:``'jsonp'``,```jsonpCallback``:``'fnBack'``}``)``.done``(``function``(``data``)``{```alert``(``data``.``name``)``;``}``)``.fail``(``function``(``)``{``alert``(``'服务器超时，请重试！'``)``;``}``)``;``/``/``data``.jsdata:fnBack``(``{``"name"``:``"tom"``,``"age"``:``18``}``)``;`***搜索like360***\[AppleScript\]_纯文本查看__复制代码_[?](http://bbs.iheima.com/#)010203040506070809101112131415161718192021`$``(``函数``(``)``{``$``(``'``#txt01').keyup(函数(){``varsVal``=``$``(``this``)``.val``(``)``;``$.ajax``(``{``url``:``'https``:``/``/``sug.so.``360.``cn``/``建议'``,``type``:``'``get``'``,``dataType``:``'jsonp'``,``/``/``向服务器传递参数``data``:``{``word``:``sVal``}``}``)``.done``(``function``(``data``)``{``varaData``=``data``。s;``$``(``'.``list``'``)``.``empty``(``)``;``for``(``vari``=``0``;i``<``aData.length;i``+``+``)``{``var$li``=``$``(``'``<``li``>``'``+``aData[i]``+``'``<``/``li``>``'``)``;``$li.appendTo``(``$``(``'.``list``'``)``)``;``}``}``)``}``)``}``)`