第一百五十五節，封裝庫--JavaScript，輪播器

封裝庫--JavaScript，輪播器

 

html

<div id="banner">
        <img src="img/banner1.jpg" alt="輪播器第一張" />
        <img src="img/banner2.jpg" alt="輪播器第二張" />
        <img src="img/banner3.jpg" alt="輪播器第三張" />
        <ul>
            <li>●</li>
            <li>●</li>
            <li>●</li>
        </ul>
        <span></span>
        <strong></strong>
    </div>

css

/*輪播圖*/
#banner {
    width:900px;
    height:150px;
    float:left;
    margin:10px 0;
    position:relative;
    overflow: hidden;
}
#banner img {
    display:block;
    position:absolute;
    top:0;
    left:0;
    z-index:1
}
#banner ul {
    position:absolute;
    top:128px;
    left:420px;
    z-index:4;
}
#banner ul li {
    float:left;
    padding:0 5px;
    font-size:16px;
    color:#999;
    cursor:pointer;
}
#banner span {
    width:900px;
    height:25px;
    position:absolute;
    top:125px;
    left:0;
    background:#333;
    opacity:0.3;
    filter:alpha(opacity=30);
    z-index:3;
}
#banner strong {
    position:absolute;
    top:130px;
    left:10px;
    color:#fff;
    z-index:4;
}

前臺js

//輪播器初始化
    $('#banner img').shzh_tou_ming_du(0);                                     //將所有圖片透明度設置成0
    $('#banner img').guo_lv_jie_dian(0).shzh_tou_ming_du(100);                //將第一張圖片透明度設置成100
    $('#banner ul li').guo_lv_jie_dian(0).c_css('color','#333');              //將第一個li改變成選擇顏色
    $('#banner strong').wen_ben($('#banner img').guo_lv_jie_dian(0).qh_shu_xing_zhi('alt'));  //將第一張圖片的alt屬性值賦值給strong

    //輪播器計數器
    var banner_index = 1;

    //輪播器的種類
    var banner_type = 1;               //1表示透明度輪播器，2表示上下滾動輪播器

    //自動輪播器
    var banner_timer = setInterval(befang_fn, 3000);                      //建立定時器

    //手動輪播器
    $('#banner ul li').shu_biao_yi_ru_yi_chu(function () {                //鼠標移入移出事件
        clearInterval(banner_timer);                                      //清除定時器
        if ($(this).c_css('color') != 'rgb(51, 51, 51)' && $(this).c_css('color') != '#333'){
            befang(this,banner_index == 0 ? $('#banner ul li').jd_length() -1 : banner_index -1);
        }
    },function () {
        banner_index = $(this).hq_suo_yin() + 1;
        banner_timer = setInterval(befang_fn, 3000);
    });

    function befang(obj,prev) {


        $('#banner ul li').c_css('color', '#999');                //將所有li改變成初始顏色
        $(obj).c_css('color', '#333');         //根據索引改變對應的li顏色
        $('#banner strong').wen_ben($('#banner img').guo_lv_jie_dian($(obj).hq_suo_yin()).qh_shu_xing_zhi('alt'));  //將對應圖片的alt屬性值賦值給strong

        if (banner_type == 1) {
            $('#banner img').guo_lv_jie_dian(prev).yi_dong_tou_ming({
                attr: 'o',
                target: 0,
                t: 100,
                step: 2
            }).c_css('z-index', 1);

            $('#banner img').guo_lv_jie_dian($(obj).hq_suo_yin()).yi_dong_tou_ming({
                attr: 'o',
                target: 100,
                t: 100,
                step: 2
            }).c_css('z-index', 2);
        }else if(banner_type == 2){
            $('#banner img').guo_lv_jie_dian(prev).yi_dong_tou_ming({
                attr: 'y',
                target: 150,
                t: 100,
                step: 2
            }).c_css('z-index', 1).shzh_tou_ming_du(100);

            $('#banner img').guo_lv_jie_dian($(obj).hq_suo_yin()).yi_dong_tou_ming({
                attr: 'y',
                target: 0,
                t: 100,
                step: 2
            }).c_css('top','-150px').c_css('z-index', 2).shzh_tou_ming_du(100);
        }
    }

    function befang_fn() {
        if (banner_index >= $('#banner ul li').jd_length()) banner_index = 0;   //計數器數值大於等於輪播圖總量是，計數器爲0
        befang($('#banner ul li').guo_lv_jie_dian(banner_index).sh_jd(),banner_index == 0 ? $('#banner ul li').jd_length() -1 : banner_index -1);
        banner_index ++;
    }

 首先引入封裝庫