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

最新推荐文章于 2023-01-03 10:58:06 发布

一只编程的嵩鼠

最新推荐文章于 2023-01-03 10:58:06 发布

阅读量4.2k

点赞数

分类专栏：前端小白入门文章标签： css javascript html5 css3 html

本文链接：https://blog.csdn.net/qq_44682019/article/details/108899918

版权

前端小白入门专栏收录该内容

30 篇文章 0 订阅

订阅专栏

轮播图：自动轮播+点击对应点切换+下一张+菜单导航
先讲思路，再上代码：
在这里插入图片描述

先拿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！
在这里插入图片描述

一只编程的嵩鼠

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
JS完结：用JavaScript写个功能完善的电商轮播图

轮播图：自动轮播+点击对应点切换+下一张+菜单导航先讲思路，再上代码：html+css+JavaScript代码分别如下<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="css/style.css"></head>&l
复制链接

扫一扫