zoukankan      html  css  js  c++  java
  • 第一百五十五节,封装库--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 ++;
        }

     首先引入封装库

  • 相关阅读:
    LA 2038 Strategic game(最小点覆盖,树形dp,二分匹配)
    UVA 10564 Paths through the Hourglass(背包)
    Codeforces Round #323 (Div. 2) D 582B Once Again...(快速幂)
    UVALive 3530 Martian Mining(贪心,dp)
    UVALive 4727 Jump(约瑟夫环,递推)
    UVALive 4731 Cellular Network(贪心,dp)
    UVA Mega Man's Mission(状压dp)
    Aizu 2456 Usoperanto (贪心)
    UVA 11404 Plalidromic Subsquence (回文子序列,LCS)
    Aizu 2304 Reverse Roads(无向流)
  • 原文地址:https://www.cnblogs.com/adc8868/p/6476187.html
Copyright © 2011-2022 走看看