JQ實現無縫滾動
阿新 • • 發佈：2019-01-25
<script type="text/javascript">
var timer = 0; //定時器初始化
var index = 0; //圖片索引值
var left = 714;//圖片的寬度
var $len = $(".box>li").size();//圖片的數量
function autoImg(){
clearInterval(timer);//開啟一個新的計時器前需要清空之前的計時器
timer = setInterval(function(){//開啟計時器
index ++;//切換下一張圖片
tab();
},2000);
}
autoImg();//呼叫計時器
$(".left").click(function(){//給左按鈕新增點選事件
index --;//往左走圖片的索引值是變小的
tabImg();//實現輪播
autoImg();//開啟計時器
});
$(".right").click(function(){//給右按鈕新增點選事件
index ++;//往左右走圖片的索引值是變大的
tab();//實現輪播
autoImg();//開啟計時器
});
$(".many_btn a").click(function(){//給下面按鈕新增點選事件
clearInterval(timer);//開啟一個新的計時器前需要清空之前的計時器
index = $(this).index();//將當前按鈕的索引賦值給index
$(".box").stop().animate({left: - index * left},0);//通過獲取的索引來算出left值
$(".many_btn a").eq(index).addClass("active").siblings().removeClass("active");//使當前下面的索引背景隨著圖片滾動變色
autoImg();//開啟計時器
});
function tab(){//輪播函式
if(index > $len - 1){//當運動到最後一張圖片
$(".box").stop().animate({left:0},0,function(){//用0秒跳轉到第一張圖片後繼續運動
index = 1//讓索引變為1，目的是剛跳轉到第一張圖片立即運動第二張圖片，實現無縫滾動
$(".box").stop().animate({left:-index*left},500);
});
}else{
$(".box").stop().animate({left:-index*left},500);//每隔500毫秒left值減一張圖片的寬度，也就是顯示出下一張圖片
}
$(".many_btn a").eq(index).addClass("active").siblings().removeClass("active");//使當前下面的索引背景隨著圖片滾動變色
}
function tabImg(){
if(index < 0){//當從第一張圖到前一張圖
$(".box").stop().animate({left:- ($len - 1) * left},0,function(){//立刻跳轉到最後一張圖
index = $len - 2;////讓索引變為倒數第二張，目的是剛跳轉到最後一張圖片立即運動到倒數第二張圖片，實現無縫滾動
$(".box").stop().animate({left:- index * left},500);
});
}else{
$(".box").stop().animate({left: - index * left},500);//每隔500毫秒left值減一張圖片的寬度，也就是顯示出下一張圖片
}
$(".many_btn a").eq(index).addClass("active").siblings().removeClass("active");//使當前下面的索引背景隨著圖片滾動變色
}
</script>
var timer = 0; //定時器初始化
var index = 0; //圖片索引值
var left = 714;//圖片的寬度
var $len = $(".box>li").size();//圖片的數量
function autoImg(){
clearInterval(timer);//開啟一個新的計時器前需要清空之前的計時器
timer = setInterval(function(){//開啟計時器
index ++;//切換下一張圖片
tab();
},2000);
}
autoImg();//呼叫計時器
$(".left").click(function(){//給左按鈕新增點選事件
index --;//往左走圖片的索引值是變小的
tabImg();//實現輪播
autoImg();//開啟計時器
});
$(".right").click(function(){//給右按鈕新增點選事件
index ++;//往左右走圖片的索引值是變大的
tab();//實現輪播
autoImg();//開啟計時器
});
$(".many_btn a").click(function(){//給下面按鈕新增點選事件
clearInterval(timer);//開啟一個新的計時器前需要清空之前的計時器
index = $(this).index();//將當前按鈕的索引賦值給index
$(".box").stop().animate({left: - index * left},0);//通過獲取的索引來算出left值
$(".many_btn a").eq(index).addClass("active").siblings().removeClass("active");//使當前下面的索引背景隨著圖片滾動變色
autoImg();//開啟計時器
});
function tab(){//輪播函式
if(index > $len - 1){//當運動到最後一張圖片
$(".box").stop().animate({left:0},0,function(){//用0秒跳轉到第一張圖片後繼續運動
index = 1//讓索引變為1，目的是剛跳轉到第一張圖片立即運動第二張圖片，實現無縫滾動
$(".box").stop().animate({left:-index*left},500);
});
}else{
$(".box").stop().animate({left:-index*left},500);//每隔500毫秒left值減一張圖片的寬度，也就是顯示出下一張圖片
}
$(".many_btn a").eq(index).addClass("active").siblings().removeClass("active");//使當前下面的索引背景隨著圖片滾動變色
}
function tabImg(){
if(index < 0){//當從第一張圖到前一張圖
$(".box").stop().animate({left:- ($len - 1) * left},0,function(){//立刻跳轉到最後一張圖
index = $len - 2;////讓索引變為倒數第二張，目的是剛跳轉到最後一張圖片立即運動到倒數第二張圖片，實現無縫滾動
$(".box").stop().animate({left:- index * left},500);
});
}else{
$(".box").stop().animate({left: - index * left},500);//每隔500毫秒left值減一張圖片的寬度，也就是顯示出下一張圖片
}
$(".many_btn a").eq(index).addClass("active").siblings().removeClass("active");//使當前下面的索引背景隨著圖片滾動變色
}
</script>