利用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常用组件收集

JS常用组件收集

收集了一些平时遇到的前端比较优秀的组件，方便以后开发的时候查找！！！ 函数工具： Lodash 页面固定： stickUp、jQuery.Pin 轮播： unslider、swiper 开关: switch 复选框： icheck 气泡： grumble 隐藏元素： Headroom
阅读更多...
在JS中的设计模式的单例模式、策略模式、代理模式、原型模式浅讲

在JS中的设计模式的单例模式、策略模式、代理模式、原型模式浅讲

1. 单例模式（Singleton Pattern） 确保一个类只有一个实例，并提供一个全局访问点。 示例代码： class Singleton {constructor() {if (Singleton.instance) {return Singleton.instance;}Singleton.instance = this;this.data = [];}addData(value)
阅读更多...
Node.js学习记录（二）

Node.js学习记录（二）

目录 一、express 1、初识express 2、安装express 3、创建并启动web服务器 4、监听 GET&POST 请求、响应内容给客户端 5、获取URL中携带的查询参数 6、获取URL中动态参数 7、静态资源托管 二、工具nodemon 三、express路由 1、express中路由 2、路由的匹配 3、路由模块化 4、路由模块添加前缀 四、中间件
阅读更多...
EasyPlayer.js网页H5 Web js播放器能力合集

EasyPlayer.js网页H5 Web js播放器能力合集

最近遇到一个需求，要求做一款播放器，发现能力上跟EasyPlayer.js基本一致，满足要求： 需求 功性能 分类 需求描述 功能 预览 分屏模式 单分屏（单屏/全屏） 多分屏（2*2） 多分屏（3*3） 多分屏（4*4） 播放控制 播放（单个或全部） 暂停（暂停时展示最后一帧画面） 停止（单个或全部） 声音控制（开关/音量调节） 主辅码流切换 辅助功能 屏
阅读更多...
如何编写Linux PCIe设备驱动器 之二

如何编写Linux PCIe设备驱动器 之二

如何编写Linux PCIe设备驱动器 之二 功能(capability)集功能(capability)APIs通过pci_bus_read_config完成功能存取功能APIs参数pos常量值PCI功能结构 PCI功能IDMSI功能电源功率管理功能 功能(capability)集 功能(capability)APIs int pcie_capability_read_wo
阅读更多...
使用JS/Jquery获得父窗口的几个方法(笔记)

使用JS/Jquery获得父窗口的几个方法(笔记)

<pre name="code" class="javascript">取父窗口的元素方法：$(selector, window.parent.document);那么你取父窗口的父窗口的元素就可以用：$(selector, window.parent.parent.document);如题： $(selector, window.top.document);//获得顶级窗口里面的元素 $(
阅读更多...
js异步提交form表单的解决方案

js异步提交form表单的解决方案

1.定义异步提交表单的方法 （通用方法） /*** 异步提交form表单* @param options {form:form表单元素,success:执行成功后处理函数}* <span style="color:#ff0000;"><strong>@注意 后台接收参数要解码否则中文会导致乱码 如：URLDecoder.decode(param,"UTF-8")</strong></span>
阅读更多...
js react 笔记 2

js react 笔记 2

起因， 目的: 记录一些 js, react, css 1. 生成一个随机的 uuid // 需要先安装 crypto 模块const { randomUUID } = require('crypto');const uuid = randomUUID();console.log(uuid); // 输出类似 '9b1deb4d-3b7d-4bad-9bdd-2b0d7b3dcb6d'
阅读更多...
学习记录：js算法（二十八）：删除排序链表中的重复元素、删除排序链表中的重复元素II

学习记录：js算法（二十八）：删除排序链表中的重复元素、删除排序链表中的重复元素II

文章目录 删除排序链表中的重复元素我的思路解法一：循环解法二：递归 网上思路 删除排序链表中的重复元素 II我的思路网上思路 总结 删除排序链表中的重复元素 给定一个已排序的链表的头 head ， 删除所有重复的元素，使每个元素只出现一次 。返回 已排序的链表 。 图一 图二 示例 1：（图一）输入：head = [1,1,2]输出：[1,2]示例 2：（图
阅读更多...
uuid.js 使用

uuid.js 使用

相关代码 import { NIL } from "uuid";/** 验证UUID* 为空 则返回 false* @param uuid* @returns {boolean}*/export function MyUUIDValidate(uuid: any): boolean {if (typeof uuid === "string" && uuid !== NIL) { //uuid
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2