JavaScript jQuery 实现banner(轮播图) 一

效果图：

 

菜单menu.json

[
  {
    "item": "手机、配件",
    "sub": [
      {
        "name": "手机通讯：",
        "content": [
          "手机",
          "手机商城",
          "以旧换新"
        ]
      },
      {
        "name": "手机配件：",
        "content": [
          "手机壳",
          "手机存储卡",
          "数据线",
          "充电器",
          "电池"
        ]
      },
      {
        "name": "运营商：",
        "content": [
          "中国联通",
          "中国移动",
          "中国电信"
        ]
      },
      {
        "name": "智能设备：",
        "content": [
          "智能手环",
          "智能家居",
          "智能手表"
        ]
      },
      {
        "name": "娱乐：",
        "content": [
          "耳机",
          "音响",
          "收音机",
          "麦克风"
        ]
      }
    ]
  },
  {
    "item": "电脑",
    "sub": [
      {
        "name": "电脑：",
        "content": [
          "笔记本",
          "平板",
          "一体机"
        ]
      },
      {
        "name": "电脑配件：",
        "content": [
          "显示器",
          "CPU",
          "主板",
          "硬盘",
          "电源",
          "显卡",
          "其它配件"
        ]
      },
      {
        "name": "游戏设备：",
        "content": [
          "游戏机",
          "耳机",
          "游戏软件"
        ]
      },
      {
        "name": "网络产品：",
        "content": [
          "路由器",
          "网络机顶盒",
          "交换机",
          "存储卡",
          "网卡"
        ]
      },
      {
        "name": "外设：",
        "content": [
          "鼠标",
          "键盘",
          "U盘",
          "移动硬盘",
          "鼠标垫",
          "电脑清洁"
        ]
      }
    ]
  },
  {
    "item": "家用电器",
    "sub": [
      {
        "name": "电视：",
        "content": [
          "国产品牌",
          "韩国品牌",
          "欧美品牌"
        ]
      },
      {
        "name": "空调：",
        "content": [
          "显示器",
          "柜式",
          "中央",
          "壁挂式"
        ]
      },
      {
        "name": "多门：",
        "content": [
          "多门",
          "对开门",
          "三门",
          "双门"
        ]
      },
      {
        "name": "洗衣机：",
        "content": [
          "滚筒式洗衣机",
          "迷你洗衣机",
          "洗烘一体机"
        ]
      },
      {
        "name": "厨房电器：",
        "content": [
          "油烟机",
          "洗碗机",
          "燃气灶"
        ]
      }
    ]
  },
  {
    "item": "家具",
    "sub": [
      {
        "name": "家纺：",
        "content": [
          "被子",
          "枕头",
          "四件套",
          "床垫"
        ]
      },
      {
        "name": "灯具：",
        "content": [
          "台灯",
          "顶灯",
          "节能灯",
          "应急灯"
        ]
      },
      {
        "name": "厨具：",
        "content": [
          "烹饪锅具",
          "餐具",
          "彩板刀具"
        ]
      },
      {
        "name": "家装：",
        "content": [
          "地毯",
          "沙发垫套",
          "装饰字画",
          "照片墙",
          "窗帘"
        ]
      },
      {
        "name": "生活日用：",
        "content": [
          "收纳用品",
          "于是用品",
          "雨衣雨伞"
        ]
      }
    ]
  }
]

banner img.json

[
  {
    "url": "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1133216305,48749125&fm=26&gp=0.jpg",
    "link": "https://www.jd.com",
    "title": "京东",
    "alt": "京东"
  },
  {
    "url": "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1552566827&di=e764ec5f93592fbfee214fa17f6b4ae5&imgtype=jpg&er=1&src=http%3A%2F%2Fpic.90sjimg.com%2Fdesign%2F00%2F07%2F77%2F64%2F561221d452fe4.jpg",
    "link": "https://www.taobao.com",
    "title": "淘宝",
    "alt": "天猫"
  },
  {
    "url": "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1551972170779&di=3d03a9d4aa48b12fdf937b3dd06c8fa2&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01aa6d55d137156ac725baa0e6971c.jpg%401280w_1l_2o_100sh.png",
    "link": "https://www.tmall.com",
    "title": "天猫",
    "alt": "天猫"
  },
  {
    "url": "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1551820527698&di=200fd1f4f73875f9984f324683348d47&imgtype=0&src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F1%2F5481266ac8fbb.jpg",
    "link": "https://www.baidu.com",
    "title": "百度",
    "alt": "百度"
  },
  {
    "url": "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1551823210051&di=8c1c79ff108688568f9a9af8954a0bd0&imgtype=jpg&src=http%3A%2F%2Fimg3.imgtn.bdimg.com%2Fit%2Fu%3D660414558%2C1171548186%26fm%3D214%26gp%3D0.jpg",
    "link": "https://www.19lou.com/creampic-fid-58-t-9331399727863700-p-9741399727863972-nodigest-all-dateline.html",
    "title": "点击跳转到图片",
    "alt": "https://www.baidu.com/img/superlogo_c4d7df0a003d3db9b65e9ef0fe6da1ec.png?where=super"
  }
]

 

 

 

代码：

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>banner</title>
    <script src="http://code.jquery.com/jquery-3.3.1.min.js"></script>
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
<div id="container">
    <div id="img-wrap">
        <img src="img/bg1.jpg" alt="bg1">
    </div>
    <a href="javascript:void(0)" class="button prev" id="prev"></a>
    <a href="javascript:void(0)" class="button next" id="next"></a>
    <div id="buttons">
        <i class="btn"></i>
        <i class="btn btn-selected"></i>
    </div>
    <div class="menu-warp">
        <ul id="menu">
            <li>
                <a href="">手机、配件
                    <ii>&gt;</ii>
                </a>
            </li>
        </ul>
    </div>

    <div id="menu-sub">
        <p id="title">Test Te</p>
        <ul id="menu-content">
            <li><a href="#">test / </a><a href="#">test / </a><a href="#">test / </a><a href="#">test / </a></li>
        </ul>
    </div>
</div>

<script src="js/index.js">

</script>
</body>
</html>

CSS:

body {
    margin: 0;
    padding: 0;
}

#container {
    margin: 50px auto;
    width: 1200px;
    height: 460px;
    position: relative;
    overflow: hidden;
    border-radius: 10px;
}

#img-wrap img {
    position: absolute;
    object-fit: cover;
    -o-object-fit: contain;
    background-repeat: no-repeat;
    cursor: pointer;
    width: 100%;
}


#buttons {
    position: absolute;
    bottom: 20px;
    right: 60px;
    height: 35px;
}

.btn {
    display: inline-block;
    width: 13px;
    height: 13px;
    margin: 10px;
    border: 2px solid white;
    /*noinspection CssReplaceWithShorthandSafely*/
    background: grey;
    /*noinspection CssReplaceWithShorthandSafely*/
    background-color: rgba(0, 0, 0, .5);
    border-radius: 50%;
}

.btn-selected {
    border: 2px solid grey;
    background: white;
    box-shadow: 0 0 10px grey;
}

.btn:hover {
    box-shadow: 0 0 10px white;
    cursor: pointer;
}

.button {
    position: absolute;
    top: 50%;
    margin-top: -40px;
    width: 40px;
    height: 80px;
    background: url(../img/arrow.png) rgba(0, 0, 0, .01) no-repeat center;
}

.button:hover {
    background: url(../img/arrow.png) rgba(0, 0, 0, .8) no-repeat center;
    opacity: .6;
    filter: opacity(60%);
}

.prev {
    transform: rotate(180deg);
    left: 280px;
}

.next {
    right: 0;
}

.menu-warp {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 280px;
    background: rgba(0, 0, 0, .35);
}


#menu {
    list-style: none;
    margin: 20px 30px;
    display: inline-block;
    width: 220px;
    padding: 0;
    font-size: 18px;
}


#menu li {
    padding: 0 20px;
    line-height: 78px;
    border-bottom: 1px rgba(255, 255, 255, .35) solid;
    font-family: "Andale Mono", sans-serif;
    color: white;
}

#menu:hover {
    margin: 20px 0;
    width: 100%;
}


#menu:hover li {
    padding: 0 50px;
    border-bottom: 1px transparent solid;
    background-image: linear-gradient(180deg, rgba(200, 160, 0, .05), rgba(0, 0, 200, .05));
}


#menu li:nth-last-child(1) {
    border: none;
}

#menu li:hover {
    background: rgba(0, 0, 0, .2);
    cursor: pointer;
}

#menu li span {
    position: absolute;
    right: 50px;
}


#menu-sub {
    display: none;
    position: absolute;
    left: 280px;
    top: 1px;
    bottom: 1px;
    width: 702px;
    border-radius: 2px;
    background: white no-repeat;
    padding-left: 30px;
    overflow: hidden;
}

#title {
    color: red;
    font-size: 23px;
    margin-bottom: 15px;
}

#menu-content, #menu-content li {
    list-style: none;
    margin: 0;
    padding: 0;
}

#menu-content li {
    color: #222;
    font-size: 18px;
    line-height: 56px;
}

#menu-content a {
    color: #222;
    text-decoration: none;
}

#menu-content a:hover {
    color: red;
}

JavaScript:

var intervalId;
$.getJSON('data/img.json', (images) => {
    clearInterval(intervalId);
    const lefts = [{left: '100%'}, {left: 0}, {left: '-100%'}];
    $('#next').click(next);
    $('#prev').click(prev);
    $('#container').bind('mouseover mouseout', function (event) {
        clearInterval(intervalId);
        'mouseout' === event.type && showAddNone();
    });


    const buttonWrap = $('#buttons');
    const imgWrap = $('#img-wrap').click(function () {
        window.open(images[pics.idx].link, '_blank')
    });
    imgWrap.html(images.reduce((html, item) => html + '<img src="' + item.url + '" alt="' + item.alt + '" title="' + item.title + '">', ''));

    const pics = imgWrap.find('img');
    pics.preIdx = pics.idx = 0;
    buttonWrap.html('<span class="btn"/>'.repeat(pics.length));
    var btns = buttonWrap.find('span').click(function () {
        const idx = $(this).index();
        switch (idx - pics.preIdx) {
            case 0:
                break;
            case 1:
                next();
                break;
            case -1:
                prev();
                break;
            default:
                pics.idx = idx;
                moveImgToIdx();
                break;
        }
    });

    btns.eq(0).addClass('btn-selected');
    pics.eq(0).css({opacity: 1}).siblings().css({opacity: 0});


    $.easing['sin'] = function (v) {
        return .5 * Math.sin((v - .5) * Math.PI) + .5;
    };


    function getAnimate(leftId1, leftId2) {
        pics.eq(pics.idx).css(lefts[leftId1]);
        return lefts[leftId2];
    }


    function moveImgToIdx() {
        btns.eq(pics.idx).addClass('btn-selected').siblings().removeClass('btn-selected');
        const imgs = pics.stop(true).css(lefts[1]);
        imgs.eq(pics.preIdx).css({opacity: 1}).animate({opacity: 0}, 500).siblings().css({opacity: 0});
        imgs.eq(pics.idx).animate({opacity: 1}, 500);
        pics.preIdx = pics.idx;
    }


    function moveNextOrPrev(animate) {
        btns.eq(pics.idx).addClass('btn-selected').siblings().removeClass('btn-selected');
        const imgs = pics.stop(true, true).css({opacity: 0});
        imgs.eq(pics.idx).css({opacity: 1}).animate(lefts[1], 256);
        imgs.eq(pics.preIdx).css({opacity: 1}).animate(animate, 256);
        pics.preIdx = pics.idx;
    }

    function next() {
        if (++pics.idx === images.length) pics.idx = 0;
        moveNextOrPrev(getAnimate(0, 2));
    }


    function prev() {
        if (--pics.idx === -1) pics.idx = images.length - 1;
        moveNextOrPrev(getAnimate(2, 0));
    }


    function showAddNone() {
        intervalId = setInterval(next, 3000)
    }


    showAddNone();
});

$.getJSON('data/menu.json', (menu) => {
    function subMenuShowOrHide(event) {
        event.type === 'mouseover' ? subMenu.show() : subMenu.hide();
    }

    var subMenu = $('#menu-sub').bind('mouseout mouseover', subMenuShowOrHide);
    var title = subMenu.find('#title');
    var menuContent = subMenu.find('#menu-content');
    $('#menu')
        .bind('mouseout mouseover', subMenuShowOrHide)
        .html(menu.reduce((html, item) => html + '<li>' + item.item + '<span>&gt;</span></li>', ''))
        .find('li')
        .mousemove(function () {
            const idx = $(this).index();
            title.text(menu[idx].item);
            menuContent.html(menu[idx].sub.reduce((html, item) => {
                var content = '';
                for (var i = 0; i < item.content.length; i++) {
                    content += '<a href="#">' + item.content[i] + '</a>' + (i === item.content.length - 1 ? '' : '&nbsp;/&nbsp;');
                }
                return html + '<li><strong>' + item.name + '&nbsp;</strong>' + content + '</li>'
            }, ''));
        });
});