知識點預(yù)習(xí)
1.幻燈片的制作2.json數(shù)據(jù)格式及ajax
成都創(chuàng)新互聯(lián)公司客戶idc服務(wù)中心，提供四川雅安服務(wù)器托管、成都服務(wù)器、成都主機托管、成都雙線服務(wù)器等業(yè)務(wù)的一站式服務(wù)。通過各地的服務(wù)中心，我們向成都用戶提供優(yōu)質(zhì)廉價的產(chǎn)品以及開放、透明、穩(wěn)定、高性價比的服務(wù)，資深網(wǎng)絡(luò)工程師在機房提供7*24小時標準級技術(shù)保障。
01- 輪播圖-獲取相關(guān)元素[mw_shl_code=applescript,true]var $slide = $('.slide'), // 輪播區(qū)域的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.根據(jù)圖片張數(shù)動態(tài)添加小圓點
for (var i = 0; i < iPicCount; i++) {
$pointsList.append('
var iNowIndex = 0; // 即將要上顯示的這一張
var iPreviousIndex = 0; // 上一張,也是要讓位置的這一張
// 2.1 點擊小圓點進行圖片移動動畫
$pointsList.delegate('li', 'click', function () {
// 記錄即將要顯示的圖片索引
iNowIndex = $(this).index();
// 動畫移動
fnMoveAnmation();
});
// 公共函數(shù)
function fnMoveAnmation() {
// 小圓點高亮處理
$pointsList.children().eq(iNowIndex).addClass('active').siblings().removeClass('active');
// 顯示下一張
if (iNowIndex > iPreviousIndex) {
// 讓當前顯示的圖片從0移動到左邊-760為要出現(xiàn)的讓位置
$lis.eq(iPreviousIndex).animate({ 'left': -760 });
// 讓要出現(xiàn)的圖片從原本的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解決
重復(fù)點擊同一個小點時bug
[mw_shl_code=applescript,true] function fnMoveAnmation() {
// 如果重復(fù)點擊小點什么也不做
if (iNowIndex == iPreviousIndex) return;[/mw_shl_code]
[mw_shl_code=applescript,true]從右向左邊滑動時
//解決跨越式點擊BUG :搶先一步 將要出現(xiàn)的圖片 丟到他該出現(xiàn)的位置 760
$lis.eq(iNowIndex).css({"left":760})
從左向右邊滑動時
//解決跨越式點擊BUG :搶先一步 將要出現(xiàn)的圖片 丟到他該出現(xiàn)的位置 -760
$lis.eq(iNowIndex).css({"left":-760}) [/mw_shl_code]
輪播圖-監(jiān)聽左邊按鈕的點擊
[mw_shl_code=applescript,true]// 3.點擊左邊上一張按鈕
$prevBtn.click(function () {
iNowIndex--;
fnMoveAnmation();
})[/mw_shl_code]
輪播圖-右側(cè)按鈕的點擊
[mw_shl_code=applescript,true] // 4.點擊右邊下一張按鈕
$nextBtn.click(function () {
iNowIndex++;
fnMoveAnmation();
})[/mw_shl_code]
fnMoveAnmation函數(shù)的調(diào)整
[mw_shl_code=applescript,true]// 如果最后一張后繼續(xù)點擊右邊按鈕,應(yīng)該向左移動的方式來顯示第0張
if (iNowIndex > iPicCount - 1) {
// 下一張時:最后一張的下一張是第0張
iNowIndex = 0;
// 動畫從右邊向左移動的準備
$lis.eq(iNowIndex).css({ 'left': 760 });
// 讓當前顯示的圖片從0移動到左邊-760為要出現(xiàn)的讓位置
$lis.eq(iPreviousIndex).animate({ 'left': -760 }); } else if (iNowIndex < 0) { // 如果是第0張時繼續(xù)點擊左邊上一張按鈕
// 上一張時:第0張的上一第應(yīng)該是最后一張
iNowIndex = iPicCount - 1;
// 動畫從左邊向右移動的準備
$lis.eq(iNowIndex).css({ 'left': -760 });
// 讓當前顯示的圖片從0移動到右邊760位置
$lis.eq(iPreviousIndex).animate({ 'left': 760 });
} else {
// 把正常情況下的左右滾動代碼放在else里面
}[/mw_shl_code]輪播圖- 左右按鈕快速點擊的bug
動畫還沒有執(zhí)行完，點擊左右按鈕什么事件也不做
bIsAnmation = false; // 是否正在動畫中
左右按鈕點擊事件中加入如果動畫中直接返回
進入fnMoveAnmation里時把bIsAnmation改為true
最后的動畫執(zhí)行完成的回調(diào)中把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對象的一種數(shù)據(jù)格式，目前這種數(shù)據(jù)格式比較流行，逐漸替換掉了傳統(tǒng)的XML數(shù)據(jù)格式。
JSON格式的數(shù)據(jù)：
[mw_shl_code=applescript,true]{
"name":"tom",
"age":18
}[/mw_shl_code]
與JavaScript對象不同的是，JSON數(shù)據(jù)格式的屬性名稱和字符串值需要用雙引號引起來，用單引號或者不用引號會導(dǎo)致讀取數(shù)據(jù)錯誤。
[mw_shl_code=applescript,true]["tom",18,"programmer"][/mw_shl_code]
3- ajax加載JSON數(shù)據(jù)
$.ajax使用方法
常用參數(shù)：
1、url 請求地址2、type 請求方式，默認是'GET'，常用的還有'POST' 3、dataType 設(shè)置返回的數(shù)據(jù)格式，常用的是'json'格式，也可以設(shè)置為'html' 4、data 設(shè)置發(fā)送給服務(wù)器的數(shù)據(jù) 5、success 設(shè)置請求成功后的回調(diào)函數(shù) 6、error 設(shè)置請求失敗后的回調(diào)函數(shù) 7、async 設(shè)置是否異步，默認值是'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('服務(wù)器超時，請重試！');
}
});
[/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('服務(wù)器超時，請重試！');
});
// data.json里面的數(shù)據(jù)： {"name":"tom","age":18}[/mw_shl_code]ajax天天生鮮局部刷新
準備好要請求的JSON數(shù)據(jù)
請求后先驗證數(shù)據(jù)，再寫功能代碼
15- jsonp的原理
ajax只能請求同一個域下的數(shù)據(jù)或資源，有時候需要跨域請求數(shù)據(jù)，就需要用到j(luò)sonp技術(shù)，jsonp可以跨域請求數(shù)據(jù)，它的原理主要是利用了script標簽可以跨域鏈接資源的特性。jsonp和ajax原理完全不一樣，不過jQuery將它們封裝成同一個函數(shù)。
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('服務(wù)器超時，請重試！');});// data.js里面的數(shù)據(jù)： 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.#/suggest',
type:'get',
dataType:'jsonp',
//給服務(wù)器傳遞參數(shù)
data: {word: sVal}
})
.done(function(data){
var aData = data.s;
$('.list').empty();
for(var i=0;i
var $li = $('
