今天是近期前端学习的最后一天,讲了一个幻灯片的实例制作,以及json,ajax及jsonp的初步了解。
幻灯片实例
$(function(){
// 1.图片每两秒钟向左滑动一张
// 2.点击向左箭头,图片向右滑动一张
// 3.点击向右箭头,图片向左滑动一张
// 4.圆点和图片一一对应,点击当前圆点左边的圆点,图片向右滑动,点击当前圆点右边的圆点,图片向左滑动
// 5.鼠标放在幻灯片上,幻灯片停止滑动,移开后,恢复滑动
// 点击产生的移动过动画是否开始
var bIsAnim = false;
console.log("yes");
// 由于新的切换效果
// 要求初始时,第 0 张图片显示在left:0的位置
// 第1-5显示在left:760 的位置
// 获取当前所有图片的li对象
var $lis = $('.slidelist li');
// 排除第一个li 剩下的1-5张图片的li
var $li1_5 = $lis.not(':first');
// 第1-5张图片显示在left:760的位置
$li1_5.css({left:760});
// 获取图片的数量
var length = $lis.length;
for (var i=0; i<length; i++){
// 循环生成小圆点
var $newLi = $('<li>');
if (i==0){
// 第一个小圆点高亮
$newLi.addClass('current');
}
// 把小圆点添加到列表里
$('.points').append($newLi);
}
var nowIndex = 0;// 当前的索引
var clickIndex = 0;// 点击的圆点的索引
// 注意设置圆点点击事件,放在生成小圆点后
$('.points li').click(function(){
// 记录点击的索引
clickIndex = $(this).index();
// 移动
move();
})
// 左箭头点击
$('.leftarrow').click(function(){
// 如果动画开始,就不允许再次执行点击的逻辑
if (bIsAnim){
return
}
bIsAnim = true;
// clickIndex 每次-1
clickIndex--;
if (clickIndex<0){
clickIndex==length-1
}
// 一直向右移动
move2(-1);
})
// 右键按点击
$('.rightarrow').click(function(){
// 点击动画开始,bIsAnm置为true
// 如果动画开始,就不允许再次执行点击的逻辑
if(bIsAnim){
return;
}
bIsAnim = true;
// 点右箭头 clickIndex每次加1
clickIndex++;
if(clickIndex>length-1){
clickIndex = 0;
}
// 这里一直向左移动
move2(1)
})
// 每两秒向左移动一次
var timeId = setInterval(function(){
// 相当于每两秒点击一次右箭头
$('.rightarrow').click();
}, 2000)
// 鼠标移动上去和移动出去
$('.slide-con').hover(
function(){
//mouseenter
// 取消定时器
clearInterval(timeId)
},
function(){
// mouseleave
// 开启定时器
timeId = setInterval(function(){
//相当于每2秒 点击一次右箭头
$('.rightarrow').click();
}, 2000)
}
)
// 图片移动
function move(){
if (clickIndex==nowIndex){
// 点击当前圆点 什么都不做
}
// 当前点击的圆点的索引,如果大于当前的索引,向左移动
// 当前点击的圆点的索引,如果小于当前的做引,向右移动
if (clickIndex>nowIndex){
// 向左移动
move2(1);
}else if(clickIndex<nowIndex){
// 向右移动
move2(-1);
}
}
//移动方法
// direction = 1 向左移动
// direction = -1 向右移动
function move2(direction){
// 获取点击的Li
var clickli = $lis.eq(clickIndex);
// 获取当前的li
var nowli = $lis.eq(nowIndex);
// 向左移动
clickli.css({left:760*direction});// 把要向左移动的图片 放到760的位置
clickli.animate({left:0}, animStop);// 向左移动到显示的位置
nowli.animate({left:-760*direction}, animStop);//当前图片移动出去
//移动完成后,更新当前的索引值
nowIndex = clickIndex
// 小圆点高亮
$('.points li').eq(nowIndex).addClass('current').siblings().removeClass('current');
}
// 动画结束执行的方法
function animStop(){
// 把bIsAnim置为false 可以下一次点击
bIsAnim = false;
}
})
json
- json,JavaScript Object Notation的缩写,JavaScript对象表示法,是类似于JavaScript对象的一种数据格式
- 前后台传输的数据都是字符串,json是一种有格式的字符串,还有其他格式如xml等
- JavaScript自定义对象
var $oMan = {
name:'tom',
age:16,
talk:function(){
alert('巴拉拉小魔仙')
}
}
- json格式的数据
{
"name":"tom",
"age":18
}
- 与js对象不同的是,json数据格式的属性名称和字符串值需要加双引号,用单引号或者不用引号会导致读取数据错误,可以在百度上搜索“json格式验证”等关键字使用网页小工具验证json文件格式是否正确
- json的另外一种数据格式是数组,和JavaScript中的数组字面量相同
["jerry","michael",15]
ajax
- 是一种可以让JavaScript发送HTTP请求,与后台通信,获取数据和信息的技术。
异步
- ajax通讯过程是异步的
局部刷新
- ajax可以实现局部刷新,也叫无刷新,是指整个页面不刷新,只是局部刷新。ajax可以自己发送HTTP请求,不用通过浏览器的地址栏。所以页面不会整体刷新,ajax获取到后台数据,更新页面显示数据的部分,就做到了页面的局部刷新,如,百度搜索框每输入一个字符都会局部刷新建议搜索项
同源策略
- ajax请求的页面或资源只能是同一个域下面的资源,不能是其他域的资源,这是在设计ajax时出于安全考虑的,可以通过jsonp技术解决
使用方法
常用参数:
- url :请求地址
- type :请求方式,默认是‘get’,也可以改成’post’
- dataType :设置返回的数据格式,常用的时’json’格式,可以设置成’html’
- data : 设置发送给服务器的数据
- success : 设置请求成功后的回调函数
- error : 设置请求失败后的回调函数
- async : 设置是否异步,默认值是’true’,表示异步
// ajax 本身不支持file的本地获取 <script> $.ajax({ url:"http://192.168.47.79:8888/data.json", type:'get', dataType:'json', data:{'name':"xiaoming"},// 传输给服务器的数据 success:function(data){ console.log("请求成功"); console.log(data.name); }, error:function(){ console.log("请求失败"); } }) </script>
jsonp
- 是一种让Ajax可以跨域请求数据的技术
- Ajax只能请求同一个域下的数据或资源,有时候需要跨域请求数据,就需要用到jsonp技术
- 需要更改的知识在Ajax格式代码中将dataType:’json’改成dataType:’jsonp’
<script>
$.ajax({
url:"https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su",//请求数据的服务器地址
type:'get',
dataType:'jsonp',// 返回数据的类型为json
succecc:function(data){
console.log("请求成功");
console.log(data.s);
},
error:function(){
console.log("请求失败");
},
json:"cb"// 百度的限制
})
</script>