$(function(){
var$li=$('.slide_pics li');
varlen=$li.length;//4張
var$prev=$('.prev');//左按鈕
var$next=$('.next');//右按鈕
varnextli=0;//將要運(yùn)動(dòng)過(guò)來(lái)的li
varnowli=0;//當(dāng)前要離開的li
vartimer=null;
//除第一個(gè)li珊蟀，都定位到右側(cè)
$li.not(':first').css({left:600});
//動(dòng)態(tài)創(chuàng)建小圓點(diǎn)
$li.each(function(index){
//創(chuàng)建li
var$sli=$('
//第一個(gè)li添加選中樣式
if(index==0){
$sli.addClass('active');
}
//將小圓點(diǎn)的li添加到ul中
$sli.appendTo('.points');
})
$points=$('.points li');
//alert($points.length);//4個(gè)小圓點(diǎn)
//小圓點(diǎn)的點(diǎn)擊事件
$points.click(function() {
nextli=$(this).index();
//當(dāng)點(diǎn)擊當(dāng)前張的小圓點(diǎn)時(shí)拉盾，不做任何操作撞秋，防止跳變的Bug
if(nextli==nowli){
return;
}
move();
$(this).addClass('active').siblings().removeClass('active');
});
//左按鈕的點(diǎn)擊事件
$prev.click(function() {
nextli--;
move();
//改變圓點(diǎn)樣式
$points.eq(nextli).addClass('active').siblings().removeClass('active');
});
//右按鈕的點(diǎn)擊事件
$next.click(function() {
nextli++;
move();
//改變圓點(diǎn)樣式
$points.eq(nextli).addClass('active').siblings().removeClass('active');
});
//針對(duì)外層的slide做鼠標(biāo)進(jìn)入和離開事件，因?yàn)槭髽?biāo)指針有可能進(jìn)入到左右翻頁(yè)和小圓點(diǎn)的范圍
//mouseenter使鼠標(biāo)進(jìn)入子元素也能清除定時(shí)器
$('.slide').mouseenter(function() {
clearInterval(timer);
});
$('.slide').mouseleave(function() {
timer=setInterval(autoplay,3000);
});
//定時(shí)器循環(huán)自動(dòng)播放
timer=setInterval(autoplay,3000);
//自動(dòng)播放的邏輯與點(diǎn)擊下一張是相同的
functionautoplay(){
nextli++;
move();
//改變圓點(diǎn)樣式
$points.eq(nextli).addClass('active').siblings().removeClass('active');
}
functionmove(){
//向右走到第一張，再繼續(xù)走時(shí)
if(nextli<0){
nextli=len-1;//將要來(lái)的是最后一張
nowli=0;//要離開的是第一張
$li.eq(nextli).css({left:-600});//把最后一張定位到左側(cè)您机，準(zhǔn)備進(jìn)入
$li.eq(nowli).stop().animate({left:600});//離開的第一張走到右側(cè)
$li.eq(nextli).stop().animate({left:0});//馬上要進(jìn)來(lái)的最后一張走進(jìn)來(lái)
nowli=nextli;//要離開的賦值為剛進(jìn)入的最后一張
return;//下邊是正常情況的忙芒，不執(zhí)行，直接返回
}
//向左走到最后一張供屉，再繼續(xù)走時(shí)
if(nextli>len-1){
nextli=0;//將要來(lái)的是第一張
nowli=len-1;//要離開的是最后一張
$li.eq(nextli).css({left:600});//把第一張定位到右側(cè)行冰，準(zhǔn)備進(jìn)入
$li.eq(nowli).stop().animate({left:-600});//離開的最后一張走到左側(cè)
$li.eq(nextli).stop().animate({left:0});//馬上要進(jìn)來(lái)的第一張走進(jìn)來(lái)
nowli=nextli;//要離開的賦值為剛進(jìn)入的第一張
return;//下邊是正常情況的，不執(zhí)行伶丐，直接返回
}
if(nextli>nowli){
//馬上要進(jìn)來(lái)的這張瞬間移動(dòng)到右邊
$li.eq(nextli).css({left:600});
//當(dāng)前這張離開
$li.eq(nowli).stop().animate({left:-600});
}else{
//馬上要進(jìn)來(lái)的這張瞬間移動(dòng)到左邊
$li.eq(nextli).css({left:-600});
//當(dāng)前這張離開
$li.eq(nowli).stop().animate({left:600});
}
//馬上要進(jìn)來(lái)的這張走到0的位置
$li.eq(nextli).stop().animate({left:0});
nowli=nextli;
}
})
