知識點預習
1.幻燈片的製作2.json資料格式及ajax

01- 輪播圖-獲取相關元素[mw_shl_code=applescript,true]var $slide = $('.slide'), // 輪播區域的div

$slideList = $('.slide_list'), // 輪播列表
$lis = $('.slide_list li'),// 輪播中的四個li
$prevBtn = $('.prev'), // 上一張按鈕
$nextBtn = $('.next'), // 下一張按鈕
$pointsList = $('.points');// 小圓點列表[/mw_shl_code]

2- 輪播圖-新增小圓點[mw_shl_code=applescript,true]// 1.根據圖片張數動態新增小圓點
for (var i = 0; i < iPicCount; i++) {
$pointsList.append('<li></li>');
}
// 1.1 預設第0個小點高亮
$pointsList.children(':first').addClass('active');
[/mw_shl_code]
輪播圖-監聽小圓點事件 - 下一張[mw_shl_code=applescript,true] // 2.動畫前的準備除了第一張 其它 都放到760的位置
$lis.not(':first').css({ 'left': 760 });

var iNowIndex = 0; // 即將要上顯示的這一張
var iPreviousIndex = 0; // 上一張,也是要讓位置的這一張

// 2.1 點選小圓點進行圖片移動動畫
$pointsList.delegate('li', 'click', function () {

    // 記錄即將要顯示的圖片索引
    iNowIndex = $(this).index();
    // 動畫移動
    fnMoveAnmation();
});

// 公共函式
function fnMoveAnmation() {
          // 小圓點高亮處理
          $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;
    } 

}[/mw_shl_code]
 

輪播圖-小圓點事件 - 上一張[mw_shl_code=applescript,true] xxxxxxxxxx else { // 顯示上一張 // 動畫從左邊向右移動的準備 $lis.eq(iNowIndex).css({ 'left': -760 }); // 讓當前顯示的圖片從0移動到右邊760位置 $lis.eq(iPreviousIndex).animate({ 'left': 760 }); // 讓要顯示的圖片從原本-760的位置移動到0的位置 $lis.eq(iNowIndex).animate({ 'left': 0 }); // 記錄這一次顯示的索引 作為下一次動畫時要讓位置的索引 iPreviousIndex = iNowIndex; }[/mw_shl_code]
輪播圖-跨越式點選的BUG解決
重複點選同一個小點時bug
[mw_shl_code=applescript,true] function fnMoveAnmation() {
// 如果重複點選小點什麼也不做
if (iNowIndex == iPreviousIndex) return;[/mw_shl_code]
[mw_shl_code=applescript,true]從右向左邊滑動時
//解決跨越式點選BUG :搶先一步 將要出現的圖片 丟到他該出現的位置 760
$lis.eq(iNowIndex).css({"left":760})

從左向右邊滑動時
//解決跨越式點選BUG :搶先一步 將要出現的圖片 丟到他該出現的位置 -760
$lis.eq(iNowIndex).css({"left":-760}) [/mw_shl_code]
輪播圖-監聽左邊按鈕的點選
[mw_shl_code=applescript,true]// 3.點選左邊上一張按鈕
$prevBtn.click(function () {

    iNowIndex--;
    fnMoveAnmation();
})

[/mw_shl_code]
輪播圖-右側按鈕的點選
[mw_shl_code=applescript,true] // 4.點選右邊下一張按鈕
    $nextBtn.click(function () {  
        iNowIndex++;
        fnMoveAnmation();
    })[/mw_shl_code]
fnMoveAnmation函式的調整
[mw_shl_code=applescript,true]// 如果最後一張後繼續點選右邊按鈕,應該向左移動的方式來顯示第0張
        if (iNowIndex > iPicCount - 1) {
            // 下一張時:最後一張的下一張是第0張
            iNowIndex = 0;
            // 動畫從右邊向左移動的準備
            $lis.eq(iNowIndex).css({ 'left': 760 });
            // 讓當前顯示的圖片從0移動到左邊-760為要出現的讓位置
            $lis.eq(iPreviousIndex).animate({ 'left': -760 });

    } else if (iNowIndex < 0) { // 如果是第0張時繼續點選左邊上一張按鈕

        // 上一張時:第0張的上一第應該是最後一張
        iNowIndex = iPicCount - 1;
        // 動畫從左邊向右移動的準備
        $lis.eq(iNowIndex).css({ 'left': -760 });
        // 讓當前顯示的圖片從0移動到右邊760位置
        $lis.eq(iPreviousIndex).animate({ 'left': 760 });
            } else {
            // 把正常情況下的左右滾動程式碼放在else裡面
            }[/mw_shl_code]

輪播圖- 左右按鈕快速點選的bug
動畫還沒有執行完，點選左右按鈕什麼事件也不做
bIsAnmation = false; // 是否正在動畫中
左右按鈕點選事件中加入如果動畫中直接返回
進入fnMoveAnmation裡時把bIsAnmation改為true
最後的動畫執行完成的回撥中把bIsAnmation再改回為false;
輪播圖-自動播放
[mw_shl_code=applescript,true] // 自動滾動
function fnAutoMove() {
iNowIndex++;
fnMoveAnmation();
}

// 5.定時器自動滾動
var oTimer = setInterval(fnAutoMove, 3000);[/mw_shl_code]

輪播圖-滑鼠事件
[mw_shl_code=applescript,true]//6.滑鼠的事件
$slide.mouseenter(function () {
clearInterval(oTimer);
});

$slide.mouseleave(function () {
    oTimer = setInterval(fnAutoMove, 3000);
})

[/mw_shl_code]
JSON概述和書寫格式
JSON是 JavaScript Object Notation 的首字母縮寫，單詞的意思是JavaScript物件表示法，這裡說的JSON指的是類似於JavaScript物件的一種資料格式，目前這種資料格式比較流行，逐漸替換掉了傳統的XML資料格式。
JSON格式的資料：
[mw_shl_code=applescript,true]{
"name":"tom",
"age":18
}[/mw_shl_code]
與JavaScript物件不同的是，JSON資料格式的屬性名稱和字串值需要用雙引號引起來，用單引號或者不用引號會導致讀取資料錯誤。
[mw_shl_code=applescript,true]["tom",18,"programmer"][/mw_shl_code]
3- ajax載入JSON資料
$.ajax使用方法
常用引數：
1、url 請求地址2、type 請求方式，預設是'GET'，常用的還有'POST' 3、dataType 設定返回的資料格式，常用的是'json'格式，也可以設定為'html' 4、data 設定傳送給伺服器的資料 5、success 設定請求成功後的回撥函式 6、error 設定請求失敗後的回撥函式 7、async 設定是否非同步，預設值是'true'，表示非同步

以前的寫法：
[mw_shl_code=applescript,true]$.ajax({
url: 'js/data.json',
type: 'GET',
dataType: 'json',
data:{'aa':1}
success:function(data){
alert(data.name);
},
error:function(){
alert('伺服器超時，請重試！');
}
});
[/mw_shl_code]
新的寫法(推薦)：
[mw_shl_code=applescript,true]$.ajax({
url: 'js/data.json',
type: 'GET',
dataType: 'json',
data:{'aa':1}
})
.done(function(data) {
alert(data.name);
})
.fail(function() {
alert('伺服器超時，請重試！');
});

    // data.json裡面的資料： {"name":"tom","age":18}[/mw_shl_code]

ajax天天生鮮區域性重新整理
準備好要請求的JSON資料
請求後先驗證資料，再寫功能程式碼

15- jsonp的原理
ajax只能請求同一個域下的資料或資源，有時候需要跨域請求資料，就需要用到jsonp技術，jsonp可以跨域請求資料，它的原理主要是利用了script標籤可以跨域連結資源的特性。jsonp和ajax原理完全不一樣，不過jQuery將它們封裝成同一個函式。

16- jsonp跨域請求
[mw_shl_code=applescript,true] xxxxxxxxxx $.ajax({ url:'js/data.js', type:'get', dataType:'jsonp', jsonpCallback:'fnBack'}).done(function(data){ alert(data.name);}).fail(function() { alert('伺服器超時，請重試！');});// data.js裡面的資料： fnBack({"name":"tom","age":18});[/mw_shl_code]
仿360搜尋
[mw_shl_code=applescript,true] $(function(){
$('#txt01').keyup(function(){
var sVal = $(this).val();
$.ajax({
url:'https://sug.so.360.cn/suggest',
type:'get',
dataType:'jsonp',
//給伺服器傳遞引數
data: {word: sVal}
})
.done(function(data){
var aData = data.s;
$('.list').empty();
for(var i=0;i<aData.length;i++)
{
var $li = $('<li>'+ aData +'</li>');
$li.appendTo($('.list'));
}
})
})
})[/mw_shl_code]