小米商城day02

最新推荐文章于 2023-11-14 09:51:56 发布

原创最新推荐文章于 2023-11-14 09:51:56 发布 · 271 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #jquery

html 专栏收录该内容

11 篇文章

订阅专栏

1 轮播图：图片与小圆点定时轮播。鼠标移入时暂停，移出时重新定时轮播。左右按钮可以前一张后一张。

html:

<div id="J_homeSwiper" class="swiper-container home-hero-swiper swiper-no-swiping swiper-container-fade swiper-container-initialized swiper-container-horizontal">
    <div class="swiper-slide">
    	<a href="http://www.mi.com/redminote8" style="display: none; opacity: 0.2;">
            <img class="swiper-lazy swiper-lazy-loaded" src="../images/banner/1.jpg" alt="">
        </a>
        <a href="http://www.mi.com/redminote8pro" style="display: block; opacity: 1;">
            <img class="swiper-lazy swiper-lazy-loaded" src="../images/banner/2.jpg" alt="">
        </a>
        <a href="http://www.mi.com/redmibook14-zqb" style="display: none; opacity: 0.2;">
            <img class="swiper-lazy swiper-lazy-loaded" src="../images/banner/3.jpg" alt="">
        </a>
        <a href="https://www.mi.com/a/h/11570.html" style="display: none; opacity: 0.2;">
            <img class="swiper-lazy swiper-lazy-loaded" src="../images/banner/4.jpg" alt="">
        </a>
        <a href="https://www.mi.com/a/h/11544.html" style="display: none; opacity: 0.2;">
            <img class="swiper-lazy swiper-lazy-loaded" src="../images/banner/5.jpg" alt="">
        </a>
    </div>
    <div class="swiper-pagination swiper-pagination-clickable swiper-pagination-bullets">
     <a href="#" class="swiper-pagination-bullet"></a>
     <a href="#" class="swiper-pagination-bullet swiper-pagination-bullet-active"></a>
     <a href="#" class="swiper-pagination-bullet"></a>
     <a href="#" class="swiper-pagination-bullet"></a>
     <a href="#" class="swiper-pagination-bullet"></a>
    </div>
</div>

图片与小圆点定时轮播

		var iNow = 0;  //显示当前图片下标
        var aImgs = null;  //当前图片
        var aBtns = null;//图片对应的小圆圈按钮
        // 定时器去启动轮播图
        var timer = setInterval(function () {
            iNow++;
            tab();
        }, 2500);

        // 图片切换函数
        function tab() {
            if (!aImgs) {
                aImgs = $("#J_homeSwiper .swiper-slide").find("a");
            }
            if (!aBtns) {
                aBtns = $("#J_homeSwiper .swiper-pagination").find("a");
            }
            if (iNow == 5) {
                iNow = 0;
            }

            // 图片切换
            aImgs.hide().css("opacity", 0.2).eq(iNow).show().animate({ opacity: 1 }, 500);
            // 小圆点切换
            aBtns.removeClass("swiper-pagination-bullet-active").eq(iNow).addClass("swiper-pagination-bullet-active");
        }

鼠标移入时暂停，移出时重新定时轮播。

// 鼠标的移入移出
        $("#J_homeSwiper, .swiper-button-prev, .swiper-button-next").mouseenter(function () {
            clearInterval(timer);
        }).mouseleave(function () {
            timer = setInterval(function () {
                iNow++;
                tab();
            }, 2500);
        })

// 点击小圆圈可以切换到对应图片:事件委托给后添加的节点增加点击事件


        $("#J_homeSwiper .swiper-pagination").on("click", "a", function () {
            iNow = $(this).index();
            tab();
            return false;//阻止a标签的默认跳转行为
        })

左右按钮可以前一张后一张

		$(".swiper-button-prev,.swiper-button-next").click(function () {
            if (this.className == "swiper-button-prev") {
                iNow -= 1;
                // console.log(iNow);
                if (iNow == -1) {
                    iNow = 4;
                }
            } else {
                iNow++;
            }
            tab();
        })

2 侧边导航栏:左侧是一个列表，每个li——node又包含一个list.首先所有node的list都显示none。输入时显示当前的div的list

html

<div class='site-category' style="display: block">
    <ul id='J_categoryList'
         class='site-category-list clearfix site-category-list-custom'>
         //多个li.category-item
         <!-- <li class = 'category-item'>
                 <a href="/index.html" class = 'title'>
                     手机 电话卡
                     <em class = 'iconfont-arrow-right-big'></em>
                 </a>
                 <div class="children clearfix children-col-4" style = 'display: block'>
                     <ul class="children-list children-list-col children-list-col-1">
                         <li>
                             <a href="http://www.mi.com/redminote8pro" data-log_code="31pchomeother001000#t=normal&amp;act=other&amp;page=home&amp;page_id=10530&amp;bid=3476792.2" class="link clearfix" data-stat-id="d678e8386e9cb0fb" onclick="_msq.push(['trackEvent', '81190ccc4d52f577-d678e8386e9cb0fb', 'http://www.mi.com/redminote8pro', 'pcpid', '31pchomeother001000#t=normal&amp;act=other&amp;page=home&amp;page_id=10530&amp;bid=3476792.2']);">
                                 <img src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/cba27e53367b74271a38a4515a692816.png?thumb=1&amp;w=40&amp;h=40&amp;f=webp&amp;q=90" width="40" height="40" alt="" class="thumb">
                                 <span class="text">Redmi Note 8 Pro</span>
                             </a>
                         </li>
                     </ul>
                 </div>
             </li> -->

     </ul>
 </div>

鼠标移入对应的li时，显示li内部的list。移出时隐藏。注意移入的li是动态加载进来的，因此使用事件委托

function leftNavTab() {
    $("#J_categoryList").on("mouseenter", ".category-item", function () {
        $(this).addClass("category-item-active");
    })
    $("#J_categoryList").on("mouseleave", ".category-item", function () {
        $(this).removeClass("category-item-active");
    })
}

3 首页顶部导航：类似侧边，一排ul，li内部含有list
html

<ul class='nav-list J_navMainList clearfix'>
    <li id='J_navCategory' class='nav-category'>
         <a href="#" class='link-category'>
             <span class='text'>全部商品分类</span>
         </a>
         <div class='site-category' style="display: block">
             <ul id='J_categoryList'
                 class='site-category-list clearfix site-category-list-custom'>
               
             </ul>
         </div>
     </li>
     <!-- 举例子li的设置
         <li data-inddex="0" class="nav-item">
         <a href="javascript:void(0);" class="link">
             <span class="text">小米优品生活态度</span>

         </a>
     </li> -->
 </ul>

顶部导航移入移出效果：使用className调整

function topNavTab() {
        $(".site-header .header-nav .nav-list").on("mouseenter", ".nav-item", function () {
            $(this).addClass("nav-item-active");
            // 当前移入a标签的下标,之前html多存在一个li
            var index = $(this).index() - 1;
            if (index >= 0 && index <= 6) {
                $("#J_navMenu").css({ "display": "block" }).removeClass("slide-up").addClass("slide-down");
                $("#J_navMenu .container").find("ul").eq(index).css({ "display": "block" }).siblings("ul").css({ "display": "none" });
            }

        })
        $(".site-header .header-nav .nav-list").on("mouseleave", ".nav-item", function () {
            $(this).removeClass("nav-item-active");
        })
        $(".site-header").on("mouseleave", ".nav-item", function () {

            var index = $(this).index() - 1;
            $("#J_navMenu").css({ "display": "block" }).removeClass("slide-down").addClass("slide-up");

        })
    }

4 搜索栏的获得焦点，自动展开关键字列表。失去焦点时关闭

function searchTab() {
        $("#search").focus(function () {
            $("#J_keywordList").removeClass("hide").addClass("show");
        }).blur(function () {
            $("#J_keywordList").removeClass("show").addClass("hide");
        })
    }

5 商品滑动效果
html

<div id='J_flashSaleList'
                                class='span16 flashsale-list swiper-container swiper-no-swiping swiper-container-initialized swiper-container-horizontal'>
                                <ul class='swiper-wrapper'
                                    style="transform: translate3d(-992px, 0px, 0px); transition-duration: 0ms;">
                                    <!-- <li class='swiper-slide rainbow-item-3' style='width: 234px; margin-right: 14px;'>
                                        <a href="#" target="_blank">
                                            <div class='content'>
                                                <div class='thumb'>
                                                    <img width="160" height="160"
                                                        src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/9c4bdbabe1a232469eea43c1824990d3.jpg?thumb=1&w=200&h=200&f=webp&q=90"
                                                        alt="" />
                                                </div>
                                                <h3 class='title'>最生活毛巾·Air（10条装） 素蓝</h3>
                                                <p class='desc'>给生活一条好毛巾</p>
                                                <p class='price'>
                                                    <span>99</span>元
                                                    <del>169元</del>
                                                </p>
                                            </div>
                                        </a>
                                    </li> -->
                                </ul>
                            </div>
  <div class='swiper-controls'>
        <span class='swiper-flashsale-prev swiper-button-disabled'>
            <i class='iconfont-arrow-left-big'></i>
        </span>
        <span class='swiper-flashsale-next'>
            <i class='iconfont-arrow-right-big'></i>
        </span>
    </div>

上方是多个商品数据，每行4个，宽度992px.定时器每次向左滑动4个。鼠标移入是停止移出时重新开始。左右两端的按钮可以向左向右滑动

 function slideTab() {
        // 按钮
        var aSpans = $(".swiper-controls").find("span");
        var iNow = 0;//显示第一组图片，每4个图片一组
        var count = Math.floor(26 / 4);//最后一组单独处理

        // 始终用的是一个timer,鼠标移入移出时和自发的定时器是一个，不会造成多个timer同时触发
        var timer = setInterval(function () {
            iNow++;
            tab();
            if (iNow == count) {
                clearInterval(timer);
            }
        }, 4000);//定时器，每隔四秒进行滚动

        // 滚动四张图片
        function tab() {
            iNow == 0 ? aSpans.eq(0).addClass("swiper-button-disabled") : aSpans.eq(0).removeClass("swiper-button-disabled");
            iNow == count ? aSpans.eq(1).addClass("swiper-button-disabled") : aSpans.eq(1).removeClass("swiper-button-disabled");

            var iTarget = iNow == count ? iNow * -992 + 496 : iNow * -992;//要运动的目标值
            $("#J_flashSaleList ul").css({
                transform: `translate3d(${iTarget}px, 0px, 0px)`,
                transitionDuration: `1000ms`
            })
        }
        // 按钮效果
        aSpans.click(function () {
            if ($(this).index() == 0) {
                // 左键
                iNow--;
                iNow = Math.max(iNow, 0);
            }
            else {
                iNow++;
                iNow = Math.min(iNow, count);
            }
            tab();
        })

        // ul的移入移出
        $("#J_flashSaleList").mouseenter(function () {
            clearInterval(timer);
        }).mouseleave(function () {
            timer = setInterval(function () {
                iNow++;
                tab();
                if (iNow == count) {
                    clearInterval(timer);
                }
            }, 4000);//定时器，每隔四秒进行滚动
        })
    }

6 首页数据加载以及选项卡的操作

    function Tab() {
        $(".page-main .container").on("mouseenter", ".more .tab-list li", function () {
            $(this).addClass("tab-active").siblings("li").removeClass("tab-active");
            // 同时切换商品列表
            $(this).closest(".home-brick-box").find(".box-bd .span16 ul").addClass("hide").eq($(this).index()).removeClass("hide");
        })
    }