JS完结：用JavaScript写个功能完善的电商轮播图

轮播图：自动轮播+点击对应点切换+下一张+菜单导航
先讲思路，再上代码：

先拿HTML整体布局，先轮播图，然后对应小圆点点击跳转，上一张和下一张。
然后左侧菜单栏的布局，鼠标移上去显示不同内容。

CSS来完成点击或滑过时的样式，用position和display和加className来实现覆盖或替换内容。先看图：

最后用JS来实现轮播动态效果，页面交互。主要用到dom获取元素，然后遍历数组，简单循环判断，定时器的使用。
1.先完成自动轮播
先封装一个通过ID获取元素的函数byId方便以后调用

function byId(id){  //id是个字符串类型，先判断，封装获取元素return typeof(id)==="string"?document.getElementById(id):id;
}

改变图片函数：

function changeImg(){for(var i=0,len=dots.length;i<len;i++){dots[i].className = "";pics[i].style.display = "none";//遍历所有的pics隐藏}dots[index].className = "active";pics[index].style.display = "block";
}

刚开始图片轮播和点击对应小数点想分开写，后面发现可以放在一起，元素个数都相同。那何必再多写一遍呢。所以和下面的写在一起。
2.完善然后点击对应
鼠标滑入时：

function slideImg(){var main = byId("main");var banner = byId("banner");var menuContent = byId("menu-content");main.onmouseover = function(){stopAutoPlay();//滑入停止轮播}main.onmouseout = function(){startAutoPlay();}main.onmouseout();//自动在main上触发滑过// 点击小点导航切换for(var i=0,len=dots.length;i<len;i++){dots[i].id = i;dots[i].onclick = function(){index = this.id;changeImg();//点击则调用切换图片}}
}

3.然后上下一张

    // 下一张next.onclick = function(){index++;if(index>=size) index=0;changeImg();}// 上一张prev.onclick = function(){index--;if(index<0) index=size-1;changeImg();}

完整代码在后面。

任何事情不可能一次就做的完美，一次一次的修改才能不断完善功能。
不可能一次就html做好，再写css，js。都是凭经验不断尝试验证来实现。

HTML

<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><link rel="stylesheet" href="css/style.css">
</head>
<body><div class="main" id="main"><div class="menu-box"></div><!--内容--><div class="sub-menu hide" id="sub-menu"><div class="inner-box"><div class="sub-inner-box"><div class="title">手机、配件</div><div class="sub-row"><span class="bold mr10">手机通讯：</span><a href="">手机</a><span class="ml10 mr10">/</span><a href="">手机维修</a><span class="ml10 mr10">/</span><a href="">以旧换新</a></div><div class="sub-row"><span class="bold mr10">手机配件：</span><a href="">手机壳</a><span class="ml10 mr10">/</span><a href="">手机存储卡</a><span class="ml10 mr10">/</span><a href="">数据线</a><span class="ml10 mr10">/</span><a href="">充电器</a><span class="ml10 mr10">/</span><a href="">电池</a></div><div class="sub-row"><span class="bold mr10">运营商：</span><a href="">中国联通</a><span class="ml10 mr10">/</span><a href="">中国移动</a><span class="ml10 mr10">/</span><a href="">中国电信</a></div><div class="sub-row"><span class="bold mr10">智能设备：</span><a href="">智能手环</a><span class="ml10 mr10">/</span><a href="">智能家居</a><span class="ml10 mr10">/</span><a href="">智能手表</a><span class="ml10 mr10">/</span><a href="">其他配件</a></div><div class="sub-row"><span class="bold mr10">娱乐：</span><a href="">耳机</a><span class="ml10 mr10">/</span><a href="">音响</a><span class="ml10 mr10">/</span><a href="">收音机</a><span class="ml10 mr10">/</span><a href="">麦克风</a></div></div></div><div class="inner-box"><div class="sub-inner-box"><div class="title">电脑</div><div class="sub-row"><span class="bold mr10">电脑：</span><a href="">笔记本</a><span class="ml10 mr10">/</span><a href="">平板</a><span class="ml10 mr10">/</span><a href="">一体机</a></div><div class="sub-row"><span class="bold mr10">电脑配件：</span><a href="">显示器</a><span class="ml10 mr10">/</span><a href="">CPU</a><span class="ml10 mr10">/</span><a href="">主板</a><span class="ml10 mr10">/</span><a href="">硬盘</a><span class="ml10 mr10">/</span><a href="">电源</a><span class="ml10 mr10">/</span><a href="">显卡</a><span class="ml10 mr10">/</span><a href="">其他配件</a></div><div class="sub-row"><span class="bold mr10">游戏设备：</span><a href="">游戏机</a><span class="ml10 mr10">/</span><a href="">耳机</a><span class="ml10 mr10">/</span><a href="">游戏软件</a></div><div class="sub-row"><span class="bold mr10">网络产品：</span><a href="">路由器</a><span class="ml10 mr10">/</span><a href="">网络机顶盒</a><span class="ml10 mr10">/</span><a href="">交换机</a><span class="ml10 mr10">/</span><a href="">存储卡</a><span class="ml10 mr10">/</span><a href="">网卡</a></div><div class="sub-row"><span class="bold mr10">外部产品：</span><a href="">鼠标</a><span class="ml10 mr10">/</span><a href="">键盘</a><span class="ml10 mr10">/</span><a href="">U盘</a><span class="ml10 mr10">/</span><a href="">移动硬盘</a><span class="ml10 mr10">/</span><a href="">鼠标垫</a><span class="ml10 mr10">/</span><a href="">电脑清洁</a></div></div></div><div class="inner-box"><div class="sub-inner-box"><div class="title">家用电器</div><div class="sub-row"><span class="bold mr10">电视：</span><a href="">国产品牌</a><span class="ml10 mr10">/</span><a href="">韩国品牌</a><span class="ml10 mr10">/</span><a href="">欧美品牌</a></div><div class="sub-row"><span class="bold mr10">空调：</span><a href="">显示器</a><span class="ml10 mr10">/</span><a href="">柜式</a><span class="ml10 mr10">/</span><a href="">中央</a><span class="ml10 mr10">/</span><a href="">壁挂式</a></div><div class="sub-row"><span class="bold mr10">冰箱：</span><a href="">多门</a><span class="ml10 mr10">/</span><a href="">对开门</a><span class="ml10 mr10">/</span><a href="">三门</a><span class="ml10 mr10">/</span><a href="">双门</a></div><div class="sub-row"><span class="bold mr10">洗衣机：</span><a href="">滚筒式洗衣机</a><span class="ml10 mr10">/</span><a href="">迷你洗衣机</a><span class="ml10 mr10">/</span><a href="">洗烘一体机</a></div><div class="sub-row"><span class="bold mr10">厨房电器：</span><a href="">油烟机</a><span class="ml10 mr10">/</span><a href="">洗碗机</a><span class="ml10 mr10">/</span><a href="">燃气灶</a></div></div></div><div class="inner-box"><div class="sub-inner-box"><div class="title">家具</div><div class="sub-row"><span class="bold mr10">家纺：</span><a href="">被子</a><span class="ml10 mr10">/</span><a href="">枕头</a><span class="ml10 mr10">/</span><a href="">四件套</a><span class="ml10 mr10">/</span><a href="">床垫</a></div><div class="sub-row"><span class="bold mr10">灯具：</span><a href="">台灯</a><span class="ml10 mr10">/</span><a href="">顶灯</a><span class="ml10 mr10">/</span><a href="">节能灯</a><span class="ml10 mr10">/</span><a href="">应急灯</a></div><div class="sub-row"><span class="bold mr10">厨具：</span><a href="">烹饪锅具</a><span class="ml10 mr10">/</span><a href="">餐具</a><span class="ml10 mr10">/</span><a href="">菜板刀具</a></div><div class="sub-row"><span class="bold mr10">家装：</span><a href="">地毯</a><span class="ml10 mr10">/</span><a href="">沙发垫套</a><span class="ml10 mr10">/</span><a href="">装饰字画</a><span class="ml10 mr10">/</span><a href="">照片墙</a><span class="ml10 mr10">/</span><a href="">窗帘</a></div><div class="sub-row"><span class="bold mr10">生活日用：</span><a href="">收纳用品</a><span class="ml10 mr10">/</span><a href="">浴室用品</a><span class="ml10 mr10">/</span><a href="">雨伞雨衣</a></div></div></div></div><!-- 主菜单 --><div class="menu-content" id="menu-content"><div class="menu-item"><a href=""><span>手机、配件</span><i class="icon">&#xe665;</i></a></div><div class="menu-item"><a href=""><span>电脑</span><i class="icon">&#xe665;</i></a></div><div class="menu-item"><a href=""><span>家用电器</span><i class="icon">&#xe665;</i></a></div><div class="menu-item"><a href=""><span>家具</span><i class="icon">&#xe665;</i></a></div></div><!-- 轮播图 先实现-->  <div class="banner" id="banner"><a href=""><div class="banner-slide slide1 slide-active"></div></a><a href=""><div class="banner-slide slide2"></div></a><a href=""><div class="banner-slide slide3"></div></a></div><!-- 上下一张 --><a href="javascript:void(0)" class="button prev" id="prev"></a><a href="javascript:void(0)" class="button next" id="next"></a><!-- 圆点导航 --><div class="dots" id="dots"><span class="active"></span><span></span><span></span></div></div><script src="js/script.js"></script>
</body>
</html>

CSS

*{margin:0;padding:0;
}@font-face {font-family: 'iconfont';src: url('../img/font/iconfont.eot'); src: url('../img/font/iconfont.eot') format('embedded-opentype'),url('../img/font/iconfont.woff') format('woff'),url('../img/font/iconfont.ttf') format('truetype'),url('../img/font/iconfont.svg#iconfont') format('svg');
}a{text-decoration: none;
}a:link,a:visited{color:#5e5e5e;
}body{font-family:"微软雅黑";color: #14191e;
}.main{width:1200px;height:460px;margin:30px auto;position:relative;overflow:hidden;  /*超出部分隐藏*/
}.banner{width:1200px;height:460px;overflow:hidden;position:relative;
}.banner-slide{width:1200px;height:460px;background-repeat:no-repeat;float:left;display:none;
}.slide-active{display:block;
}.slide1{background-image:url(../img/bg1.jpg);
}.slide2{background-image:url(../img/bg2.jpg);
}.slide3{background-image:url(../img/bg3.jpg);
}.button{position: absolute;transform:rotate(180deg);top: 50%;left: 244px;height: 80px;width: 40px;margin-top:-40px;background:url(../img/arrow.png) center center no-repeat;
}.next{transform:rotate(0deg);left:auto;/*让上面的left别起作用，因为同时有left和right会选left*/right:0;
}.button:hover{/*background:#333;这样不行，背景颜色会覆盖上面的背景图片，要写下面的背景颜色*/background-color:#333;opacity: 0.8;filter:alpha(opacity=80);/*为了兼容浏览器*/
}.dots {position: absolute;bottom: 24px;right: 0;text-align: right;padding-right: 24px;line-height: 12px;
}.dots span {display: inline-block;width: 12px;height: 12px;border-radius: 50%;margin-left: 8px;background-color: rgba(7, 17, 27, 0.4);cursor: pointer;box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8) inset;
}.dots span.active{box-shadow: 0 0 0 2px rgba(7, 17, 27, 0.4) inset;background-color: #fff;
}/* menu-box */
.menu-box {background:rgba(7, 17, 27, 0.5);opacity: 0.5;position: absolute;left: 0px;top: 0px;width: 244px;height: 460px;z-index: 1;/*把优先级提高*/
}.menu-content{position: absolute;left: 0px;top: 0px;width: 244px;height: 460px;z-index: 2;padding-top: 6px;
}.menu-item{height: 64px;line-height: 66px;font-size: 12px;cursor: pointer;padding: 0 24px;position: relative;
}.menu-item a{display: block;color: #fff;padding: 0 8px;border-bottom: 1px solid rgba(255, 255, 255, 0.2);height: 63px;font-size:16px;
}.menu-item:last-child a{border-bottom:none;
}.menu-item i{position: absolute;right: 32px;top: 24px;color: rgba(255,255,255,0.5);font-size: 24px;top: 2px;font-style:normal;font-weight:normal;font-family:"iconfont";
}.sub-menu {border:1px solid #d9dde1;background:#fff;position: absolute;left: 244px;top: 0px;width: 730px;height: 458px;z-index: 581;box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.1);
}.hide{display:none;
}.inner-box{width:100%;height:100%;background:url(../img/fe.png) no-repeat;display:none;
}.sub-inner-box{width: 652px;margin-left: 40px;overflow: hidden;
}.title{color: #f01414;font-size: 16px;line-height: 16px;margin-top: 28px;font-weight: bold;margin-bottom: 30px;
}.sub-row{margin-bottom:25px;
}.bold{font-weight:700;
}.mr10{margin-right:10px;
}.ml10{margin-left:10px;
}

var timer = null,index = 0,pics = byId("banner").getElementsByTagName("div"),dots = byId("dots").getElementsByTagName("span"),size = pics.length,prev = byId("prev"),next = byId("next"),menuItems = byId("menu-content").getElementsByTagName("div"),subMenu = byId("sub-menu"),subItems = subMenu.getElementsByClassName("inner-box");function byId(id){  //id是个字符串类型，先判断，封装获取元素return typeof(id)==="string"?document.getElementById(id):id;
}// 清除定时器,停止自动播放
function stopAutoPlay(){if(timer){clearInterval(timer);//清除定时器}
}// 图片自动轮播
function startAutoPlay(){timer = setInterval(function(){index++;if(index >= size){index = 0;}changeImg();},3000)
}function changeImg(){for(var i=0,len=dots.length;i<len;i++){dots[i].className = "";pics[i].style.display = "none";//遍历所有的pics隐藏}dots[index].className = "active";pics[index].style.display = "block";
}function slideImg(){var main = byId("main");var banner = byId("banner");var menuContent = byId("menu-content");main.onmouseover = function(){stopAutoPlay();//滑入停止轮播}main.onmouseout = function(){startAutoPlay();}main.onmouseout();//自动在main上触发滑过// 点击小点导航切换for(var i=0,len=dots.length;i<len;i++){dots[i].id = i;dots[i].onclick = function(){index = this.id;changeImg();//点击则调用切换图片}}// 下一张next.onclick = function(){index++;if(index>=size) index=0;changeImg();}// 上一张prev.onclick = function(){index--;if(index<0) index=size-1;changeImg();}// 菜单for(var m=0,mlen=menuItems.length;m<mlen;m++){menuItems[m].setAttribute("data-index",m);menuItems[m].onmouseover = function(){subMenu.className = "sub-menu";var idx = this.getAttribute("data-index");for(var j=0,jlen=subItems.length;j<jlen;j++){subItems[j].style.display = 'none';menuItems[j].style.background = "none";}subItems[idx].style.display = "block";menuItems[idx].style.background = "rgba(0,0,0,0.1)";}}subMenu.onmouseover = function(){this.className = "sub-menu";}subMenu.onmouseout = function(){this.className = "sub-menu hide";}banner.onmouseout = function(){subMenu.className = "sub-menu hide";}menuContent.onmouseout = function(){subMenu.className = "sub-menu hide";}
}slideImg();

总结：
功能虽然不多，但实现起来还是需要2h左右的，总之先要有思路，总体布局，然后一步一步来，然后不断调整代码。反正函数就这么多，只能说要多多学习，熟能生巧吧！
每日一词：splendid/ magnificent/ impressive/ marvelous 替换grand！

JS完结：用JavaScript写个功能完善的电商轮播图相关推荐

用html css JavaScript写一个功能全面的王者荣耀轮播图（仿淘宝京东轮播图）通俗易懂
首先分析一下案例需求: 1.鼠标经过就显示隐藏左右按钮 2.动态生成小圆圈有几张图片,就生成几个小圆圈 3.点击小圆圈,移动图片当然移动的是 ul(大盒子) 4.点击左右按钮, 图片滚动 ...
Axure高级功能(变量、动态面板[轮播图]、中继器)
文章目录一.变量的使用 1.局部变量 2.全局变量二.动态面板 1.设置动态面板 2.轮播图案例 3.手机页面显示超出屏幕区域内容的处理方式一使用内联框架方式二使用动态面板三.中继器 ...
JavaScript实现网页轮播图
轮播图也成为焦点图,是网页中比较常见的网页特效一.功能: 1.鼠标经过轮播图模块,左右两边的按钮显示,鼠标离开轮播图模块,就隐藏左右按钮. 2.点击右(左)侧按钮一次,图片往左(右)播放一张,一以此 ...
原生js实现轮播图实例教程
原生js实现轮播图实例教程本实例效果如下图所示: 根据实例效果,需要的元素有图片.中间圆点按钮.左右箭头按钮等.实际html代码如下所示: <div class="banner_co ...
用js实现点击切换+自动切换的轮播图
用js实现点击切换+自动切换的轮播图之前博主写过一篇用css实现轮播图的文章,可以看到用css实现的轮播图也能实现我们所需要的功能.那么这些功能用js该如何实现呢?我们一起来看下吧! (ps:博主在 ...
【JavaScript】缓动动画、网页轮播图
缓动动画动画函数封装 1.1 动画实现原理缓动动画 1.1 缓动效果原理 1.2 动画函数多个目标值之间移动 1.3 动画函数添加回调函数 1.4 动画函数封装到单独JS文件里面案例:京东侧边栏 ...
js原生选项卡（自动播放无缝滚动轮播图）二
今天分享一下自动播放轮播图,自动播放轮播图是在昨天分享的轮播图的基础上添加了定时器,用定时器控制图片的自动切换,函数中首先封装一个方向的自动播放工能的小函数,这个函数中添加定时器,定时器中可以放向右走 ...
【学会轮播图这一篇文章就足够啦】JS 网页轮播图详解自动播放+手动播放
轮播图已经成了页面开发中不可缺少的一部分,日常生活中随处都能见到轮播图的身影,例如平常我们购物的淘宝,京东等等,都靠着轮播图在一片有限的区域内展现出更多的商品.这也是前端程序员最早接触到的练手小项目 ...
原生JS无缝轮播图（左右切换、导航跟随）
原生JS无缝轮播图(左右切换.导航图标) 功能: 1.实现轮播图的左右无缝切换 2.实现导航图标的跟随显示.点击切换 3.使用定时器进行无缝轮播 css部分 <style>/* 轮播图容器 ...

JS完结：用JavaScript写个功能完善的电商轮播图

JS完结：用JavaScript写个功能完善的电商轮播图相关推荐

最新文章

热门文章