第一百五十五节，封装库--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:;

    left:;

    z-index:1

}

#banner ul {

    position:absolute;

    top:128px;

    left:420px;

    z-index:;

}

#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:;

    background:#333;

    opacity:0.3;

    filter:alpha(opacity=30);

    z-index:;

}

#banner strong {

    position:absolute;

    top:130px;

    left:10px;

    color:#fff;

    z-index:;

}

前台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 ++;

    }

首先引入封装库