滾輪事件
原生的js瀏覽器不兼容
不一樣的瀏覽器會有不同滾動效果。加了插件效果一樣。
所以用js的插件mousewheel

eq 等于
cursor poloter 變小手

因?yàn)閯赢嫴汇暯?br> 300ms動畫延時
函數(shù)節(jié)流 短時間觸發(fā)一次 滾輪劃多次
200ms

幻燈片 輪播圖

600是圖片寬度

動態(tài)創(chuàng)建小圓點(diǎn)
（用代碼動態(tài)生成）each循環(huán)

demo

<div id="index_main">
        <div class="center_con">

                    <div class="slide fl">
                        <ul class="slide_pics">
                            <li><a href=""><img src="img/taqingcunlunbopic.jpg" alt="幻燈片" /></a></li>
                            <li><a href=""><img src="img/tianqiyubaolunbopic.jpg" alt="幻燈片" /></a></li>
                            
                        </ul>
                        <div class="prev"></div>
                        <div class="next"></div>
                        <ul class="points">
                            
                        </ul>
                    </div>

        </div> 

$(function(){
    var $li = $('.slide_pics li');
    var len = $li.length;//4張
    var $prev = $('.prev');//左按鈕
    var $next = $('.next');//右按鈕
    var nextli = 0;//將要運(yùn)動過來的li
    var nowli = 0;//當(dāng)前要離開的li
    var timer = null;


    //除第一個li，都定位到右側(cè)
    $li.not(':first').css({left:980});

    //動態(tài)創(chuàng)建小圓點(diǎn)
    $li.each(function(index){
        //創(chuàng)建li
        var $sli = $('<li></li>');
        //第一個li添加選中樣式
        if(index == 0){
            $sli.addClass('active');
        }
        //將小圓點(diǎn)的li添加到ul中
        $sli.appendTo('.points');
    })

    $points = $('.points li');
    // alert($points.length);//4個小圓點(diǎn)

    //小圓點(diǎn)的點(diǎn)擊事件
    $points.click(function() {
        nextli = $(this).index();
        //當(dāng)點(diǎn)擊當(dāng)前張的小圓點(diǎn)時，不做任何操作，防止跳變的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');
    });

    //針對外層的slide做鼠標(biāo)進(jìn)入和離開事件，因?yàn)槭髽?biāo)指針有可能進(jìn)入到左右翻頁和小圓點(diǎn)的范圍
    //mouseenter使鼠標(biāo)進(jìn)入子元素也能清除定時器
    $('.slide').mouseenter(function() {
        clearInterval(timer);
    });
    $('.slide').mouseleave(function() {
        timer = setInterval(autoplay, 3000);
    });

    //定時器循環(huán)自動播放
    timer = setInterval(autoplay, 3000);

    //自動播放的邏輯與點(diǎn)擊下一張是相同的
    function autoplay(){
        nextli++;
        move();
        //改變圓點(diǎn)樣式
        $points.eq(nextli).addClass('active').siblings().removeClass('active');
    }

    function move(){
        //向右走到第一張，再繼續(xù)走時
        if(nextli < 0){
            nextli = len - 1;//將要來的是最后一張
            nowli = 0;//要離開的是第一張
            $li.eq(nextli).css({left:-980});//把最后一張定位到左側(cè)，準(zhǔn)備進(jìn)入
            $li.eq(nowli).stop().animate({left: 980});//離開的第一張走到右側(cè)
            $li.eq(nextli).stop().animate({left: 0});//馬上要進(jìn)來的最后一張走進(jìn)來
            nowli = nextli;//要離開的賦值為剛進(jìn)入的最后一張
            return;//下邊是正常情況的，不執(zhí)行，直接返回
        }
        //向左走到最后一張，再繼續(xù)走時
        if(nextli > len - 1){
            nextli = 0;//將要來的是第一張
            nowli = len - 1;//要離開的是最后一張
            $li.eq(nextli).css({left:980});//把第一張定位到右側(cè)，準(zhǔn)備進(jìn)入
            $li.eq(nowli).stop().animate({left: -980});//離開的最后一張走到左側(cè)
            $li.eq(nextli).stop().animate({left: 0});//馬上要進(jìn)來的第一張走進(jìn)來
            nowli = nextli;//要離開的賦值為剛進(jìn)入的第一張
            return;//下邊是正常情況的，不執(zhí)行，直接返回
        }
        
        if(nextli > nowli){
            //馬上要進(jìn)來的這張瞬間移動到右邊
            $li.eq(nextli).css({left:980});
            //當(dāng)前這張離開
            $li.eq(nowli).stop().animate({left: -980});
        }else{
            //馬上要進(jìn)來的這張瞬間移動到左邊
            $li.eq(nextli).css({left:-980});
            //當(dāng)前這張離開
            $li.eq(nowli).stop().animate({left: 980});
        }
        //馬上要進(jìn)來的這張走到0的位置
        $li.eq(nextli).stop().animate({left: 0});
        nowli = nextli;
    }
})