12.08作业

临摹米家有品首页

进行页面的优化布局以及js代码的编写，头部轮播图片以及菜单页的实现

base.js

$(function(){
    /*头部图标点击跳转页面事件*/
    $('.m-logo').click(function(){
        //window.location.href="index.html";
        window.open("index.html");
    });

    /*头部轮播事件*/
    var $swiper_wrapper_banner_a=$('.swiper-wrapper-banner a');
    //var $swiper_pagination_bullet_radio=$('.swiper-pagination-bullet input');
    var $swiper_pagination_bullet_radio=$('input[name=aaa]');
    var aaa=$swiper_wrapper_banner_a[0].getAttribute('data-swiper-slide-index');
    var $swiper_pagination_button_prev=$('.swiper-pagination-button-prev');
    var $swiper_pagination_button_next=$('.swiper-pagination-button-next');
    var swiper_wrapper_banner_duplicate;
    /*调用初始化函数*/
    unit();
    /*初始化函数*/
    function unit(){
        var conq=0;
        listen_swiper_wrapper_banner_duplicate(conq);
    }
    /*监听循环函数*/
    var tmp_num;
    function listen_swiper_wrapper_banner_duplicate(num){
        remove_attr_checked();
        $($swiper_wrapper_banner_a[num]).show(500);
        //$swiper_pagination_bullet_radio[num].setAttribute('checked','checked');
        $($swiper_pagination_bullet_radio[num]).prop('checked','true');
        tmp_num=num+1;
        swiper_wrapper_banner_duplicate=setInterval(function(){
            remove_attr_checked();
            if(tmp_num>4){
                tmp_num=0;
            }
            $($swiper_wrapper_banner_a[tmp_num]).show(500);
            //$swiper_pagination_bullet_radio[tmp_num].setAttribute('checked','checked');
            $($swiper_pagination_bullet_radio[tmp_num]).prop('checked','true');
            tmp_num+=1;

        },2500);
    }   
    $swiper_pagination_button_prev.on('click',function(){
        clearInterval(swiper_wrapper_banner_duplicate);
        tmp_num-=2;
        if(tmp_num==-1){
            tmp_num=4;
        }
        if(tmp_num==-2){
            tmp_num=3;
        }
        console.log(tmp_num);
        listen_swiper_wrapper_banner_duplicate(tmp_num);
    });
    $swiper_pagination_button_next.on('click',function(){
        clearInterval(swiper_wrapper_banner_duplicate);
        if(tmp_num==5){
            tmp_num=0;
        }
        listen_swiper_wrapper_banner_duplicate(tmp_num);
    });

    /*点击按钮触发事件*/
    $swiper_pagination_bullet_radio.on('click',function(){
        clearInterval(swiper_wrapper_banner_duplicate);
        var $this=$(this);
        var index=$this.attr('data-swiper-pagination-index');
        var cont=parseInt(index);
        listen_swiper_wrapper_banner_duplicate(cont);
    });

    /*轮播图片清除函数*/
    function remove_attr_checked(){
        for(var i=0;i<$swiper_wrapper_banner_a.length;i++){
            $swiper_wrapper_banner_a[i].style.display=('none');
            //$swiper_pagination_bullet_radio[i].removeAttribute('checked');
            $($swiper_pagination_bullet_radio[tmp_num]).prop('checked','false');
        }
    }

    /*热门栏切换*/
    var $h_sec3_button_prev=$('.h-sec3-button-prev');
    var $h_sec3_button_next=$('.h-sec3-button-next');
    var $hot_move_item=$('.move-item');
    var hot_num=0;
    display_hot_item();
    $h_sec3_button_next.on('click',function(){
        hot_num+=1;
        if(hot_num>($hot_move_item.length-4)){
            hot_num-=1;
            return;
        } 
        display_hot_item();
    });
    $h_sec3_button_prev.on('click',function(){
        hot_num-=1;
        if(hot_num<0){
            hot_num+=1;
            return;
        } 
        display_hot_item();
    });
    function display_hot_item(){
        var k=hot_num+4;
        var j=hot_num;
        var uniq=j;
        for(j;j<k;j++){
            $hot_move_item[j].style.display='inline-block';
        }
        for (var i=0;i<uniq;i++) {
            $hot_move_item[i].style.display='none';
        }
        for (var i=k;i<$hot_move_item.length;i++) {
            $hot_move_item[i].style.display='none';
        }
    }
    /*品牌栏切换*/
    var $h_sec5_button_prev=$('.h-sec5-button-prev');
    var $h_sec5_button_next=$('.h-sec5-button-next');
    var $brand_swiper_slide=$('.brand-swiper-slide');
    var tem=0;
    display_image();
    $h_sec5_button_next.on('click',function(){
        tem+=1;
        if(tem>($brand_swiper_slide.length-4)){
            tem-=1;
            return;
        } 
        display_image();
    });
    $h_sec5_button_prev.on('click',function(){
        tem-=1;
        if(tem<0){
            tem+=1;
            return;
        } 
        display_image();
    });
    /*品牌栏图片切换*/
    function display_image(){
        var k=tem+4;
        var j=tem;
        var uniq=j;
        for(j;j<k;j++){
            $brand_swiper_slide[j].style.display='inline-block';
        }
        for (var i=0;i<uniq;i++) {
            $brand_swiper_slide[i].style.display='none';
        }
        for (var i=k;i<$brand_swiper_slide.length;i++) {
            $brand_swiper_slide[i].style.display='none';
        }
    }

    /*热门产品栏泡面点击事件*/
    var $product_sec3_4=$('#product-sec3-4');
    $product_sec3_4.on('click',function(){
        window.open('html/product-sec3-4.html');
    });
});

icon-animate.js

$(function() {
    var $fr_m_download = $('.fr-m-download');
    var $site_item_nav = $('.site-item-nav');
    var $silder_download = $('.silder-download');
    var $download_small_icon = $('.download-small-icon');
    var $new_person_gift = $('.new-person-gift');
    var $new_person_small_icon = $('.new-person-small-icon');
    var $back_top = $('.back-top');
    var $go_back_small_icon = $('.go-back-small-icon');
    var $hide_pop_1 = $('.hide-pop-1');
    var $hide_pop_2 = $('.hide-pop-2');
    /*头部搜索栏聚焦事件,声明变量*/
    var $header_search_input = $('.search-input-con input');
    var $search_form = $('.search-form');
    /*小图标变量声明*/
    var $fr_m_download_small_icon = $('.fr-m-download-small-icon');

    /*监听下载APP触发事件*/
    $fr_m_download.on({
        mouseover: function() {
            $site_item_nav.show(300);
            $fr_m_download_small_icon.css('background-position-y', '-1014px');
        },
        mouseleave: function() {
            $site_item_nav.hide(300);
            $fr_m_download_small_icon.css('background-position-y', '-946px');
        }
    });

    /*头部搜索栏聚焦事件*/
    $header_search_input.on({
        focus: function() {
            $search_form.css('border-bottom', '1px solid #855f3f');
        },
        blur: function() {
            $search_form.css('border-bottom', '1px solid #ccc');
        }
    });

    /*侧边栏触发事件*/

    $silder_download.on({
        mouseover: function() {
            $download_small_icon.css('background-position-y', '-1150px');
            $hide_pop_1.show(300);
        },
        mouseleave: function() {
            $download_small_icon.css('background-position-y', '-1456px');
            $hide_pop_1.hide(300);
        }
    });
    $new_person_gift.on({
        mouseover: function() {
            $new_person_small_icon.css('background-position-y', '-743px');
            $hide_pop_2.show(300);
        },
        mouseleave: function() {
            $new_person_small_icon.css('background-position-y', '-777px');
            $hide_pop_2.hide(300);
        }
    });
    $back_top.on({
        mouseover: function() {
            $go_back_small_icon.css('background-position-y', '-1252px');
        },
        mouseleave: function() {
            $go_back_small_icon.css('background-position-y', '-1218px');
        },
        click: function() {
            $("html,body").animate({
                scrollTop: 0
            }, 500);
        }
    });

    /*头部列表展示与隐藏*/
    var $m_nav = $('.m-nav');
    var $nav_list = $('.nav-list');
    var $nav_list_li = $('.nav-list li');
    var $nav_menu_list = $('.nav-menu-list');
    var $nav_menu_list_li = $('.nav-menu-list li');
    var $nav_menu = $('.nav-menu');

    /*头部列表颜色样式*/
    $nav_list_li.on({
        mouseenter: function() {
            var $this = $(this);
            $this.css('color', '#845f3f');
            var index = $this.data('index');
            $($nav_menu_list[index]).show(100);
        },
        mouseleave: function() {
            var $this = $(this);
            $this.css('color', '#333');
            var index = $this.data('index');
            $($nav_menu_list[index]).hide();
        }
    });
    /*展示区触发事件,状态保持*/
    $nav_menu_list.on({
        mouseenter: function() {
            $(this).show();
        },
        mouseleave: function() {
            $(this).hide();
        }
    });

    /*头部隐藏列表显示*/
    $m_nav.on({
        mouseover: function() {
            $nav_menu.show(300);
        },
        mouseleave: function() {
            $nav_menu.hide(300);
        }
    });

    /*头部隐藏列表颜色样式*/
    $nav_menu_list_li.on({
        mouseover: function() {
            $(this).children('.nav-menu-info').css('color', '#845f3f');
        },
        mouseleave: function() {
            $(this).children('.nav-menu-info').css('color', '#333')
        }
    });

});

product-sec3-4.js

$(function(){
    var $left_img=$('.product-detail-left-fl img');
    var $right_img=$('.product-detail-left-fr-img img');
    var $product_detail_left_fr_img=$('.product-detail-left-fr-img');

    var $product_detail_left_fr=$('.product-detail-left-fr');
    var $left_fr_prev_small_icon=$('.left-fr-prev-small-icon');
    var $left_fr_next_small_icon=$('.left-fr-next-small-icon');
    /*小图片触发事件*/
    $product_detail_left_fr.on({
        mouseover:function(){
            $left_fr_next_small_icon.show();
            $left_fr_prev_small_icon.show();
        },
        mouseleave:function(){
            $left_fr_next_small_icon.hide();
            $left_fr_prev_small_icon.hide();
        }
    });
    /*小图片按钮触发事件*/
    $left_fr_prev_small_icon.on('click',function(){
        var tmp=judge_prev_border();
        var next_img_src=$($right_img[tmp-1]).attr('src');
        $left_img.attr('src',next_img_src);
        if(tmp<=0) return;
        $($product_detail_left_fr_img[tmp]).removeClass('product-detail-left-fr-img-border');
        $($product_detail_left_fr_img[tmp-1]).addClass('product-detail-left-fr-img-border');
    });

    $left_fr_next_small_icon.on('click',function(){
        var tmp=judge_border();
        var next_img_src=$($right_img[tmp+1]).attr('src');
        $left_img.attr('src',next_img_src);
        if(tmp>=5) return;
        $($product_detail_left_fr_img[tmp]).removeClass('product-detail-left-fr-img-border');
        $($product_detail_left_fr_img[tmp+1]).addClass('product-detail-left-fr-img-border');
    });
    /*判断当前边框的索引值*/
    function judge_border(){
        var uniq;
        for (var i=0;i<$product_detail_left_fr_img.length;i++) {
            uniq=$($product_detail_left_fr_img[i]).hasClass('product-detail-left-fr-img-border');
            if(uniq){
                if(i>=2){
                    right_img_show_hide(i);
                }
                return i;
            }
        }
    }

    function judge_prev_border(){
        var uniq;
        for (var i=0;i<$product_detail_left_fr_img.length;i++) {
            uniq=$($product_detail_left_fr_img[i]).hasClass('product-detail-left-fr-img-border');
            if(uniq){
                if(i<=3){
                    right_img_prev_show_hide(i);
                }
                return i;
            }
        }
    }
    /*右侧小图展示或隐藏*/
    function right_img_show_hide(num){
        if(num>=4) return;
        $($product_detail_left_fr_img[num-2]).hide();
        $($product_detail_left_fr_img[num+2]).show();
    }

    function right_img_prev_show_hide(num){
        if(num<=1) return;
        $($product_detail_left_fr_img[num-2]).show();
        $($product_detail_left_fr_img[num+2]).hide();
    }
    /*购买数量加减*/
    var $order_num_small_icon_remove=$('.order-num-small-icon-remove');
    var $order_num_small_icon_add=$('.order-num-small-icon-add');
    var $order_num=$('.order-num');
    var check_order_num=setInterval(function(){
        var str=$order_num.val();
        var num=parseInt(str);
        if(!num){
            num=1;
        }
        if(num>10) num=10;
        $order_num.val(num);
    },300);
    $order_num_small_icon_add.on('click',function(e){
        var str=$order_num.val();
        var num=parseInt(str);
        num+=1;
        if(num>10) {
            return;
        }
        $order_num.val(num);
    });

    $order_num_small_icon_remove.on('click',function(){
        var str=$order_num.val();
        var num=parseInt(str);
        num-=1;
        if(num>0) {
            $order_num.val(num);
        }
    });


    /*收藏触发事件*/
    var $favor_btn=$('.favor-btn');
    var $favor_btn_small_icon=$('.favor-btn-small-icon');
    $favor_btn.on({
        mouseover:function(){
            $favor_btn_small_icon.css('background-position-y','-1185px');
        },
        mouseleave:function(){
            $favor_btn_small_icon.css('background-position-y','-675px');
        }
    });

    /*产品内容、评论、常见问题切换*/
    var $info_nav_item= $('.info-nav-item');
    var $product_desc=$('.product-desc');
    var $product_argument=$('.product-argument');
    var $common_problem=$('.common-problem');
    var $nav_arr_container_item=$('.nav-arr-container-item');
    $info_nav_item.on('click',function(){
        $this=$(this);
        var index=$this.data(index).index;
        set_main_attr();
        if(index==0) {
            $nav_arr_container_item[index].style.background='#845F3F';
            $product_desc.css('display','block');
        }
        if(index==1) {
            $nav_arr_container_item[index].style.background='#845F3F';
            $product_argument.css('display','block');
        }
        if(index==2) {
            $nav_arr_container_item[index].style.background='#845F3F';
            $common_problem.css('display','block');
        }
    });
    function set_main_attr(){
        $product_desc.css('display','none');
        $product_argument.css('display','none');
        $common_problem.css('display','none');
        for(var i=0;i<$nav_arr_container_item.length;i++){
            $nav_arr_container_item[i].style.background='#eee';
        }
    }

    /*产品内容、评论、常见问题的导航栏停留*/
    var mTop=$('.product-detail-nav').offset().top;
    $(window).scroll(function(){
        var sTop = $(document).scrollTop();
        var result=mTop-sTop;
        if (result<=0) {
            $('.product-detail-nav').addClass('product-detail-nav-fixed');
        } else{
            $('.product-detail-nav').removeClass('product-detail-nav-fixed');
        }
    });
});