【Javascript学习笔记】【DOM案例实战——JQ轮播】

最新推荐文章于 2023-09-17 22:28:46 发布
最新推荐文章于 2023-09-17 22:28:46 发布
阅读量241 收藏 1
点赞数
分类专栏： 前端（js、html、css、less）
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_37136491/article/details/81235377
版权

目录

横向轮播通知栏

原理

设置一个固定大小的溢出隐藏容器，再设置一个子容器，设置其宽度比父容器大，并放置需要轮播的内容，通过定时器定时调用某函数实现自容器位置的变换，实现的轮播效果。

效果

自动轮播，可点击立刻向右下一个。
这里写图片描述

代码

html部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>carousel</title>
    <link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<div class="notificationBox">
    <div class="notTitle">
        <span>通知<br>公告</span>
    </div>
    <!-- 通知通告轮播模块Begin  ui要求轮播3块，此处通知轮播的设计最多可轮播4块（即12条信息，且为3的倍数） -->
    <div class="noteBox">
        <div id="note">
            <div class="notification">
                <a href="#">国际学0院工作人员招聘工作圆满结束结束结束结束结束</a>
            </div>
            <div class="notification">
                <a href="#">国际学院工作人员招聘工作圆满结束结束结束结束结束</a>
            </div>
            <div class="notification">
                <a href="#">国际学院工作人员招聘工作圆满结束结束结束结束结束</a>
            </div>

            <div class="notification">
                <a href="#">国际学1院工作人员招聘工作圆满结束结束结束结束结束</a>
            </div>
            <div class="notification">
                <a href="#">国际学院工作人员招聘工作圆满结束结束结束结束结束</a>
            </div>
            <div class="notification">
                <a href="#">国际学院工作人员招聘工作圆满结束结束结束结束结束</a>
            </div>

            <div class="notification">
                <a href="#">国际学2院工作人员招聘工作圆满结束结束结束结束结束</a>
            </div>
            <div class="notification">
                <a href="#">国际学院工作人员招聘工作圆满结束结束结束结束结束</a>
            </div>
            <div class="notification">
                <a href="#">国际学院工作人员招聘工作圆满结束结束结束结束结束</a>
            </div>
        </div>
    </div>
    <!-- 通知通告轮播模块End -->
    <div class="notRight" id="noteRight">
            <a href="#">
                <img src="right.png" alt="">
            </a>
    </div>
</div>
</body>
    <script src="../jquery.min.js"></script>
    <script src="index.js"></script>
</html>

css部分

.notificationBox{
    position: relative;
    width: 1200px;
最低0.47元/天 解锁文章
欣欣__KuanG97
关注
专栏目录
JavaScript中阶 DOM 案例 轮播图
weixin_65257540的博客
03-08 194
思路 1、首先设置好html和css样式 2、让图片滚动 封函数便于后面调用 利用数组下标获取元素赋值给图片的src属性实现 建立数组 声明一个下标变量 让下标每一次自增，每自增一次就把该下标的元素值重新定义给图片的src路径属性，让他变化 当自增到数组的最后（最后一张图片），让其继续循环。让下标为第一个下标 需要获取下面的小圆点，遍历，让所有的样式为空，让当前的下标的点改变样式，因为原点的下边和图片的下标是一一对应的 3、让图片反向滚动 自减 和滚动同理 封函数便于后...
【JavaScript框架封装】实现一个类似于JQuery的DOM框架的封装
小牛itbull的博客
07-19 355
// DOM框架（选择器框架） (function (xframe) { // 需要参与链式访问的(必须使用prototype的方式来给对象扩充方法) xframe.extend({ /** * 向现有的元素集合中添加元素节点（修改this的内容） * @param dom * @return {add} ...
JQuery应用实例学习 —— 18 利用DOM对象改变HTML内容及属性实例
烟敛寒林的博客
09-14 224
以下内容转自w3school。   改变 HTML 内容 修改 HTML 内容的最简单的方法时使用 innerHTML 属性。 如需改变 HTML 元素的内容，请使用这个语法： document.getElementById(id).innerHTML=new HTML 本例改变了 &lt;p&gt; 元素的内容： &lt;!DOCTYPE html&gt; &lt;html&gt; ...
写一个更好的Javascript DOM库
多多
06-28 6013
目前，jQuery是事实上的操作文档对象模型（DOM）的库。它可以与流行的客户端MV*框架结合使用，并且拥有大量的插件与大型的社区。开发者对于Javascript的兴趣与日俱增的同时，很多人开始好奇，原生的API是如何工作的，以及我们何时应该直接使用它们而不是引用一个额外的库。 最近，我开始发现越来越多的jQuery的问题，至少是在我的使用中是这样的。其中的绝大多数涉及到jQuery的核心，
【JavaScript】DOM (四) 轮播图超详细讲解
北极星的博客
09-11 821
文章目录1.定时事件2.图片定时切换3.元素移动4.延时调用 1.定时事件 javaScript 一个设定的时间间隔之后来执行代码我们称之为计时事件。 setInterval <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>定时器1</title> <script type="text/javascript"&gt
JS学习笔记——jquery
lxy95512的博客
03-04 495
JavaScript库 JavaScript库:即library ,是一个封装好的特定的集合(方法和函数)。从封装一大堆函数的角度理解库 就是在这个库中,封装了很多预先定义好的函数在里面,比如动画animate、hide、 show ,比如获取元素等。 简单理解:就是一一个JS文件,里面对我们原生js代码进行了封装,存放到里面。这样我们可以快速高效的使用这些封装好的功能了。 比如jQuery ,就是为了快速方便的操作DOM ,里面基本都是函数(方法)。 jQuery的概念 jQuery是一一个快速、简
JAVA学习笔记—前端学习笔记（二）—JQ、ES6、Bootstrap
qq_40850871的博客
11-16 1039
四、jQuery基础 1.jQuery介绍 jQuery由美国人John Resig（约翰·莱西格）于2006年创建 jQuery是目前最流行的JavaScript程序库，它是对JavaScript对象和函数的封装 它的设计思想是write less,do more 实现隔行变色效果，JavaScript要循环加判断，而jQuery只需一句关键代码 $("tr:even").css("background-color","#ccc"); 1.1 jQuery能做什么? 访问和操作DOM元素 控制页面样式
JavaScript学习笔记
weixin_42530002的博客
11-04 5895
一、JavaScript 1、字符串 (1)、验证码 (2)、将字符串按照单词进行逆序，空格作为划分单词的唯一条件 (3)、对称数组 (4)、已知一个字符串对象中,英语单词用各种非字母字符分割，统计单词个数 (5)、判断单个字符是否是字母(包含大小写) (6)、实现函数，查找子串出现的次数，返回字符串str中出现substring的次数 (7)、判断是否为邮箱，已知千锋邮箱的用户名只能由数字字母下划线组成，域名为@1000phone.com, (8)、判断单个字符是否符合数字字母下划线 (9)、敏感词过滤
JavaScript——jQuery
Scccc_的博客
03-10 5036
JavaScript学习笔记
JavaScript-DOM实战案例
最新发布
Welisit的博客
09-17 391
有时我们并不想一个函数，而是之后再执行，我们称之为“（scheduling a call）”。目前有两种方式可以实现： 允许我们将函数到一段时间间隔之后再执行。 允许我们一个函数，从一段之后开始运行，之后以该时间间隔连续重复运行该函数。并且通常情况下有提供对应的取消方法：大多数运行环境都有内置的调度程序，并且提供了这些方法：的语法如下：方法： 3.setInterval的使用 方法和 的语法相同：方法： 2.关闭隐藏信息 3.侧边栏展示 4.登录框 5.王者荣耀tabControl 6.王者轮播
用 JavaScript + HTML + CSS 中的 DOM 操作来实现，轮播图的 循环播放 和 顺序播放 等功能
狮子座的男孩
06-13 1134
Ⅰ、问题描述： 1、用JavaScript + html + css 实现，轮播图的循环播放和顺序播放等功能； 2、分析： A、需要用 html + css 实现盒子模型的布局，呈现出轮播图的大致形状； B、调用 JavaScript 中的 DOM 操作，实现加载信息的函数、左箭头事件绑定、右箭头事件绑定； C、最后通过 DOM 操作实现轮播图的顺序播放事件的绑定、循环播放事件的绑定； Ⅱ、实现过程如下： 1、运行软件VScode，亲测可实现； 2、运行代码： <!DOCTYPE html> &
利用jquery写无缝循环滑动的轮播图
热门推荐
webnoob
04-22 4万+
博客迁移&gt;&gt;: https://www.inoob.xyz 1.效果gif图： 2.主要实现思想： a.第一层div，设置overflow为hidden b.里面是一个ul，每个li里面有个img或者为每个li设置背景图片也可以。 c.li设置为左浮动，排成一行，还有ul的宽度设置成li宽度的总和，不然li会换行哦！ d.点击向右按钮，可以让整个ul向左滑动，设置ul的...
jquery实现无缝轮播案例
岁月如歌去，十年弹指间
08-21 785
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
DOM网页轮播图效果
helgeal的博客
08-27 337
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录 前言 一、pandas是什么？ 二、使用步骤 1.引入库 2.读入数据 总结 前言 记录一个dom的实现--网页轮播图效果 提示：以下是本篇文章正文内容，下面案例可供参考 一、效果图图所示 二、使用步骤 1.引入库 代码如下（示例）： import numpy as np import pandas as pd import matplotlib.pyplot as plt im
前端-js网页特效（终章）超详细的轮播图效果及原理 一篇彻底吃透！
weixin_57269725的博客
10-21 3953
目录 前言 一、结构搭建 细节部分： 代码实现： 效果图： 二、功能模块分析 1、盒子模块 原理： 代码实现： 效果： 2、焦点模块（重点） 原理： 细节部分： 代码实现： 效果： 3、右侧按钮模块（重点） 原理： 细节部分： 代码实现： 效果： 4、左侧按钮 原理： 细节部分： 代码实现： 效果： 5、自动播放模块 原理： 代码实现： 效果： 6、节流阀模块 原理： 细节部分： 代码实现： 7、一些会碰到的疑问 1、为什么焦...
jQuery实用案例之轮播图（超级好用）
小龙爷的博客
08-30 764
今天给大家带来的是各大网站超级常用的轮播图案例 html+css部分： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>轮播图</title> <style type="text/css"> ...
3个案例演示jquery操作dom(选择/控制/运动能力)
执念斩长河
05-29 476
本博文源于jquery基础，通过三个案例演示jquery的三大能力：选择元素的能力、批量控制元素的能力和实现运动能力
使用Ant Design Pro，一个企业级开箱即用的中后台前端
m0_37136491的博客
08-30 1万+
目录 * 此文仅是个人自学理解的学习笔记，若有不对之处敬请指导更正，谢谢！ * 目录 Ant Design Pro 了解 安装使用 方法一：clone 方法二： ant-design-pro-cli 运用 新手常遇到的问题 实战代码Download 快捷链接 Ant Design Pro 了解 Ant Design Pro 是一个企业级开箱即用的中后台前...
尚硅谷：封捷 JavaScript 学习笔记详解与实战
"《尚硅谷》封捷编著的《JavaScript学习笔记》是一本针对JavaScript初学者和进阶者的重要参考资料。该书首先介绍了JavaScript的基本概念，强调了它作为一种客户端脚本语言的重要性，特点是动态、弱类型和基于原型，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值