简单的上下轮播图

最新推荐文章于 2021-08-25 00:04:14 发布
最新推荐文章于 2021-08-25 00:04:14 发布
阅读量4.3k 收藏 4
点赞数
分类专栏： 随笔 
<html>

	<head>
		<meta name="layout" content="main">
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

	</head>
	<style>
		*{margin: 0; padding: 0;}
		ul{height: 28px;overflow: hidden;}li{height: 28px;}li{list-style: none;}a{text-decoration: none;}
	</style>
	<body>
		<div class="notice_scroll">
			<ul class="show_notice" style="margin-top: 0px;">
				<li>
					<a href="" target="_blank">APP签到积分使用规则调整</a>
				</li>
				<li>
					<a href="" target="_blank">【公告】防诈骗提醒</a>
				</li>
				<li>
					<a href="" target="_blank">【紧急通知】关于短信发送异常的公告</a>
				</li>
				<li>
					<a href="" target="_blank">5周年庆，盛大聚“惠”</a>
				</li>
			</ul>
		</div>
		
	</body>

</html>
<script type="text/javascript">
	$(function(){
		picFunc(".notice_scroll")
	})
	//垂直滚动
	function picFunc(obj) {
		var scrollTimer;
		$(obj).hover(function() {
			clearInterval(scrollTimer);
		}, function() {
			scrollTimer = setInterval(function() {
				scrollNews($(obj));
			}, 3000);
		});

		function scrollNews(obj) {
			var $self = obj.find("ul:first");
			var lineHeight = $self.find("li:first").height();
			$self.animate({
				"margin-top": -lineHeight + "px"
			}, 600, function() {
				$self.css({
					"margin-top": "0px"
				}).find("li:first").appendTo($self);
			})
		}
	}
</script>

Leaves_Yu
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
简单版轮播图
m0_62371650的博客
08-05 117
简单版轮播图
简单的轮播图
KXJ
04-27 163
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0 } ul { list-style: none } img { vertical-align: .
Vue 向上滚动、向下滚动 轮播图
girl_Xiaomin的博客
07-25 4391
前言 原理解说 先说向上的轮播 在盒子里面放置4张图片 复制4张一样的图片放在后面（即乘2） 设置外层盒子的高度为4张图的高度，让超出部分隐藏起来overflow:hidden 给定一个速度，即每次移动的像素 >=1px 设置一个定时器，一直改变内层盒子的offsetTop的位置 即可以实现让图片向上/向下滚动 解释一下中间的一个判断 当向上滚动的时候，offsetTop会一直变小，也就是越来越大的负数 此时内层盒子的top为0，即从第一张图开始向上轮播 第一张图 第二张图 第三张图 （乘2的原因：
jQuery轮播图之上下轮播
十一的博客
06-30 6995
如图实现功能：1.鼠标放上图片图片停止滚动并显示对应数字2.鼠标离开图片继续滚动并显示对应数字3.鼠标放到对应的数字，显示到相对应图片并停止滚动轮播图原理：定义div里面存放ul，但每次只显示一个li,利用定时器setinteval定时和animate动画来移动li的位置。animate返回值:jQueryanimate(params,[speed],[easing],[fn])概述：用于创建自定...
三种不同轮播图 上下切换
林中明月间丶
05-15 4367
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &lt;met
上下轮播图
王延朕的博客
05-14 140
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do.
轮播图--上下滚动--三次互动（尾张猫腻图）
冲鸭
08-25 217
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>D.
jquery实现的上下自动切换图片相册
01-23
5. **事件监听**：为了让用户能够手动控制图片切换，可以添加事件监听器，如点击按钮或触摸滑动，触发相应的切换函数。 6. **响应式设计**：为了保证在不同设备上的良好显示，应考虑响应式设计，使图片相册能适应...
简单的jquery四张图片轮播滚动切换效果代码
11-17
例如，为每个导航点添加一个与图片对应的类，并在图片切换时更新导航点的状态。此外，可以通过检测`mouseenter`和`mouseleave`事件来控制是否暂停或恢复自动播放。 以上就是使用jQuery实现一个简单的四张图片轮播...
简单的Jqury图片轮播效果
10-25
**jQuery图片轮播效果**是一种常见的网页动态展示技术，它通过使用JavaScript库jQuery来实现图片的自动切换，为用户带来视觉上的连续性与吸引力。在网页设计中，这种功能经常被用于产品展示、幻灯片或者首页焦点图等...
js实现轮播图上下
11-21
js实现图片轮播（一侧是展示的大图，一侧是可选的小图）且上下点击单个移动，也可点击图片切换
上下左右 手动 自动轮播图
03-29
上下左右 手动 自动轮播图，适合在项目中使用
用jQuery做的一个简单的图片上下轮播特效
07-10
用jQuery做的一个简单的图片上下轮播特效，以后会不断更新，“写得更少，做得更多”，请关注新维度工作室动态；您的一分支持，我们的百分动力
vue 上下轮播，右边小图预览组件
07-12
组件封装好了，可以直接在项目中引用，图片大小根据自己的项目以及设计图改一下就可以了。对大家有帮助记得给好评
js轮播图透明度切换（带上下页和底部圆点切换）
10-19
本篇文章主要介绍了js轮播图透明度切换（带上下页和底部圆点切换）的实例。具有很好的参考价值。下面跟着小编一起来看下吧
原生js代码制作首页焦点图片广告上下滚动轮播切换
11-17
至此，我们就完成了用原生JavaScript实现的首页焦点图片广告上下滚动轮播切换。这种方法不仅简单易懂，而且可以根据需求进行灵活的定制和扩展。通过深入了解JavaScript的DOM操作、事件监听以及动画效果，你可以创造...
支持图片左右轮播上下无缝切换的jQuery插件特效
06-11
p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; line-height: 24.0px;... 也支持手动点击切换或者banner轮播图等等效果 使用方法： 1、将CSS代码引入到你的网页中 2、将body中的代码部分拷贝到你的页面中
常用轮播图-上下
05-04 241
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>上下轮播</title> <style> ul,ol,li{margin:0; padding:0;} li{list-style: none;} img{d...
vue上下轮播组件简单实现
热门推荐
我不是水哥
05-29 1万+
在vue社区里面没有找到特别好的上下轮播插件，基本都是图片的左右播放插件，质量也是参差不齐 在实现这个组件之前，先抛出一个问题，如何在vue中实现dom的环形结构?              首先来看轮播组件的思路     红色部分：相当于放映机，也就是容器，overflow：hidden     绿色内容：相当于胶片，也就是dom     当放映机从上往下移动的时候，从视觉上看，就像...
unity3d上下轮播图
最新发布
09-07
在Unity3D中实现上下轮播图的方法有多种。这里我将为您介绍一种常见的实现方式。 首先，您可以创建一个空的游戏对象来作为容器，并将需要轮播的图片作为子对象添加到容器中。接下来，您可以使用Unity的RectTransform组件来控制容器和子对象的位置和大小。 然后，您可以编写脚本来实现图片的循环轮播。脚本可以使用Unity的Image组件来控制图片的显示。您可以通过设置Image组件的sprite属性来切换图片。同时，您可以使用协程来实现图片的淡入淡出效果。 具体的实现步骤如下： 1. 创建一个空的游戏对象，设置其为容器。 2. 在容器中添加需要轮播的图片作为子对象。 3. 添加一个脚本组件到容器上，并编写脚本代码。 4. 在脚本中，使用GetComponent方法获取容器的RectTransform组件，并根据需要设置容器的位置和大小。 5. 使用GetComponentInChildren方法获取容器子对象的Image组件，并保存为变量。 6. 在脚本中，编写协程函数来实现图片的淡入淡出效果。您可以使用CrossFadeAlpha方法来控制图片的透明度。 7. 在脚本中，使用InvokeRepeating方法来循环调用协程函数，实现图片的轮播效果。 下面是一个示例代码，供您参考： ```C# using System.Collections; using System.Collections.Generic; using UnityEngine; using UnityEngine.UI; public class ImageCarousel : MonoBehaviour { public float fadeDuration = 1f; // 图片淡入淡出的持续时间 public float imageStayDuration = 2f; // 图片停留的时间 private List<Image> images; // 存储所有图片 private int currentIndex = 0; // 当前显示的图片索引 private void Start() { // 获取容器的RectTransform组件 RectTransform containerRectTransform = GetComponent<RectTransform>(); // 设置容器的位置和大小 containerRectTransform.anchorMin = new Vector2(0.5f, 0.5f); containerRectTransform.anchorMax = new Vector2(0.5f, 0.5f); containerRectTransform.pivot = new Vector2(0.5f, 0.5f); containerRectTransform.sizeDelta = new Vector2(200f, 200f); // 获取容器子对象的Image组件 images = new List<Image>(GetComponentsInChildren<Image>()); // 设置所有图片的初始透明度为0 foreach (Image image in images) { image.canvasRenderer.SetAlpha(0f); } // 开始循环调用协程函数 StartCoroutine(CarouselImages()); } private IEnumerator CarouselImages() { while (true) { // 淡出当前显示的图片 Image currentImage = images[currentIndex]; currentImage.CrossFadeAlpha(0f, fadeDuration, false); // 等待淡出动画结束 yield return new WaitForSeconds(fadeDuration); // 切换到下一张图片 currentIndex++; if (currentIndex >= images.Count) { currentIndex = 0; } // 淡入下一张图片 Image nextImage = images[currentIndex]; nextImage.CrossFadeAlpha(1f, fadeDuration, false); // 等待淡入动画结束 yield return new WaitForSeconds(fadeDuration + imageStayDuration); } } } ``` 这个示例代码会实现一个简单的上下轮播图效果。您可以根据自己的需求修改代码，并根据需要调整图片的透明度变化和停留的时间。希望对您有帮助！<span class="em">1</span>
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值