jquery手写广告轮播图,无限循环功能


说明

在很多情况下,我们都需要开发广告轮播图,当我们进行页面的功能开发时,采用轮播图来实现也行,但是很多情况下,我们只需要简单的控制轮播循环轮播展示即可,所以用jq开开发广告轮播波,自定义方式比较灵活,而且还简单,只需要几行代码就可以实现广告轮播。

一、效果图

实现功能:循环滚动,向上下(左右滚动都可以)滚动,鼠标悬浮时取消滚动。

二、开发代码

用例:下面开发代码,广告向上滚动,左右滚动方法同理。

<style>.nav_box .search{display: none !important;}.div_box{margin-top: 50px;min-height: 600px;width: 100%;}.ad{width: 200px;height: 30px;margin: 0 auto;overflow: hidden;}ul,li,h3{line-height: 30px;cursor: pointer;}
</style><div class="div_box"><div class="ad"><h3 class="fl">[公告]</h3><ul class="fl w_ul"><li><span>这个是新闻广告1</span></li><li><span>这个是新闻广告2</span></li><li><span>这个是新闻广告3</span></li><li><span>这个是新闻广告4</span></li></ul></div>
</div><script type="text/javascript">var timer_ad = setInterval(roll_ad,1500);$('.w_ul').hover(function(){//悬浮清除定时器clearInterval(timer_ad)},function(){//取消悬浮定时器开启timer_ad = setInterval(roll_ad,1500);})function roll_ad(){$('.w_ul').animate({//滚动效果marginTop:'-30px',},500,function(){//滚动时长//滚动结束后执行方法$(this).css({marginTop:'0px'}).find('li:first').appendTo($(this));//将位置初始化,然后将第一个数据放到最后面})}	</script>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/211880.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Idea 插件开发: Swing Designer设计器创建的组件全部为空问题记录

问题现象 通过Swing 设计器创建的对象, Swing组件全部是空的, 导致ToolWindowFactory工厂的实现类调用时候出现了空指针异常 如下方式创建的 问题分析 问题出现时候, 同时给我生成了一个createUIComponents的私有方法, 由于个人当时理解有误, 把他当成了初始化方法, 在里面…

Oracle高可用一家老小全在这里

&#x1f4e2;&#x1f4e2;&#x1f4e2;&#x1f4e3;&#x1f4e3;&#x1f4e3; 哈喽&#xff01;大家好&#xff0c;我是【IT邦德】&#xff0c;江湖人称jeames007&#xff0c;10余年DBA及大数据工作经验 一位上进心十足的【大数据领域博主】&#xff01;&#x1f61c;&am…

用Java实现一对一聊天

目录 服务端 客户端 服务端 package 一对一用户; import java.awt.BorderLayout; import java.io.BufferedReader; import java.io.IOException; import java.io.InputStreamReader; import java.io.PrintWriter; import java.net.ServerSocket; import java.net.Socket; imp…

SpringBoot中MyBatis-Flex的集成和使用

一、MyBatis-Flex 是什么​ MyBatis-Flex是一个基于MyBatis的数据访问框架&#xff0c;专门为Flex应用程序而设计的。它提供了一种灵活而高效的方式来处理Flex应用程序中的数据访问&#xff0c;可以轻松地连接到各种数据源&#xff0c;并提供了一些方便的工具和功能&#xff0c…

delphi android打开外部文件,报错android.os.FileUriExposedException解决方法

Android 7.0强制启用了被称作 StrictMode的策略&#xff0c;带来的影响就是你的App对外无法暴露file://类型的URI了。 如果你使用Intent携带这样的URI去打开外部App(比如&#xff1a;打开系统相机拍照)&#xff0c;那么会抛出FileUriExposedException异常。 Delphi 为Android…

windows系统安装RocketMQ_dashboard

1.下载源码 按照官网说明下载源码 官网 官网文档 2.源码安装 2.1.① 编译rocketmq-dashboard 注释掉报错的maven插件frontend-maven-plugin、maven-antrun-plugin mvn clean package -Dmaven.test.skiptrue2.2.② 运行rocketmq-dashboard java -jar target/rocketmq-…

tamcat乱码

学习springmvc时tamcat乱码 ①、启动时tomcat控制台乱码 解决方法是&#xff1a;1、先把idea设置里的默认字节码改成utf-8 ​ 2、把idea显示编码改成utf-8&#xff0c;在末尾加上&#xff08; -Dfile.encodingUTF-8&#xff09; ​ 3、最后重启idea 加上这个 -Dfile.encodingU…

【软考中级——软件设计师】备战经验 笔记总结分享

考试成绩 我第一次备考是在2022 然后那时候取消了这次是第二次 靠前我一个月复习的看了以前的笔记 然后刷了七八道历年题目学习资料推荐 &#xff1a;zst——2021 b站链接自荐一下我的笔记 &#xff1a; 软考笔记专栏 视频确实很长 &#xff0c; 我的建议就是先看笔记 然后不会…

1-2、Java环境搭建

语雀原文链接 文章目录 1、JDK安装2、Hello World2-1、Hello World示例2-2、类名和文件名2-3、注释2-4、javadoc 3、环境变量3-1、Path作用3-2、classpath3-3、JAVA_HOME 4、Java组成5、跨平台原理5-1、Java跨平台原理5-2、C语言的跨平台原理 1、JDK安装 下载地址&#xff1a…

打造Github首页的动态飞线效果

一、导语 Github首页的地球动态飞线&#xff0c;大家都比较熟悉吧 二、分析 由大量随机的3点构造出贝塞尔曲线&#xff0c;然后开始从起点到终点的飞行后&#xff0c;然后再从起点到终点的消失&#xff0c;就此完成整个过程 三、基础代码 createCurve(startPoint, endPoint…

unity 2d 入门 飞翔小鸟 死亡闪烁特效(十三)

一、c#脚本 using System.Collections; using System.Collections.Generic; using UnityEngine;public class Bling : MonoBehaviour {public Texture img;public float speed;public static bool changeWhite false;private float alpha0f;// Start is called before the fi…

芯片量产导入知识

什么是芯片量产 从芯片功能设计到生产制造、测试等环节&#xff0c;每一个环节都至关重要。 对于保障大规模发货后芯片指标表现的一致性&#xff0c;以及产品应用生命周期内的稳定性和可靠性&#xff0c;需要考虑多种因素。以下是一些相关的观点&#xff1a; 可量产性设计&am…

Stable Diffusion 系列教程 - 2 WebUI 参数详解

Stable Diffusion 的整个算法组合为&#xff1a; UNet VAE 文本编码器 UNet&#xff1a;就是我们大模型里的核心。 文本编码器&#xff1a;将我们的prompt进行encoder为算法能理解的内容&#xff08;可以理解为SD外包出去的项目CLIP&#xff09;。 VAE&#xff1a;对UNet生…

【牛牛送书 | 第三期】《一本书讲透Java线程:原理与实践》带你深入JAVA多线程

目录 摘要&#xff1a; 多线程对于Java的意义 为什么Java工程师必须掌握多线程 Java多线程使用方式 如何学好Java多线程 参与方式&#x1f947; 摘要&#xff1a; 互联网的每一个角落&#xff0c;无论是大型电商平台的秒杀活动&#xff0c;社交平台的实时消息推送&#x…

Qt槽函数不响应不执行的一种原因:ui提升导致重名

背景&#xff1a; 一个包含了组件提升的ui&#xff0c;有个按钮的槽函数就是不响应&#xff0c;于是找原因。 分析&#xff1a; 槽函数的对应一是通过connect函数绑定信号&#xff0c;二是on_XXX_signal的命名方式。界面上部件的槽函数通常是第二种。 我反复确认细节&#…

张正友相机标定法原理与实现

张正友相机标定法是张正友教授1998年提出的单平面棋盘格的相机标定方法。传统标定法的标定板是需要三维的,需要非常精确,这很难制作,而张正友教授提出的方法介于传统标定法和自标定法之间,但克服了传统标定法需要的高精度标定物的缺点,而仅需使用一个打印出来的棋盘格就可…

kafka学习笔记--如何保证生产者数据可靠、不重复、有序

本文内容来自尚硅谷B站公开教学视频&#xff0c;仅做个人总结、学习、复习使用&#xff0c;任何对此文章的引用&#xff0c;应当说明源出处为尚硅谷&#xff0c;不得用于商业用途。 如有侵权、联系速删 视频教程链接&#xff1a;【尚硅谷】Kafka3.x教程&#xff08;从入门到调优…

掌握PyTorch数据预处理(一):让模型表现更上一层楼!!!

引言 在PyTorch中&#xff0c;数据预处理是模型训练过程中不可或缺的一环。通过精心优化数据&#xff0c;我们能够确保模型在训练时能够更高效地学习&#xff0c;从而在实际应用中达到更好的性能。今天&#xff0c;我们将深入探讨一些常用的PyTorch数据预处理技巧&#xff0c;…

Linux系统编程:进程间通信总结

管道 在Linux中&#xff0c;管道是一种进程间通信方式&#xff0c;它允许一个进程&#xff08;写入端&#xff09;将其输出直接连接到另一个进程&#xff08;读取端&#xff09;的输入。从本质上说&#xff0c;管道也是一种文件&#xff0c;但它又和一般的文件有所不同。 具体…

Docker部署开源分布式任务调度平台DolphinScheduler并实现远程访问办公

文章目录 前言1. 安装部署DolphinScheduler1.1 启动服务 2. 登录DolphinScheduler界面3. 安装内网穿透工具4. 配置Dolphin Scheduler公网地址5. 固定DolphinScheduler公网地址 前言 本篇教程和大家分享一下DolphinScheduler的安装部署及如何实现公网远程访问&#xff0c;结合内…