小米官网仿造（二）--jQuery（头部轮播）

其他 2020-02-23 15:38:01 阅读次数: 0

接上：
效果图
在这里插入图片描述

主要是实现轮播图效果，以及鼠标移入移除的效果

开始的时候 没有想到 jq的动态创建 html 如下

 <div class="hender">
    <div class="head">
      <div class="w clearfix pr">
        <ul class="headNav"></ul>
        <ul class="headLogin fr">
          <li><a href="#">登录</a></li>
          <li><a href="#">注册</a></li>
          <li><a href="#">消息通知</a></li>
          <li class="myCar">
            <i class="iconfont">&#xe726;</i><a href="#">购物车(0)</a>
          </li>
        </ul>
        <div class="app">
          <div class="img">
            <a href="#"><img src="../upload/app.png" alt="" /></a>
          </div>
          <div class="text"><a href="#">小米商城APP</a></div>
        </div>
        <div class="car">
          <p>购物车中还没有商品，赶紧选购吧</p>
        </div>
      </div>
    </div>
    <div class="mainNav pr">
      <div class="w clearfix">
        <div class="logo fl">
          <img src="../upload/logo.png" alt="" />
          <h1><a href="#">小米</a></h1>
        </div>
        <h2 style="position: absolute;left:135px;top:25px;font-size: 32px;color:#d64923;">小米年货节</h2>
        <div class="nav fl">
          <ul></ul>
        </div>
        <div class="search fr">
          <div class="text fl"><input type="text" /></div>
          <div class="button fl"><i class="iconfont" style="color: #333">&#xe6ac;</i></div>
        </div>
      </div>
      <!--鼠标移入导航的弹窗-->
      <div class="navPro1">
        <div class="w">
          <ul></ul>
        </div>
      </div>
    </div>
    <div class="container w pr">
      <!--sidenav定位-->
      <div class="sidenav">
        <ul></ul>
      </div>
      <div class="slide fr">
        <ul>
          <li><img src="../upload/slide1.jpg" alt="" /></li>
          <li><img src="../upload/slide2.jpg" alt="" /></li>
          <li><img src="../upload/slide3.jpg" alt="" /></li>
          <li><img src="../upload/slide4.jpg" alt="" /></li>
          <li><img src="../upload/slide5.jpg" alt="" /></li>
        </ul>
      </div>
      <div class="arrowLeft"><i class="iconfont">&#xe697;</i></div>
      <div class="arrowRight"><i class="iconfont">&#xe6a7;</i></div>
      <div class="dots">
        <ul>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
        </ul>
      </div>
    </div>
    <script src="../js/xiaomi.js"></script>
  </div>

css样式

/*头部开始*/
.head {
    height: 40px;
    background: #333333;
}

.head .headNav li {
    float: left;
    margin-top: 14px;
    border-right: 1px solid #393f3f;
    font-size: 12px;

}

.head .headNav li:last-child {
    border-right: none;
}

.head .headNav li a {
    margin: 0 7px;
    color: #b0b0b0;
}

.head .headNav li a:hover {
    color: #fff;
}

.head .headNav li:first-child a {
    margin-left: 0;
}

.head .headLogin li {
    float: left;
    margin-top: 14px;
    border-right: 1px solid #393f3f;
}

.head .headLogin li:nth-child(3) {
    border-right: none;
}

.head .headLogin li:last-child {
    margin-top: 0;
    height: 40px;
    width: 120px;
    background: #424242;
    line-height: 40px;

}

.head .headLogin li a {
    color: #b0b0b0;
}

.head .headLogin li a:hover {
    color: #fff;
}

.head .headLogin li:first-child a {
    margin-right: 7px;
}

.head .headLogin li:nth-child(2) a {
    margin: 0 7px;
}

.head .headLogin li:nth-child(3) a {
    margin: 0 25px 0 7px;
}

.head .headLogin li:last-child i {
    font-size: 14px;
    margin-left: 16px;
    margin-right: 5px;
}

/*小米下载的盒子弹出*/
.head .app {
    width: 124px;
    height: 150px;
    background: #ECEEEB;
    position: absolute;
    top: 40px;
    left: 500px;
    text-align: center;
    display: none;
    z-index: 10;
}

.head .app img {
    width: 100px;
    height: 100px;
    margin-top: 15px;
}

.head .app .text {
    margin-top: 5px;
}

.head .app .text a {
    color: #000000;
    font-size: 16px;
}

/*购物车的盒子弹出*/
.head .car {
    width: 300px;
    height: 100px;
    background: #e2e3e6;
    position: absolute;
    right: 0;
    top: 40px;
    line-height: 100px;
    font-size: 12px;
    text-align: center;
    display: none;
    z-index: 10;
}

/*头部结束*/
/*导航开始*/
.mainNav {
    height: 100px;
}

.mainNav .logo {
    display: block;
    margin-top: 22px;
    width: 55px;
    height: 55px;
    background: orangered;
    margin-right: 180px;
}

.mainNav .logo img,
.mainNav .logo h1 a {
    width: 55px;
    height: 55px;
}

.mainNav .logo h1 {
    font-size: 0;
}

.mainNav .nav {
    margin-top: 40px;
    margin-right: 79px;
}

.mainNav .nav li {
    float: left;
}

.mainNav .nav li a {
    margin: 0 10px;
    color: #333333;
    font-size: 16px;
}

.mainNav .search {
    margin-top: 25px;
}

.mainNav .search .text {
    border: 1px solid #e0e0e0;
}

.mainNav .search input {
    width: 243px;
    height: 48px;
    line-height: 48px;
}

.mainNav .search .button {
    width: 50px;
    height: 48px;
    line-height: 48px;
    text-align: center;
    border: 1px solid #e0e0e0;
    border-left: 0;

}

.mainNav .search .button i {
    font-size: 20px;
}


.mainNav .navPro1 {
    width: 100%;
    height: 229px;
    background: #ffffff;
    position: absolute;
    top: 100px;
    display: none;
    z-index: 50;
}

.mainNav .navPro1 li {
    float: left;
    height: 229px;
    background: #fff;
    padding: 0 23px 0 23px;

}

.mainNav .navPro1 img {
    height: 100px;
    margin-top: 36px;
}

.mainNav .navPro1 .proName {
    margin-top: 22px;
    margin-bottom: 10px;
    text-align: center;
}

.mainNav .navPro1 .proName a {
    color: #333333;
}

.mainNav .navPro1 .proPrice {
    text-align: center;
    color: #ff6700;
}

/*导航结束*/
/*侧边栏开始*/
.container {
    background: #ff5b74;
    height: 460px;
}

.container .sidenav {
    background: rgba(0, 0, 0, 0.4);
    /*opacity: 0.3;*/
    padding: 20px 0;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 10;
}

.container .sidenav li {
    height: 42px;
    line-height: 42px;
    width: 234px;
    font-size: 14px;
    padding-left: 30px;
}

.container .sidenav li a {
    color: #fff;
}

.container .sidenav li:hover {
    background: #ff6700;
}

.container .sidenav li i {
    float: right;
    font-size: 14px;
    margin-right: 25px;
    color: #c0c4c6;
}

/*侧边栏结束*/
/*轮播图开始*/
.container .slide {
    width: 1226px;
    height: 460px;
    overflow: hidden;
}

.container .slide img {
    width: 1226px;
    height: 460px;
}

.container .slide li {
    position: absolute;
    width: 1226px;
    height: 460px;
    opacity: 0;
}

.container .slide li:first-child {
    opacity: 1;
}

.container .arrowLeft {
    width: 41px;
    height: 69px;
    line-height: 69px;
    position: absolute;
    left: 264px;
    top: 196px;
}

.container .arrowLeft i {
    font-size: 45px;
    color: #bac6d0;
}

.container .arrowRight {
    width: 41px;
    height: 69px;
    line-height: 69px;
    position: absolute;
    right: 0;
    top: 196px;
}

.container .arrowRight i {
    font-size: 45px;
    color: #bac6d0;
}

.container .dots {
    position: absolute;
    bottom: 25px;
    right: 35px;
}

.container .dots li {
    float: left;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #9ba6ac;
    margin-right: 10px;
}

.dots li {
    cursor: pointer;
}

/*轮播图结束*/

jq代码：

$(function () {
    /*头部的js特效开始*/
    var head_arr = ['小米商城', 'MIUI', 'loT', '云服务', '金融', '有品', '小爱开放平台', '政企服务', '资质证照', '协议规则', '下载app', 'Select Region'];
    var head_Str = '';
    $.each(head_arr, function (index, val) {
        //能找到数组的所有文字
        head_Str += ' <li>\n' +
            '                <a href="">' + head_arr[index] + '</a>\n' +
            '            </li>'
    });
    $('.head .headNav').html(head_Str);
    $('.head .headNav li:eq(10) a').on('mouseenter', function () {
        $('.head .app').css('display', 'block');
    }).on('mouseleave', function () {
        $('.head .app').css('display', 'none');
    })
    $('.head .headLogin .myCar').on('mouseenter', function () {
        $('.myCar i,.myCar a').css('color', '#cc621f');
        $('.head .car').css('display', 'block')
    }).on('mouseleave', function () {
        $('.head .car').css('display', 'none')
        $('.myCar i,.myCar a').css('color', '#b0b0b0');
    })
    /*头部的js特效结束*/
    /*导航的js特效开始*/
    var mainNav_arr = ['小米手机', '红米', '电视', '笔记本', '家电', '新品', '路由器', '智能硬件', '服务', '社区'];
    var mainNav_Str = '';
    $.each(mainNav_arr, function (index, val) {
        mainNav_Str += ' <li>\n' +
            '                <a href="">' + mainNav_arr[index] + '</a>\n' +
            '            </li>'
    });
    $('.mainNav .nav ul').html(mainNav_Str);
    var mainNav_numArr = [5, 4, 6, 6, 6, 6, 6, 6];
    var mainNav_imgArr1 = ['mix3-320.png', 'qingchun-320.png', 'pc-320-220-mi8.png', 'pc-320-miplay-1.png', 'pc-320-220-mi8se.png'];
    var mainNav_proNameArr1 = ['小米MIX 3', '小米8 青春版', '小米8', '小米play', '小米8 SE'];
    var mainNav_proPrice1 = ['3299', '1399', '2699', '1099', '1699'];
    var mainNav__Str = '';
    $.each(mainNav_imgArr1, function (index, val) {
        mainNav__Str += '  <li>\n' +
            '                    <div class="img">\n' +
            '                        <img src="../upload/' + mainNav_imgArr1[index] + '" alt="">\n' +
            '                    </div>\n' +
            '                    <div class="proName"><a href="#">' + mainNav_proNameArr1[index] + '</a></div>\n' +
            '                    <div class="proPrice"><p>' + mainNav_proPrice1[index] + ' 元起' + '</p></div>\n' +
            '                </li>'
    })
    $('.mainNav .navPro1 ul').html(mainNav__Str);
    $('.mainNav .nav ul li:first').on('mouseenter', function () {
        $('.mainNav .navPro1').slideDown(200);
    }).on('mouseleave', function () {
        $('.mainNav .navPro1').slideUp(200);
    })
    /*导航的js特效结束*/
    /*侧边栏js特效开始*/
    var sideNav_arr = ['手机 电话卡', '电视 盒子', '笔记本 平板', '家电 插线板', '出行 穿戴', '智能 路由器', '电源 配件', '健康 儿童', '耳机 音箱', '生活 箱包'];
    var sideNav_str = '';
    $.each(sideNav_arr, function (index, ele) {
        sideNav_str += '<li>\n' +
            '                <a href="#">' + sideNav_arr[index] + '</a>\n' +
            '                <i class="iconfont">&#xe6a7;</i>\n' +
            '            </li>'
    })
    $('.container .sidenav ul').html(sideNav_str);
    /*侧边栏js特效结束*/
    /*轮播图开始*/
    $('.container .arrowLeft').hover(function () {
        $(this).css('background', 'rgba(0,0,0,0.6)');
        $('.container .arrowLeft i').css('color', '#fff');
    }, function () {
        $(this).css('background', '');
        $('.container .arrowLeft i').css('color', '#bac6d0');
    })
    $('.container .arrowRight').hover(function () {
        $(this).css('background', 'rgba(0,0,0,0.6)');
        $('.container .arrowRight i').css('color', '#fff');
    }, function () {
        $(this).css('background', '');
        $('.container .arrowRight i').css('color', '#bac6d0');
    })
    // 小圆点的效果
    var dots = $('.container .dots li');  //获取点
    var lis = $('.container .slide li');
    var now = 0;
    //hover的效果
    dots.hover(function () {
        //这个获取到点的下标
        $(this).css('background', '#fff');
    }, function () {
        $(this).css('background', '#9ba6ac');
        dots.eq(now).css('background', '#fff').siblings().css('background', '#9ba6ac');
    })
    dots.eq(now).css('background', '#fff').siblings().css('background', '#9ba6ac');
    dots.on('click', function () {
        var index = $(this).index();
        //点击小圆点，对应的这个下标的图片显示
        $('.container .slide li').eq(index).animate({
            opacity: 1
        }, 800)
        //其他的不显示
        $('.container .slide li').eq(index).siblings().animate({
            opacity: 0
        }, 800)
        now = index;
        dots.eq(now).css('background', '#fff').siblings().css('background', '#9ba6ac');
    })
    //右键按下
    function autoPlay() {
        now++;
        //最后一个图再按下，按下之前是4，按下了就是5了
        if (now == 5) {
            now = 0;
        }
        //让当前这个显示
        $('.container .slide li').eq(now).animate({
            opacity: 1
        }, 800)
        //让其他的不显示
        $('.container .slide li').eq(now).siblings().animate({
            opacity: 0
        }, 800)
        dots.eq(now).css('background', '#fff').siblings().css('background', '#9ba6ac');
    }
    $('.container .arrowRight').on('click', function () {
        now++;
        //最后一个图再按下，按下之前是4，按下了就是5了
        if (now == 5) {
            now = 0;
        }
        //让当前这个显示
        $('.container .slide li').eq(now).animate({
            opacity: 1
        }, 800)
        //让其他的不显示
        $('.container .slide li').eq(now).siblings().animate({
            opacity: 0
        }, 800)
        dots.eq(now).css('background', '#fff').siblings().css('background', '#9ba6ac');
    })
    // 左键按下
    $('.container .arrowLeft').on('click', function () {
        now--;
        if (now == -1) {
            now = 4;
        }
        $('.container .slide li').eq(now).animate({
            opacity: 1
        }, 800)
        $('.container .slide li').eq(now).siblings().animate({
            opacity: 0
        }, 800)
        dots.eq(now).css('background', '#fff').siblings().css('background', '#9ba6ac');
    })
    time = setInterval(function () {
        autoPlay();
    }, 2000)
    $('.container').on('mouseenter', function () {
        clearInterval(time);
    })
    $('.container').on('mouseleave', function () {
        time = setInterval(function () {
            autoPlay();
        }, 2000)

    })
    /*轮播图结束*/
})
YeSyinnng
发布了35 篇原创文章 · 获赞 2 · 访问量 9831
私信 关注

猜你喜欢

转载自blog.csdn.net/qq_39532595/article/details/86373069
今日推荐
周排行
Leetcode简单题61~80
解决zookeeper磁盘IO高的问题
多线程相关方法详解
Maven-setting.xml文件详解
Maven 项目的 classpath 理解
渊亭科技大数据笔试题
配置JVM内存分配
计算机网络个人学习笔记 （三）网络层 ：第三部分 连载
js中两个等号(==)和三个等号(===)的区别
用C程序自动打开电脑上的程序
每日归档
更多
2024-09-18(0)
2024-09-17(0)
2024-09-16(0)
2024-09-15(0)
2024-09-14(0)
2024-09-13(0)
2024-09-12(0)
2024-09-11(0)
2024-09-10(0)
2024-09-09(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022