使用JavaScriptjQuery实现页面特效第十章-理论.pptVIP

利用滑动的效果轮播4幅图片，而且能实现自动和手动两种播放方式。需求说明如下： （1）当页面加载完毕后，开始显示第一幅图片，对应的编号1也高亮显示，初始效果如图。 10.6 利用滑动效果轮播图片 （2）3秒钟后，第一幅图片自动向上滑动逐渐隐藏，第二幅图片向上滑动逐渐显示，编号2高亮显示，效果如图。 10.6 利用滑动效果轮播图片 （3）当第二幅图片完全显示3秒钟后，第二幅开始向上滑动逐渐隐藏，第三幅向上滑动逐渐显示。重复执行此过程，直到4幅图片轮播结束。 （4）开始下一轮时，第一幅图片向下滑入显示。仍然从第一幅图片开始以滑动的效果轮流播放。 （5）在自动播放的过程中，当用户把光标移入到编号上时，如“3”，自动播放停止，直接滑动显示第三幅图片，当光标从编号“3”上移出时，手动播放停止，开始从第四幅图片开始自动播放。 10.6 利用滑动效果轮播图片 1）新建html页面，在页面添加id=“main”的div版块，其中嵌套两个无序列表，分别组织要轮播的四幅图片和图片的编号，html代码如下： 10.6 利用滑动效果轮播图片 div id=main ul id=imgarea lia href=#img src=images/list1.jpg width=350 height=300//a/li /ul ul id=imgID li1/li /ul /div 2）添加样式规则，重点是设置div（id=“main”）父块的大小和一幅图片的大小保持一致，再利用 “overflow:hidden”属性隐藏超出范围的三幅图片。数字列表利用“position:absolute”属性进行绝对定位，使其以父容器的左上角为参考点，距离父容器的左边框5px，距离父容器的下边框5px。 10.6 利用滑动效果轮播图片 3）在页面中导入jQuery框架。 4）在脚本中，创建turnPics()函数，实现以滑动效果播放四幅图片的功能，且能在自动和手动两种播放方式之间相互切换。脚本代码如下： 10.6 利用滑动效果轮播图片 var index = 0; //当前播放图片的索引 var stop = false; //标识是否是手动播放，默认false表示自动播放 var $pagesLis = $(#main).find(#imgID li);//保存组织编号的li $pagesLis.eq(index).addClass(active) .siblings()//兄弟元素 .removeClass(active); var mainDivh = $(div#main).height(); //获取div的高度 在turnPics()函数体中，首先声明变量index保存当前播放图片的索引，初始值是0，默认从第一幅图片开始播放，图片左下角的编号1高亮显示；声明变量stop标示是否是手动播放，默认是false，默认自动播放；声明变量$pagesLis保存组织四个编号的li标签对象。声明变量mainDivh保存id=“main”的div版块的高度。 10.6 利用滑动效果轮播图片 然后使用window对象的setInterval方法，实现自动播放。自动播放的基本原理是每隔3秒对index进行自动增加1的操作，当自增到4即图片的总数量是i时，index再次恢复初始值0。同时根据当前的index，以动画的效果，设置无序列表ul(class=imgarea)上外边距，使其在1秒内，上外边距的值逐渐变成表达式“-mainDivh*index”所计算的结果，在表达式中负号表示无序列表ul(class=imgarea)向相反的方向移动，假设当前index=2，即要播放第三幅图片，那么无序列表ul(class=imgarea)的上外边距是-2*mainDivh，无序列表会向上移动，且移动的距离是父块高度的两倍，导致前两幅移出到父块div之外，在css中通过设置父块的“overflow:hidden”属性使溢出的前两幅和最后一幅图片隐藏，从而实现了播放第3幅图片。 10.6 利用滑动效果轮播图片 实现自动播放的脚本代码如下： 10.6 利用滑动效果轮播图片 setInterval(function () { if (stop) return; index++; if (index == $pagesLi