效果图：

菜单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>'}, ''));});
});

JavaScript jQuery 实现banner(轮播图) 一相关推荐

jquery手写轮播图_jquery 实现轮播图详解及实例代码_jquery_脚本之家
轮播图: 接触jquery也有一段时间了,今天刚好利用轮播图来练练手.博文的前面会介绍一个简单用jquery做轮播图的例子,中间会插入一些关于轮播图更多的思考,在后面会用Javascript的方法来写 ...
html中制作banner,css banner轮播图怎么做？
css banner轮播图怎么做?下面本篇文章给大家简单介绍一下.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 初步了解动画效果吧.轮播图我一直以为靠jquery插件完成的,突然发 ...
jQuery实现异形轮播图
思路: 异形轮播图与普通轮播图不同的一点,是异形轮播图一次性展示多个图片,且图片大小的位置会动态变化. 以往我的处理办法都是直接给要展示的图片动态的添加一个class类, 简单粗暴.这次我在很多地方都 ...
banner轮播图切换插件
下载地址 banner轮播图切换插件,基于jquery实现的图片轮播效果. dd:
php自动轮播图代码,JavaScript如何实现动态轮播图效果？（代码示例）
本篇文章给大家带来的内容是JavaScript如何实现动态轮播图效果?(代码示例).有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 功能描述: 1.鼠标经过左右侧箭头显示,鼠标离开 ...
html5carousel图片轮播,jQuery响应式轮播图插件VM Carousel
插件描述:VM Carousel是一款jQuery响应式轮播图插件.该jquery轮播图插件支持自动播放模式,支持动态改变图片尺寸,支持居中模式,以及无限循环等. 使用方法在页面中引入jquery. ...
Mint-UI 移动首页开发 - header导航、banner轮播图
Mint-UI 移动首页style排版问题:header导航.banner轮播图.footer底部版权··· ··· 资源预览: 中文 2.x官方文档(含演示地址): 文档首页中文 2.x官方文档( ...
谷粒学院-首页数据显示-banner轮播图微服务搭建
新建banner轮播图微服务 1.在service模块下创建子模块service_cms 2.配置application.properties # 服务端口 server.port=8004 # 服务 ...
AxureRP实战（三）Banner轮播图交互（进阶篇）
前一篇<AxureRP实战(二)Banner轮播图交互(基础篇)>用淘宝的首页banner案例讲解了如何运用动态面板实现banner轮播图的切换,有了基本交互功能.但是,交互效果还有些欠缺 ...

JavaScript jQuery 实现banner(轮播图) 一

效果图：

菜单menu.json

banner img.json

代码：

html

CSS:

JavaScript:

JavaScript jQuery 实现banner(轮播图) 一相关推荐

最新文章

热门文章