使用的時候先用Jquery在引它
mousewheel（function（event，data）） 向下是-1 向上+1
（window）.height() 獲取可視區(qū)
null 空
setTimeout 定時器
clearTimeout() 清理定時器 做到函數(shù)節(jié)流
輪播圖（PPT）
首尾連續(xù)滑動（需要用js）
li都是通過絕對定位的
用索引判斷大小
除了第一個li都定位到右側(cè)
動態(tài)創(chuàng)建小圓點（用代碼動態(tài)生成）each循環(huán)
左右按鈕是兩個div 一個自增一個自減
幻燈片布局
<div class="bg3">
<div class="slide fl">
<ul class="slide_pics">
<li><a href="#"><img src="image/main1.jpg" alt="幻燈片"/></a></li>
<li><a href="#"><img src="image/main2.jpg" alt="幻燈片"/></a></li>
<li><a href="#"><img src="image/main3.jpg" alt="幻燈片"/></a></li>
<li><a href="#"><img src="image/main4_1.jpg" alt="幻燈片"/></a></li>
<li><a href="#"><img src="image/main5.jpg" alt="幻燈片"/></a></li>
<li><a href="#"><img src="image/main6.jpg" alt="幻燈片"/></a></li>
<li><a href="#"><img src="image/main7.jpg" alt="幻燈片"/></a></li>
<li><a href="#"><img src="image/main8.jpg" alt="幻燈片"/></a></li>
</ul>
<div class="prev"></div>
<div class="next"></div>
幻燈片
$(function(){
var $li = $(".slide_pics li");
var len = $li.length;//一共有幾張圖片
var $prev = $('.prev');
var $next = $('.next');
var nextli = 0;//將要運動過來的li
var nowli = 0;//當前要離開的li
var timer = null;//定時器
//除第一個li，都定位到右側(cè)
$li.not(':first').css({left:1156});
//動態(tài)創(chuàng)建小圓點
$li.each(function(index){
//創(chuàng)建li
var $sli = $('<li></li>');
//第一個li添加選中樣式
if(index == 0){
$sli.addClass('active');
}
//將li添加到ul中
$sli.appendTo('.points');
})
$points = $('.points li');
// alert($points.length);
$points.click(function() {
nextli = $(this).index();//點擊的小圓點的索引，就是馬上要進來那張的索引
//當點擊當前張的小圓點時，不做任何操作
if(nextli == nowli){
return;
}
move();
$(this).addClass('active').siblings().removeClass('active');
});
$prev.click(function() {
nextli--;
move();
//改變圓點樣式
$points.eq(nextli).addClass('active').siblings().removeClass('active');
});
$next.click(function() {
nextli++;
move();
//改變圓點樣式
$points.eq(nextli).addClass('active').siblings().removeClass('active');
});
//進入子元素也清除定時器
$('.slide').mouseenter(function() {
clearInterval(timer);
});
$('.slide').mouseleave(function() {
timer = setInterval(autoplay, 3000);
});
//定時器循環(huán)自動播放
timer = setInterval(autoplay, 3000);
//自動播放的邏輯跟點擊下一張是相同的
function autoplay(){
nextli++;
move();
//改變圓點樣式
$points.eq(nextli).addClass('active').siblings().removeClass('active');
}
function move(){
//走到第一張，再繼續(xù)走時
if(nextli < 0){
nextli = len - 1;//將要來的是最后一張
nowli = 0;//要離開的是第一張
$li.eq(nextli).css({left:-1156});//把最后一張定位到左側(cè)，準備進入
$li.eq(nowli).stop().animate({left:1156});//離開的第一張走到右側(cè)
$li.eq(nextli).stop().animate({left:0});//進入的最后一張走進來
nowli = nextli;//要離開的賦值為剛進入的最后一張
return;//下邊代碼是正常情況的，極端情況下不執(zhí)行，直接返回
}
//走到最后一張，再繼續(xù)走時
if(nextli > len - 1){
nextli = 0;//將要來的是第一張
nowli = len - 1;//要離開的是最后一張
$li.eq(nextli).css({left:1156});//將要進來的第一張定位到右側(cè)，準備進入
$li.eq(nowli).stop().animate({left:-1156});//離開的最后一張走到左側(cè)
$li.eq(nextli).stop().animate({left:0});//進入的第一張走進來
nowli = nextli;//要離開的賦值為剛進入的第一張
return;
}
if(nextli > nowli){//從右向左進入，例如第2張進入，第1張出去
$li.eq(nextli).css({left:1156});//把馬上要進來的那張，瞬間放在右側(cè)
$li.eq(nowli).stop().animate({left:-1156});//當前這張要離開，運動到左側(cè)
}else{
$li.eq(nextli).css({left:-1156});//把馬上要進來的那張，瞬間放在左側(cè)
$li.eq(nowli).stop().animate({left:1156});//當前這張要離開，運動到右側(cè)
}
$li.eq(nextli).stop().animate({left:0});//馬上進來的這張走到可視區(qū)（即0的位置）
nowli = nextli;
}
})
