三十五、jquery動畫 無縫滾動兩種方式
無縫輪播有兩種方式，一種可以讓ul中的每個li進行移動，另外一種時令整個ul進行移動。無縫輪播效果之前用js寫過一次，以下是用jQuery分別實現這兩種方式；
一、第一種 控制每個li標籤移動實現無縫輪播
1.基本佈局樣式
2.實現自動向左輪播
採用列舉物件封裝函式的方法，封裝自動輪播的方法:利用jQuery的自定義動畫animate改變第一張圖片的marginLeft令其向左移動，當移動結束時將第一張圖片追加到末尾。(注意還需修改其marginLeft為0)
animate({執行動畫屬性},執行時間,運動方式,動畫完成回撥函式)
var Animate={
imganimate:function(){
$(".ulinfo li").first().animate({
marginLeft:"-600px"
},1000,"linear",function(){
$(this).css("marginLeft","0px");
})
}
}
3.滑鼠進入圖片停止輪播離開繼續輪播
採用鏈式操作；移除繫結定時器；
//滑鼠進入停止 離開繼續
pauseimg:function(){
clearInterval(time);
}).mouseleave(function(){
time=setInterval("Animate.imganimate()",1500);
});
},
4.封裝索引圈建立方法及跟隨圖片自動轉換
利用jQuery動態建立dom元素建立索引圈；
//索引圈建立
circleCreate:function(){
var lenth=$(".ulinfo li").length;
for (var i=0;i<lenth;i++){
var circle=$("<div></div>");
circle.addClass("dian");
$(".circle").append(circle);
}
$(".dian").eq(0).css("backgroundColor","red");
}
定義全域性變數，在自動輪播封裝方法新增索引圈自動跟隨變換；
注意：count這裡%6，當然也可以if判斷設定count=0;
//索引圈自動跟隨轉換
count++;
$(".dian").css("backgroundColor","");
$(".dian").eq(count%6).css("backgroundColor","red");
5.封裝任意進入某個索引圈對應圖片跟隨轉換
首先任意進入一個索引圈，其他索引圈為白，當前為紅；
求當前進入索引圈索引值與圖片索引值(count%6)的差值，判斷差值正負，正值則進入圈在播放圖片之後，負值則進入圈在播放圖片之前，這時就需要處理差值，根據這個值確定圖片輪轉的次數；
注意：這裡需要處理兩個bug
A. 反覆進入同一個圈的bug
B. 當快速滑過幾個索引圈，上一個還未結束下一個操作被觸發的bug(遞迴方法，移除繫結事件；或者定義標誌位處理bug)
//進入索引圈對應圖片跟隨變換
incircle:function(){
$(".dian").each(function(index){
$(this).mouseenter(function(){
//解綁其它索引圈進入事件
$(".dian").css("backgroundColor","").unbind("mouseenter");
$(this).css("backgroundColor","red");
//計算輪播次數
var num=(index-count%6)<0?index-count%6+6:index-count%6;
//處理反覆進入同一索引圈的bug
if(num==0){
Animate.incircle();
return;
}
shift();
var shiftnum=0;//定義實際輪播次數
function shift(){
$(".ulinfo li").first().animate({
marginLeft:"-600px"
},1000/num,function(){
$(".ulinfo").append($(this));
$(this).css("marginLeft","0px");
shiftnum++;
if(shiftnum>=num){
count=index;
Animate.incircle();
return;
}
shift();//遞迴呼叫
});
}
});
})
},
//進入索引圈對應圖片跟隨變換
incircle:function(){
$(".dian").each(function(index){
$(this).mouseenter(function(){
//解綁其它索引圈進入事件
$(".dian").css("backgroundColor","").unbind("mouseenter");
$(this).css("backgroundColor","red");
//計算輪播次數
var num=(index-count%6)<0?index-count%6+6:index-count%6;
//處理反覆進入同一索引圈的bug
if(num==0){
Animate.incircle();
return;
}
shift();
var shiftnum=0;//定義實際輪播次數
function shift(){
$(".ulinfo li").first().animate({
marginLeft:"-600px"
},1000/num,function(){
$(".ulinfo").append($(this));
$(this).css("marginLeft","0px");
shiftnum++;
if(shiftnum>=num){
count=index;
Animate.incircle();
return;
}
shift();//遞迴呼叫
});
}
});
})
},
5.左右箭頭點選事件
需要注意的是點選右邊時，輪播是反方向，需要每次將最後一張新增到最前面，原本第一張向後調整600px,另外索引圈也是反方向轉；
注意：通過移除繫結事件處理多次連續點選的bug
點選右側反向，需要改變ul的marginleft值處理空白的bug;
is() 根據選擇器/元素/jQuery 物件檢查匹配元素集合，如果存在至少一個匹配元素，則返回 true
//左右點選
AddClick:function(){
$("#left,#right").on('click',addclick);
function addclick() {
var that=$(this);
that.unbind("click",addclick);
if($(this).is("#left")){//判斷左右
//left
$(".ulinfo li:first").animate({
marginLeft:"-600px"
},500,"linear",function(){
$(this).appendTo($(this).parent());
$(this).css("marginLeft","0px");
//索引圈也得跟隨
count++;
$(".dian").css("backgroundColor","");
$(".dian").eq(count%6).css("backgroundColor","red");
//重新繫結事件
$(that).bind("click", addclick)
})
}else{
//right
$(".ulinfo li:first").animate({
marginLeft: "600px"
},500, "linear", function () {
$(".ulinfo li:last").prependTo($(this).parent());
$(this).css("marginLeft","0px");
count--;
$(".dian").css("backgroundColor", "");
$(".dian").eq(count % 6).css("backgroundColor", "red");
//重新繫結事件
$(that).bind("click",addclick);
});
}
}
}
二、第二種 控制整個ul標籤移動實現無縫輪播(較第一種簡單)
1.基本結構樣式一致
2.自動向左輪播：將整個ul向左移動，當移動完最後一張圖片，整體調回原來的位置，這樣會有一個空白閃回的bug,所有需要複製第一張到末尾；
clone() 生成被選元素的副本 即複製；
var count=0;//定義變數控制輪播
var time;
$(function(){
//複製
($(".ulinfo li").first().clone()).appendTo($(".ulinfo"));
//自動輪播
time=setInterval(shift,1000);
function shift(){
count++;
$(".ulinfo").animate({
marginLeft:(-600*count)+"px"
},500,"linear",function(){
if(count>=$(".ulinfo li").length-1){
$(".ulinfo").css("marginLeft","0px");
count=0;
}
})
}
})
3.新增索引點自動跟隨輪播及任意進入事件
這裡首先得建立索引點，建立方法和li輪播一致；
自動跟隨可直接新增到圖片自動輪播內；
任意進入執行動畫事件，只需利用遍歷點的當前索引值控制整個ul的移動即可，之前向右滑動，之後向左滑動，近慢遠快；
注意：當移動結束後將當前點的索引值賦給count，令自動輪播緊接著這個點繼續；
還需新增shop()動畫，處理多次滑動的bug;
//任意點進入執行動畫
$(".dian").each(function(index){
$(this).mouseenter(function(){
$(".dian").css("backgroundColor","");
$(this).css("backgroundColor","red");
$(".ulinfo").stop().animate({
marginLeft:(-600*index)+"px"
},500,"linear",function(){
count=index;
});
});
});
4.滑鼠進入 離開事件與li方式一致
5.新增左右單擊事件
點選左邊即自動輪播方向，直接呼叫封裝好的函式即可；
點選右邊則反方向執行，需要簡單的改變；
//左右兩邊
$("#left,#right").click(function(){
if($(this).is("#left")){
shift();
}else{
count--;
if(count<0){
count=5;
$(".ulinfo").css("marginLeft","-3600px")
}
$(".ulinfo").stop().animate({
marginLeft:(-600*count)+"px"
},500,function(){
//索引點跟隨
$(".dian").css("backgroundColor","");
$(".dian").eq(count).css("backgroundColor","red")
})
}
});
三、完整程式碼
1.li方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{margin: 0;padding: 0;}
.block{
width: 600px;
height: 330px;
margin: 20px auto;
/* border: 1px solid black;*/
overflow: hidden;
position: relative;
}
.ulinfo{
width: 4200px;
height: 300px;
margin-left: -600px;
}
.ulinfo li{
width: 600px;
height: 300px;
list-style: none;
float: left;
}
img{
width: 100%;
height: 100%;
}
.circle{
width: 170px;
height: 20px;
/*border: 1px solid red;*/
margin: 0 auto;
}
.dian{
width: 10px;
height: 10px;
border-radius: 50%;
border: 1px solid black;
margin: 5px 8px;
float: left;
}
.click{
position: absolute;
width: 100%;
}
#left,#right{
width: 70px;
height: 300px;
display: none;
}
#left{
background: linear-gradient(90deg,rgba(255,255,255,0.8),rgba(255,255,255,0.1));
float: left;
}
#right {
background: linear-gradient(90deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.8));
float: right;
}
</style>
<script src="js/jquery-3.0.0.js"></script>
<script>
var count=0;//索引圈變數
var time;
$(function(){
time=setInterval("Animate.imganimate()",1500);
Animate.circleCreate();
Animate.pauseimg();
Animate.incircle();
Animate.AddClick();
});
var Animate={
//自動輪播
imganimate:function(){
$(".ulinfo li").first().animate({
marginLeft:"-600px"
},1000,"linear",function(){
$(".ulinfo").append($(this));
$(this).css("marginLeft","0px");
//索引圈自動跟隨轉換
count++;
$(".dian").css("backgroundColor","");
$(".dian").eq(count%6).css("backgroundColor","red");
})
},
//索引圈建立
circleCreate:function(){
var lenth=$(".ulinfo li").length;
for (var i=0;i<lenth;i++){
var circle=$("<div></div>");
circle.addClass("dian");
$(".circle").append(circle);
}
$(".dian").eq(0).css("backgroundColor","red");
},
//滑鼠進入停止 離開繼續
pauseimg:function(){
$(".block").mouseenter(function(){
clearInterval(time);
$("#left,#right").css("display","block");
}).mouseleave(function(){
time=setInterval("Animate.imganimate()",1500);
$("#left,#right").css("display","none");
});
},
//進入索引圈對應圖片跟隨變換
incircle:function(){
$(".dian").each(function(index){
$(this).mouseenter(function(){
//解綁其它索引圈進入事件
$(".dian").css("backgroundColor","").unbind("mouseenter");
$(this).css("backgroundColor","red");
//計算輪播次數
var num=(index-count%6)<0?index-count%6+6:index-count%6;
//處理反覆進入同一索引圈的bug
if(num==0){
Animate.incircle();
return;
}
shift();
var shiftnum=0;//定義實際輪播次數
function shift(){
$(".ulinfo li").first().animate({
marginLeft:"-600px"
},1000/num,function(){
$(".ulinfo").append($(this));
$(this).css("marginLeft","0px");
shiftnum++;
if(shiftnum>=num){
count=index;
Animate.incircle();
return;
}
shift();//遞迴呼叫
});
}
});
})
},
//左右點選
AddClick:function(){
$("#left,#right").on('click',addclick);
function addclick() {
var that=$(this);
that.unbind("click",addclick);
if($(this).is("#left")){//判斷左右
//left
$(".ulinfo li:first").animate({
marginLeft:"-600px"
},500,"linear",function(){
$(this).appendTo($(this).parent());
$(this).css("marginLeft","0px");
//索引圈也得跟隨
count++;
$(".dian").css("backgroundColor","");
$(".dian").eq(count%6).css("backgroundColor","red");
//重新繫結事件
$(that).bind("click", addclick)
})
}else{
//right
$(".ulinfo li:first").animate({
marginLeft: "600px"
},500, "linear", function () {
$(".ulinfo li:last").prependTo($(this).parent());
$(this).css("marginLeft","0px");
count--;
$(".dian").css("backgroundColor", "");
$(".dian").eq(count % 6).css("backgroundColor", "red");
//重新繫結事件
$(that).bind("click",addclick);
});
}
}
}
}
</script>
</head>
<body>
<div class="block">
<div class="click">
<div id="left"></div>
<div id="right"></div>
</div>
<ul class="ulinfo">
<li><img src="image/demo1.jpg"></li>
<li><img src="image/demo2.jpg"></li>
<li><img src="image/demo3.jpg"></li>
<li><img src="image/demo4.jpg"></li>
<li><img src="image/demo5.jpg"></li>
<li><img src="image/demo6.jpg"></li>
</ul>
<div class="circle"></div>
</div>
</body>
</html>2.ul方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{margin: 0;padding: 0;}
.block{
width: 600px;
height: 330px;
margin: 20px auto;
/* border: 1px solid black;*/
overflow: hidden;
position: relative;
}
.ulinfo{
width: 4200px;
height: 300px;
}
.ulinfo li{
width: 600px;
height: 300px;
list-style: none;
float: left;
}
img{
width: 100%;
height: 100%;
}
.circle{
width: 170px;
height: 20px;
/*border: 1px solid red;*/
margin: 0 auto;
}
.dian{
width: 10px;
height: 10px;
border-radius: 50%;
border: 1px solid black;
margin: 5px 8px;
float: left;
}
.click{
position: absolute;
width: 100%;
}
#left,#right{
width: 70px;
height: 300px;
display: none;
}
#left{
background: linear-gradient(90deg,rgba(255,255,255,0.8),rgba(255,255,255,0.1));
float: left;
}
#right {
background: linear-gradient(90deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.8));
float: right;
}
</style>
<script src="js/jquery-3.0.0.js"></script>
<script>
var count=0;//定義變數控制輪播
var time;
$(function(){
//複製
($(".ulinfo li").first().clone()).appendTo($(".ulinfo"));
//自動輪播
time=setInterval(shift,1000);
//建立索引圈
for(var i=0;i<$(".ulinfo li").length-1;i++){
var dian=$('<div></div>');
dian.addClass("dian");
$(dian).appendTo($(".circle"));
}
$(".dian").eq(0).css("backgroundColor","red");
//滑鼠進入停止 離開繼續
$(".block").mouseenter(function(){
clearInterval(time);
$("#left,#right").css("display","block");
}).mouseleave(function(){
time=setInterval(shift,1000);
$("#left,#right").css("display","none");
});
//任意點進入執行動畫
$(".dian").each(function(index){
$(this).mouseenter(function(){
$(".dian").css("backgroundColor","");
$(this).css("backgroundColor","red");
$(".ulinfo").stop().animate({
marginLeft:(-600*index)+"px"
},500,"linear",function(){
count=index;
});
});
});
//左右兩邊
$("#left,#right").click(function(){
if($(this).is("#left")){
shift();
}else{
count--;
if(count<0){
count=5;
$(".ulinfo").css("marginLeft","-3600px")
}
$(".ulinfo").stop().animate({
marginLeft:(-600*count)+"px"
},500,function(){
//索引點跟隨
$(".dian").css("backgroundColor","");
$(".dian").eq(count).css("backgroundColor","red")
})
}
});
//自動輪播封裝
function shift(){
count++;
$(".ulinfo").animate({
marginLeft:(-600*count)+"px"
},500,"linear",function(){
if(count>=$(".ulinfo li").length-1){
$(".ulinfo").css("marginLeft","0px");
count=0;
}
//索引點跟隨
$(".dian").css("backgroundColor","");
$(".dian").eq(count).css("backgroundColor","red");
})
}
})
</script>
</head>
<body>
<div class="block">
<div class="click">
<div id="left"></div>
<div id="right"></div>
</div>
<ul class="ulinfo">
<li><img src="image/demo1.jpg"></li>
<li><img src="image/demo2.jpg"></li>
<li><img src="image/demo3.jpg"></li>
<li><img src="image/demo4.jpg"></li>
<li><img src="image/demo5.jpg"></li>
<li><img src="image/demo6.jpg"></li>
</ul>
<div class="circle"></div>
</div>
</body>
</html>