jQuery轮播图练习

<script type="text/javascript"> ???????/* ??????功能说明: ??????1. 点击向右(左)的图标, 平滑切换到下(上)一页 ??????2. 无限循环切换: 第一页的上一页为最后页, 最后一页的下一页是第一页 ??????3. 每隔3s自动滑动到下一页 ??????4. 当鼠标进入图片区域时, 自动切换停止, 当鼠标离开后,又开始自动切换 ??????5. 切换页面时, 下面的圆点也同步更新 ??????6. 点击圆点图标切换到对应的页 ??????7. bug :快速点击的时候产生的bug 当前正在翻页的时候，不执行翻页函数 ??????*/ ???????//准备需要使用的变量 ???????$(function () { ?????????var $container = $(‘#container‘) ?????????var $list = $(‘#list‘) ?????????var $points = $("#pointsDiv>span") ?????????var $prev = $(‘#prev‘) ?????????var $next = $(‘#next‘) ?????????var setof = 600 //偏移量 ?????????var Alltime = 400 //总共翻页花费的时间 ?????????var Intem_time = 20 //间隔时间 ?????????var imgCount = $points.length //图片的个数 ?????????var index = 0 //表示当前显示图片的下标和变红原点的下标 ?????????var moving = false //表示最初的状态没有在翻页 ?????????// 1. 点击向右(左)的图标, 平滑切换到下(上)一页 ?????????$next.click(function () { ???????????Page(true) ?????????}) ?????????$prev.click(function () { ???????????Page(false) ?????????}) ???????//3 每隔两秒钟自动翻页，是下一页 ????????var interid = setInterval(function () { ?????????????Page(true) ?????????},2000) ????????// 4. 当鼠标进入图片区域时, 自动切换停止, 当鼠标离开后,又开始自动切换 ?????????$container.hover(function () { ???????????//移入的时候，停止定时器 ?????????????clearInterval(interid) ?????????},function () { ???????????//移出的时候，开始定时器 ???????????interid = setInterval(function () { ?????????????Page(true) ???????????},2000) ?????????}) ?????????// 5. 切换页面时, 下面的圆点也同步更新 updatePoints(next) ?????????// 6 ?点击圆点图标切换到对应的页 ?????????$points.click(function () { ???????????//进行翻页 1:求出目标的下标 ???????????var targetindex = $(this).index() ???????????//目标下标不等于当前显示的下标 ???????????if(targetindex != index) ???????????{ ?????????????Page(targetindex) ???????????} ?????????}) ?????//next参数为3中情况 ?????// （1） true next-> ?????// （2） false pre-> ?????// ?（3） 数值 //需要瞬间翻页 ???????function Page(next) { ??????????/* // ????????//获取当前的left的值 ?????????var currentleft = $list.position().left ?????????//需要偏移的数值 ?????????瞬间翻页 ?????????var offset = next?-setof:+setof ?????????$list.css(‘left‘,offset+currentleft)*/ ???????//使用定时器实现平滑翻页 ?????????//获取当前的left的值 ?????????//偏移量 ?????????if(moving) ?????????{ ???????????return ?//正在翻页的时候取消翻页 ?????????} ?????????//运行函数的时候表示正在翻页 ?????????moving = true ?????????var offset = 0 ?????????if(typeof next === ‘boolean‘) ?????????{ ???????????offset = next ? -600 : 600; ?????????} ?????????else { ???????????// 2 0 offset 为 负值 ???????????// 0 2 offset 为 正 ???????????offset = -(next-index)* setof ?????????} ?????????var currentleft = $list.position().left ?????????//targetleft 目标的距离 ?????????var targetleft = offset +currentleft ?????????//单次移动的短距离 ?????????var Itme_left = offset/(Alltime/Intem_time) ?????????var InteralID = setInterval(function () { ?????????????currentleft += Itme_left ???????????if(currentleft === targetleft) ???????????{ ?????????????clearInterval(InteralID) ?????????????//翻页完成的时候 //停止翻页 ?????????????moving = false ??????????????//当图片到达了做右边图片的时候（1.jpg）,已到左边的第二张图片（1.jpg） ?????????????if(currentleft == (-(imgCount+1)*setof)) //当到达最右边 -3600px的时候 ?????????????{ ???????????????currentleft = -setof ?????????????}else if(currentleft === 0){ ???????????????currentleft = -imgCount*setof ?????????????} ???????????} ???????????$list.css(‘left‘,currentleft) ?????????},20) //到达下一页 ?????????updatePoints(next) //当前只考虑了boolean类型 ???????} ???????function ?updatePoints(next) { ????????????//1:计算出目标原点 ?????????var targetindex = 0 ?????????if(typeof next === "boolean") ?????????{ ???????????if(next){ ?????????????//为真 ?????????????targetindex = index + 1 ?????????????if(targetindex === imgCount)//为最后一张1.jpg的时候 ，span的index = 0 ?????????????{ ???????????????targetindex = 0 ?????????????} ???????????}else { ?????????????targetindex = targetindex -1 ?????????????if(targetindex === -1) ?????????????{ ???????????????targetindex = imgCount - 1 ?????????????} ?????????????// 最左边的图片的时候 targetindex = 4 ???????????} ?????????}else ?????????{ ???????????targetindex = next ?????????} ??????????//将当前下标span class属性 移出 ?????????$points.eq(index).removeClass("on") ????????// $points[index].className = "" ?????????//给目标原点加入 ?????????$points.eq(targetindex).addClass(‘on‘) ?????????//更新index ?????????index = targetindex ???????} ???????})</script>