利用Js编写轮播图以及排版

2024-05-12 22:32
文章标签 编写 js 排版 轮播

本文主要是介绍利用Js编写轮播图以及排版，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

首先看最后的实现效果：
在这里插入图片描述

  1. 实现每隔三秒中换一张图片
  2. 鼠标划过主菜单显示子菜单内容
  3. 实现点击箭头或者原点都可以更换轮播图

布局样式代码：（可忽略，关键在于js的编写）

/*清除全部默认样式*/
*{padding: 0px;margin: 0px;text-decoration: none;
}
ul{list-style: none;
}
body{font-family: "微软雅黑";color:#14191e;
}
a:link,a:visited{color:#5e5e5e;
}
/*定义初始化字体样式，区分'' 和 "" */
@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');
}	
/*主界面*/
.main{width: 1200px;height: 460px;margin: 30px auto;overflow: hidden;position: relative;
}
.box-banner{width: 1200px;height: 460px;overflow: hidden;
}
.img-style{height: 460px;width: 1200px;background-repeat:no-repeat;/*一开始不给其显示*/display: none;
}
.img1{background-image: url(../img/bg1.jpg);
}
.img2{background-image: url(../img/bg2.jpg);
}
.img3{background-image: url(../img/bg3.jpg);
}
/*用来显示图片，表示是否显示出来*/
.banner-active{display: block;
}
/*用来制作下一张图上一张图按钮*/
.button{position: absolute;height: 80px;width: 40px;background: url("../img/arrow.png") no-repeat center;/*图片不平铺且居中*/top: 50%;margin-top: -40px;left: 244px;
}
.button:hover{background-color: #333;opacity: 0.8;/*设置透明度*/filter:alpha (opacity=80);/*为了兼容别的浏览器而设置*/
}
.prev
{/*进行图片的水平翻转*/transform: rotate(180deg);
}
.next{right: 0;left: auto;
}
.dots{position: absolute;right: 0px;bottom: 24px;text-align: right;margin-right: 40px;
}
.dots span{display: inline-block;/*设置成一条直线排列*/width: 12px;height: 12px;border-radius: 50%;margin-left: 8px;line-height: 12px;/*设置基本样式*/background: rgba(7,17,27,0.4);/*最后是设置半透明度*//*border:1px solid #fff;*//*用阴影做描边*/box-shadow: 0 0 0 2px rgba(255,255,255,0.8) inset;/*添加光标状态*/cursor: pointer;
}
/*设置选中效果*/
.dots span.dots-active {box-shadow: 0 0 0 2px rgba(7,17,27,0.4) inset;background:#fff;
}/*设计导航栏*/
.menu-box{position: absolute;width: 244px;height: 466px;/*right: 0;*/left: 0;top:0;background: rgba(7,17,27,0.5);opacity: 0.5;z-index: 1;
}
/*在上次覆盖一层用来放内容*/
.box-content{position: absolute;width: 244px;height: 454px;padding-top: 6px;left: 0px;top: 0;z-index: 2;
}
.menu-item{height: 64px;line-height: 64px;font-size: 16px;padding: 0 24px;position: relative;cursor: pointer;
}
.menu-item:hover{background: rgba(0,0,0,0.2);
}
.menu-item a:link,.menu-item a:visited{color: #fff;
}
.menu-item a{display: block;border-bottom: 1px solid rgba(255,255,255,0.2);padding: 0 8px;height: 63px;
}
.menu-item a i{position: absolute;font-family: "iconfont";font-size: 24px;right: 32px;top: 0px;font-style: normal;font-weight: normal;color:rgba(255,255,255,0.8);
}
.sub-menu{position: absolute;width: 720px;height: 460px;z-index: 999;left: 240px;border:1px solid #d9dde1;background: #fff;top: 0;box-shadow: 0 4px 8px 0 rgba(0,0,0,0.5)
}
.inner-box{width: 100%;height: 100%;background: url("../img/fe.png") no-repeat;display: none;
}
.sub-inner-box{width: 652px;overflow: hidden;/*超出隐藏*/margin-left: 40px;
}
.sub-row{margin-bottom:25px;
}
.title{font-size: 16px;margin:20px 0 40px 0;color: #f01414;font-weight: bold;
}
.bold{font-weight: bold;
}
.mr10{margin-right: 10px;
}
.ml10{margin-left: 10px;
}
.hidden{display: none
}

html页面布局：

<!DOCTYPE html>
<html>
<head><title>轮播图测试</title><link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>
<body><div class="main" id="main"><div class="menu-box"></div><!-- 编写子菜单 --><div class="sub-menu hidden" 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="mr10 ml10">/</span><a href="#">手机维修</a><span class="mr10 ml10">/</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></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="box-content" id="box-content"><div class="menu-item"><a href=""><span>手机配件</span><i>&#xe665;</i></a></div><div class="menu-item"><a href=""><span>电脑配件</span><i>&#xe665;</i></a></div><div class="menu-item"><a href=""><span>家电中心</span><i>&#xe665;</i></a></div><div class="menu-item"><a href=""><span>日常用品</span><i>&#xe665;</i></a></div></div><div class="box-banner" id="banner"><a href=""><div class="img-style img1 banner-active"></div></a><a href=""><div class="img-style img2"/></div></a><a href=""><div class="img-style img3"/></div></a></div><!-- 定义一个用来显示上图和下图 --><a href="javascript:;" class="button prev" id="prev"></a><a href="javascript:;" class="button next" id="next"></a><!-- 设计小圆点 --><div class="dots" id="dots"><span class="dots-active"></span><span></span><span></span></div></div><script type="text/javascript" src="js/solide.js"></script>
</body>
</html>

关于js的编写:

//封装一个方式来代替   getElementById 用来简化编写
function byId(id){//判断类型是否为string，id名称一定要是string  如果正确则返回return typeof(id) === "string"?document.getElementById(id):id;
}//进行图片轮播图的编辑 设置全局函数用来定位轮播第几个图片等
var timer = null,index = 0, //设置索引用来定位第几个div//获取总共有几个div,避免索引过剩pics = byId("banner").getElementsByTagName("div"),//获取下面的标签len = pics.length,dots = byId("dots").getElementsByTagName("span");prev = byId("prev");next = byId("next");// 取出主菜单，下面的按钮menu = byId("box-content");menu_item = menu.getElementsByClassName("menu-item");//获取子菜单内容，取消隐藏 显示出子菜单里面的内容subMenu = byId("sub-menu");innerMenu = subMenu.getElementsByClassName("inner-box");function siderImg(){var main = byId("main");//设置鼠标滑过状态，停止定时器，停止轮播main.onmouseover = function(){//清除定时器if(timer) clearInterval(timer);}//鼠标滑出状态，启动定时器，进行轮播main.onmouseout = function(){timer = setInterval(function(){index ++;if(index >= len){index = 0;//重新回 0 ；}setImgView();//设置图片显示或者隐藏},3000)};//调用方法，鼠标不用触发直接执行方法main.onmouseout();//遍历所有的点击圆点，绑定点击事件，点击切换图片for(var d = 0; d < len;d++){//要在每一次遍历的时候都给其赋值一个iddots[d].id = d;dots[d].onclick = function(){//只要对索引进行赋值，就可以实现切换图片//console.log(this.id);index = this.id;setImgView();}}//导航菜单栏编写，鼠标划过事件for(var m = 0; m < menu_item.length; m++){//给每个data-index 自定义属性增加标签；menu_item[m].setAttribute("data-index",m);menu_item[m].onmouseover = function(){// alert("yes");subMenu.className ="sub-menu";var idx = this.getAttribute("data-index");//取消hidden//鼠标划过才做隐藏for(var j = 0;j < innerMenu.length;j ++){//初始状态不显示innerMenu[j].style.display = "none";}innerMenu[idx].style.display = "block";}//鼠标离开主菜单隐藏所有menu.onmouseout = function(){subMenu.className ="sub-menu hidden";}//鼠标放在子菜单上面要显示子菜单subMenu.onmouseover = function(){this.className = "sub-menu";}//离开子菜单隐藏subMenu.onmouseout = function(){this.className = "sub-menu hidden"}}
}
siderImg();//调用方法function setImgView(){//设置图片轮播for(var i = 0; i<len;i++){//进行图片的隐藏pics[i].style.display ="none";dots[i].className = "";}//根据index的索引来显示图片pics[index].style.display = "block";dots[index].className = "dots-active";}//下一页
next.onclick = function(){index ++;if(index >= len) index = 0;setImgView();//console.log(index);
}//上一页
prev.onclick = function(){index--;if(index < 0) index = len - 1;setImgView();
}

实现出轮播图效果；
关于使用到js控件备注：

		**setInterval:设置定时启动；setTimeout:设置超时启动；typeof:判断一个数据的类型是什么：string，int;cursor:鼠标光标状态；=== 三目运算；onmouseover:鼠标滑过状态；onmouseout：鼠标滑出状态；getElementsByTagName；获取标签clearInterval()  /   clearTimeout()；清除定时器getElementsByClassName:通过类名取到控件setAttribute:给自定义标签增加属性；getAttribute：获取每个自定义属性**

文件快速下载地址：
https://download.csdn.net/download/u010374999/12507304

这篇关于利用Js编写轮播图以及排版的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/983917。

相关文章

JS+HTML实现在线图片水印添加工具

JS+HTML实现在线图片水印添加工具

《JS+HTML实现在线图片水印添加工具》在社交媒体和内容创作日益频繁的今天,如何保护原创内容、展示品牌身份成了一个不得不面对的问题,本文将实现一个完全基于HTML+CSS构建的现代化图片水印在线工具... 目录概述功能亮点使用方法技术解析延伸思考运行效果项目源码下载总结概述在社交媒体和内容创作日益频繁的
阅读更多...
Node.js 数据库 CRUD 项目示例详解(完美解决方案)

Node.js 数据库 CRUD 项目示例详解(完美解决方案)

《Node.js数据库CRUD项目示例详解(完美解决方案)》：本文主要介绍Node.js数据库CRUD项目示例详解(完美解决方案),本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考... 目录项目结构1. 初始化项目2. 配置数据库连接 (config/db.js)3. 创建模型 (models/
阅读更多...
使用Node.js制作图片上传服务的详细教程

使用Node.js制作图片上传服务的详细教程

《使用Node.js制作图片上传服务的详细教程》在现代Web应用开发中,图片上传是一项常见且重要的功能,借助Node.js强大的生态系统,我们可以轻松搭建高效的图片上传服务,本文将深入探讨如何使用No... 目录准备工作搭建 Express 服务器配置 multer 进行图片上传处理图片上传请求完整代码示例
阅读更多...
用js控制视频播放进度基本示例代码

用js控制视频播放进度基本示例代码

《用js控制视频播放进度基本示例代码》写前端的时候,很多的时候是需要支持要网页视频播放的功能,下面这篇文章主要给大家介绍了关于用js控制视频播放进度的相关资料,文中通过代码介绍的非常详细,需要的朋友可... 目录前言html部分:JavaScript部分:注意：总结前言在javascript中控制视频播放
阅读更多...
基于.NET编写工具类解决JSON乱码问题

基于.NET编写工具类解决JSON乱码问题

《基于.NET编写工具类解决JSON乱码问题》在开发过程中,我们经常会遇到JSON数据处理的问题,尤其是在数据传输和解析过程中,很容易出现编码错误导致的乱码问题,下面我们就来编写一个.NET工具类来解... 目录问题背景核心原理工具类实现使用示例总结在开发过程中，我们经常会遇到jsON数据处理的问题，尤其是
阅读更多...
Node.js net模块的使用示例

Node.js net模块的使用示例

《Node.jsnet模块的使用示例》本文主要介绍了Node.jsnet模块的使用示例,net模块支持TCP通信,处理TCP连接和数据传输,具有一定的参考价值,感兴趣的可以了解一下... 目录简介引入 net 模块核心概念TCP (传输控制协议)Socket服务器TCP 服务器创建基本服务器服务器配置选项服
阅读更多...
mac安装nvm(node.js)多版本管理实践步骤

mac安装nvm(node.js)多版本管理实践步骤

《mac安装nvm(node.js)多版本管理实践步骤》：本文主要介绍mac安装nvm(node.js)多版本管理的相关资料,NVM是一个用于管理多个Node.js版本的命令行工具,它允许开发者在... 目录NVM功能简介MAC安装实践一、下载nvm二、安装nvm三、安装node.js总结NVM功能简介N
阅读更多...
前端原生js实现拖拽排课效果实例

前端原生js实现拖拽排课效果实例

《前端原生js实现拖拽排课效果实例》：本文主要介绍如何实现一个简单的课程表拖拽功能,通过HTML、CSS和JavaScript的配合,我们实现了课程项的拖拽、放置和显示功能,文中通过实例代码介绍的... 目录1. 效果展示2. 效果分析2.1 关键点2.2 实现方法3. 代码实现3.1 html部分3.2
阅读更多...
JS 实现复制到剪贴板的几种方式小结

JS 实现复制到剪贴板的几种方式小结

《JS实现复制到剪贴板的几种方式小结》本文主要介绍了JS实现复制到剪贴板的几种方式小结,包括ClipboardAPI和document.execCommand这两种方法,具有一定的参考价值,感兴趣的... 目录一、Clipboard API相关属性方法二、document.execCommand优点：缺点：
阅读更多...
利用Python编写一个简单的聊天机器人

利用Python编写一个简单的聊天机器人

《利用Python编写一个简单的聊天机器人》这篇文章主要为大家详细介绍了如何利用Python编写一个简单的聊天机器人,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 使用 python 编写一个简单的聊天机器人可以从最基础的逻辑开始，然后逐步加入更复杂的功能。这里我们将先实现一个简单的
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2