非常好用的無縫輪播代碼

1、非常好用的無縫輪播代碼（向左平滑）/* * 本動(dòng)畫基于jquery框架 * 勤奮的迷糊君 2015-7-10 * Begin * param btn div個(gè)數(shù)索引 * param i 位置參數(shù) * param w 寬度索引初始值 * param currentIndex bnner按鈕位置索引 * param speed 動(dòng)畫速度 * param interval 間隔時(shí)間 * param imgWidth 運(yùn)動(dòng)寬度 */function banner() var i = 0var currentIndex = i;var lastEq = $("#bannerImgBox li&

2、quot;).lengthvar speed = 600/動(dòng)畫速度var interval = 3600/間隔時(shí)間var imgWidth = $(".bannerImg").width() if(lastEq > 1 ) function use1() /封裝一個(gè)動(dòng)作（設(shè)置圖片絕對(duì)位置下的left屬性及層疊關(guān)系下的show和hide）$("#bannerImgBox li").css(left:imgWidth)$("#bannerImgBox li").hide()$("#bannerImgBox li"

3、).eq(i).show()function use2() /封裝一個(gè)動(dòng)作（變更z-index屬性）$("#bannerImgBox li").css(zIndex:0)$("#bannerImgBox li").eq(i).css(zIndex:5)$("#bannerImgBox li").css(left:imgWidth) function use3() /封裝一個(gè)動(dòng)作（設(shè)置圖片絕對(duì)位置下的left屬性及層疊關(guān)系下的show和hide;向左并與鼠標(biāo)事件關(guān)聯(lián)）$("#bannerImgBox li").css

4、(left:imgWidth)$("#bannerImgBox li").hide() $("#bannerImgBox li").eq(currentIndex).show() function useMinF() /封裝一個(gè)動(dòng)作（配合animate改變圖片left屬性）if(i < lastEq - 1) $("#bannerImgBox li").eq(i+1).css(left:imgWidth*2)$("#bannerImgBox li").eq(i + 1).show(i = i+1 )curre

5、ntIndex = 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);

6、/向左運(yùn)動(dòng)并重置位置use2()/執(zhí)行use2函數(shù)if(i < lastEq - 1) $("#bannerImgBox li").eq(i - 1).hide()else $("#bannerImgBox li").eq(0).hide()function useMinR() /封裝一個(gè)動(dòng)作（設(shè)置圖片絕對(duì)位置下的left屬性及層疊關(guān)系下的show和hide;向右并與鼠標(biāo)事件關(guān)聯(lián)）if(i <= lastEq - 1 && i > 0 ) $("#bannerImgBox li").eq(i-1).c

7、ss(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("

8、;left":0, speed, function()$("#bannerImgBox").animate("left":-imgWidth,0);use2()/執(zhí)行use2函數(shù)if(i <= lastEq - 1 && i > 0 ) $("#bannerImgBox li").eq(i - 1).hide()else $("#bannerImgBox li").eq(lastEq - 1).hide()function ScrollLeftX() use3()useMinF

9、()/執(zhí)行use3和useMinF函數(shù)點(diǎn)擊向在Minfunction ScrollRightX() use3()useMinR()/執(zhí)行use3和useMinR函數(shù),點(diǎn)擊向右Minfunction ScrollLeft() use1()useMinF()/執(zhí)行use1和useMinF函數(shù),圖片自動(dòng)向左滾動(dòng)Minfunction ScrollRight() use1()useMinR()/執(zhí)行use1和useMinR函數(shù),圖片自動(dòng)向右滾動(dòng)Minfunction AutoScollObj() ScrollLeft();colorPotion()var AutoScroll = setInterva

10、l(AutoScollObj, interval)/每隔interval毫秒執(zhí)行一次ScrollLeft和colorPotion，并賦值給 AutoScroll；圖片自動(dòng)滾動(dòng)$("#banner").hover(function()$(".lrBox").show();/鼠標(biāo)移入顯示箭頭clearInterval(AutoScroll);/清除自動(dòng)滾動(dòng)setTimeout(function () flag=true;, speed) , function()flag=false;/圖片滾動(dòng)時(shí)，鼠標(biāo)動(dòng)作不生效$(".lrBox").hi

11、de();/鼠標(biāo)移出隱藏箭頭AutoScroll = setInterval(AutoScollObj, interval)/鼠標(biāo)移出后再次執(zhí)行)function gotoLeft() / 點(diǎn)擊左箭頭if(flag) flag=false;/ 動(dòng)畫結(jié)束前鼠標(biāo)事件失效ScrollRight();setTimeout(function () flag=true;, speed)colorPotion()function gotoRight() / 點(diǎn)擊右箭頭if(flag) flag=false; / 動(dòng)畫結(jié)束前鼠標(biāo)事件失效ScrollLeft();setTimeout(function () f

12、lag=true;/ 動(dòng)畫結(jié)束鼠標(biāo)事件生效, speed)colorPotion();for(var btn = 0; btn < lastEq; btn+)/根據(jù)圖片數(shù)量創(chuàng)建焦點(diǎn)并判斷寬度使div居中var childdiv=$('<div></div>')childdiv.attr('class','bannerBtn'); /賦類childdiv.appendTo("#bannerBtnBox");/賦Idvar wTemp = 0; / 焦點(diǎn)按鈕父級(jí)盒子的寬度初始值$(".ban

13、nerBtn").each(function()wTemp += parseInt($(this).width();/獲取寬度并累加);$("#bannerBtnBox").width(wTemp);/賦寬度$(".bannerBtn").css("cursor","pointer")/手型鼠標(biāo)$(".bannerBtn").eq(0).addClass("bannerBtnRed");/第一個(gè)焦點(diǎn)為紅色$(".zJt").click(funct

14、ion()gotoLeft()/圖片向左)$(".yJt").click(function()gotoRight()/圖片向右)function colorPotion() /封裝一個(gè)動(dòng)作（焦點(diǎn)變色）$(".bannerBtn").removeClass("bannerBtnRed")$(".bannerBtn").eq(i).addClass("bannerBtnRed")$(".bannerBtn").click(function() / 通過索引判斷圖片以及焦點(diǎn)向左或向右if(flag)flag = false;/ 動(dòng)畫結(jié)束前鼠標(biāo)事件失效$(".bannerBtn").removeClass("bannerBtnRed");$(this).addClass("bannerBtnRed");var clickIndex = $(this).index();/ 自定義索引值賦值if(clickIndex < currentIndex) i = $(".bannerBtn").index(this)+1 ;/建立位置索引并賦值給iScrollRig