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

 

　　'）;

 

　　}

 

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