非常好用的无缝轮播代码.docx

非常好用的无缝轮播代码（向左平滑）/* * 本动画基于jquery框架 * 勤奋的迷糊君 2015-7-10 * Begin * param btn div个数索引 * param i 位置参数 * param w 宽度索引初始值 * param currentIndex bnner按钮位置索引 * param speed 动画速度 * param interval 间隔时间 * param imgWidth 运动宽度 */function banner() var i = 0var currentIndex = i;var lastEq = $(#bannerImgBox li).lengthvar speed = 600/动画速度var interval = 3600/间隔时间var imgWidth = $(.bannerImg).width() if(lastEq 1 ) function use1() /封装一个动作（设置图片绝对位置下的left属性及层叠关系下的show和hide）$(#bannerImgBox li).css(left:imgWidth)$(#bannerImgBox li).hide()$(#bannerImgBox li).eq(i).show()function use2() /封装一个动作（变更z-index属性）$(#bannerImgBox li).css(zIndex:0)$(#bannerImgBox li).eq(i).css(zIndex:5)$(#bannerImgBox li).css(left:imgWidth) function use3() /封装一个动作（设置图片绝对位置下的left属性及层叠关系下的show和hide;向左并与鼠标事件关联）$(#bannerImgBox li).css(left:imgWidth)$(#bannerImgBox li).hide() $(#bannerImgBox li).eq(currentIndex).show() function useMinF() /封装一个动作（配合animate改变图片left属性）if(i lastEq - 1) $(#bannerImgBox li).eq(i+1).css(left:imgWidth*2)$(#bannerImgBox li).eq(i + 1).show(i = i+1 )currentIndex = i /索引值为ielse $(#bannerImgBox li).eq(0).css(left:imgWidth*2)$(#bannerImgBox li).eq(0).show(i = 0) currentIndex = i$(#bannerImgBox).animate(left:-imgWidth*2, speed, function() $(#bannerImgBox).animate(left:-imgWidth,0); /向左运动并重置位置use2()/执行use2函数if(i lastEq - 1) $(#bannerImgBox li).eq(i - 1).hide()else $(#bannerImgBox li).eq(0).hide()function useMinR() /封装一个动作（设置图片绝对位置下的left属性及层叠关系下的show和hide;向右并与鼠标事件关联）if(i 0 ) $(#bannerImgBox li).eq(i-1).css(left:0)$(#bannerImgBox li).eq(i - 1).show(i = i-1 )currentIndex = i/ 自定义索引值赋值else $(#bannerImgBox li).eq(lastEq - 1).css(left:0)$(#bannerImgBox li).eq(lastEq - 1).show(i = lastEq - 1)currentIndex = lastEq - 1 / 自定义索引值赋值$(#bannerImgBox).animate(left:0, speed, function()$(#bannerImgBox).animate(left:-imgWidth,0);use2()/执行use2函数if(i 0 ) $(#bannerImgBox li).eq(i - 1).hide()else $(#bannerImgBox li).eq(lastEq - 1).hide()function ScrollLeftX() use3()useMinF()/执行use3和useMinF函数点击向在Minfunction ScrollRightX() use3()useMinR()/执行use3和useMinR函数,点击向右Minfunction ScrollLeft() use1()useMinF()/执行use1和useMinF函数,图片自动向左滚动Minfunction ScrollRight() use1()useMinR()/执行use1和useMinR函数,图片自动向右滚动Minfunction AutoScollObj() ScrollLeft();colorPotion()var AutoScroll = setInterval(AutoScollObj, interval)/每隔interval毫秒执行一次ScrollLeft和colorPotion，并赋值给 AutoScroll；图片自动滚动$(#banner).hover(function()$(.lrBox).show();/鼠标移入显示箭头clearInterval(AutoScroll);/清除自动滚动setTimeout(function () flag=true;, speed) , function()flag=false;/图片滚动时，鼠标动作不生效$(.lrBox).hide();/鼠标移出隐藏箭头AutoScroll = setInterval(AutoScollObj, interval)/鼠标移出后再次执行)function gotoLeft() / 点击左箭头if(flag) flag=false;/ 动画结束前鼠标事件失效ScrollRight();setTimeout(function () flag=true;, speed)colorPotion()function gotoRight() / 点击右箭头if(flag) flag=false; / 动画结束前鼠标事件失效ScrollLeft();setTimeout(function () flag=true;/ 动画结束鼠标事件生效, speed)colorPotion();for(var btn = 0; btn lastEq; btn+)/根据图片数量创建焦点并判断宽度使div居中var childdiv=$()childdiv.attr(class,bannerBtn); /赋类childdiv.appendTo(#bannerBtnBox);/赋Idvar wTemp = 0; / 焦点按钮父级盒子的宽度初始值$(.bannerBtn).each(function()wTemp += parseInt($(this).width();/获取宽度并累加);$(#bannerBtnBox).width(wTemp);/赋宽度$(.bannerBtn).css(cursor,pointer)/手型鼠标$(.bannerBtn).eq(0).addClass(bannerBtnRed);/第一个焦点为红色$(.zJt).click(function()gotoLeft()/图片向左)$(.yJt).click(function()gotoRight()/图片向右)function colorPotion() /封装一个动作（焦点变色）$(.bannerBtn).removeClass(bannerBtnRed)$(.bannerBtn).eq(i).addClass(bannerBtnRed)$(.bannerBtn).click(function() / 通过索引判断图片以及焦点向左或向右if(flag)flag = false;/ 动画结束前鼠标事件失效$(.bannerBtn).removeClass(bannerBtnRed);$(this).addClass(bannerBtnRed);var clickIndex = $(this).index();/ 自定义索引值赋值if(clic