使用JavaScript实现简单的滑动窗口

最新推荐文章于 2024-07-19 19:28:56 发布
最新推荐文章于 2024-07-19 19:28:56 发布
阅读量1.3k 收藏 6
点赞数 2
分类专栏： 前端学习 文章标签： javascript html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43354004/article/details/108818756
版权

使用JavaScript实现简单的滑动窗口。效果图如下，可以左右滑动。
源代码已经上传到github上了，地址如下：https://github.com/dongxiaoshi/slidingWindow
在这里插入图片描述
主体代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			* {
				padding: 0px;
				margin: 0px;
				list-style: none;
			}
			.banner {
				width: 50%;
				height: 300px;
				margin-left:30%;
				border: 1px solid red;
				overflow: hidden;
				position: relative;
			}
			.banner .img {
				width: 600%;
				position: absolute;
			}
			.banner .img li{
				float: left;
			}
			.banner .img img {
				width: 100%;
				height: 300px;
				border: 1px solid yellow;
			}
			.banner .num {
				position: absolute;
				width: 100%;
				border: 1px solid red;
				bottom: 10px;
				left: 0px;
				text-align: center;
			}
			.banner .num li {
				width: 10px;
				height: 10px;
				background-color: #96E555;
				border-radius: 50%;
				/*float: left;*/
				display: inline-block;
				margin: 0px 3px;
				cursor: pointer;
			}
			.banner .num li.on {
				background-color: #FF0000;
			}
			.banner .btn {
				width: 30px;
				height: 50px;
				background-color: gray;
				opacity: 0.5;
				filter: alpha(opacity:0.5);
				position: absolute;
				top: 50%;
				margin-top: -25px;
				cursor: pointer;
				line-height: 50px;
				font-size: 40px;
				color: #fff;
				display: none;
			}
			.banner .btn_l{
				left: 0px;
			}
			.banner .btn_r{
				right: 0px;
			}
			.banner:hover .btn {
				display: block;
			}
		</style>
	</head>
	<body>
		<div class="banner">
			<ul class="img">
				<li><img src="bannerimg/banner1.jpg"/></li>
				<li><img src="bannerimg/banner2.jpg"/></li>
				<li><img src="bannerimg/banner3.jpg"/></li>
				<li><img src="bannerimg/banner4.jpg"/></li>
			</ul>
			<ul class="num">
				
			</ul>
			<div class="btn btn_l">&lt;</div>
			<div class="btn btn_r">&gt;</div>
		</div>
	</body>
	<script type="text/javascript" src="../js/jquery-2.1.0.js" ></script>
	<script type="text/javascript">
		var i=0;
		var t;
		var imgWidth = $('.banner').width();
//		alert(imgWidth);
		$('.banner img').width(imgWidth);
		// 克隆第一张图片
		var clone = $('.banner .img li').first().clone();
		// 复制到列表的最后
		$('.banner .img').append(clone);
		var size =$('.banner .img li').size();
		console.log(size);
		for(var j=0;j<size-1;j++){
			$('.banner .num').append("<li></li>");
		}
		$('.banner .num li').first().addClass('on');
		// 移动事件
		function move(){
			if(i == size){
				$('.banner .img').css({left:0});
				i = 1;
			}
			// 箭头点击过头了
			if(i == -1){
				$('.banner .img').css({left:-(size-1) * imgWidth});
				i = size -2;                      
			}
			$('.banner .img').stop().animate({left : -i * imgWidth},500);
			if(i == size -1){
				$('.banner .num li').eq(0).addClass('on').siblings().removeClass('on');
			} else {
				$('.banner .num li').eq(i).addClass('on').siblings().removeClass('on');
			}
		}
		// 鼠标悬停
		$('.banner').hover(function(){
			clearInterval(t); // 鼠标悬停的时候
		},function(){
			t = setInterval(function(){
			i++;
			move();
		},2000); // 鼠标移出
		})
		// 鼠标滑入事件
		$('.banner .num li').hover(function(){
			var index = $(this).index();//获取当前索引值
			i = index;
			$('.banner .img').stop().animate({left : -index * imgWidth},500);
			$(this).addClass('on').siblings().removeClass('on');
		})
		// 向左按钮
		$('.banner .btn_l').click(function(){
			i--;
			move();
		})
		// 向右按钮
		$('.banner .btn_r').click(function(){
			i++;
			move();
		})
		t = setInterval(function(){
			i++;
			move();
		},2000);
		
		$(window).resize(function(){
//			var a = $(window).width();
			imgWidth = $('.banner').width();
			$('.banner img').width(imgWidth);
			move();
		})
		
		
	</script>
	
	
	
	
	
	
</html>
普通的石头人
关注
  • 2
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS 滑动窗口 SlipWin
05-24
JAVASCRIPT语言开发，添加在JSP页面中的一个容器控件，可以选择在容器的哪个方向弹出，内有事例页面
JavaScript滑动窗口算法
橘猫吃不胖的博客
04-09 3070
JavaScript滑动窗口算法1 思想2 代码 1 思想 在力扣上刷题时经常可以看到这样的题，求XXX的子串、子数组、子序列等等，这类题一般使用滑动窗口来解决。本篇文章的思路学习了bilibili的up主红桃A士。 情况一：寻找最长的 ①初始化左右指针left和right，左右指针之间的内容就是窗口，定义一个变量result记录当前的滑动窗口的结果，定义一个变量bestResult记录当前滑动窗口下的最优结果 ②right要向右逐位滑动循环 ③每次滑动后，记录当前滑动的结果。如果当前的结果符合条件，则更
【JavaScript 算法】滑动窗口：处理子数组问题
最新发布
Allen-
07-19 858
滑动窗口（Sliding Window）是一种高效解决数组或字符串中子数组（子串）问题的算法技巧。它通过在数组上维护一个窗口（区间），动态地调整窗口的大小和位置，从而高效地解决问题。本文将详细介绍滑动窗口算法的原理、实现及其应用。
滑动窗口（JS实现）
qq_45519787的博客
04-05 349
利用循环控制终止位置，动态移动初始位置，整个过程类似于平衡不平衡然后循环的过程（终止位置到达满足条件的点，初始位置移动到可以使得条件不满足的点，然后终止位置再次移动到达满足条件的点，初始位置又来破坏这种平衡，不断循环，直到遍历完整个数组）
js滑动窗口算法
weixin_43502666的博客
02-25 394
滑动窗口算法的优势在于可以将时间复杂度控制在 O(n) 级别，避免了暴力搜索的高时间复杂度。总的来说，滑动窗口算法是一个非常实用且高效的算法，特别适用于处理连续子串的情况。不断移动右指针，直到找到满足条件的子串，然后尝试移动左指针缩小窗口大小；初始化左右指针，通常开始时均指向数组或字符串的起始位置；重复步骤 2 和 3，直到右指针到达数组或字符串的末尾。找到子数组或子串满足特定条件的最大/最小值；在移动左指针的过程中，更新记录的结果；找到子数组或子串满足特定条件的数量；找到不含重复字符的最长子串等。
JS：滑动窗口算法 （上集）
ronghwa_lu
02-15 923
建议先读文章，本文就解决一类最难掌握的双指针技巧：滑动窗口技巧。 难度在于各种细节问题，比如：如何向窗口中添加新元素，如何缩小窗口，在窗口滑动的哪个阶段更新结果。
JavaScript 滑动窗口协议仿真.zip
05-03
滑动窗口 滑动窗口协议是用来改善吞吐量的一种技术，即容许发送方在接收任何应答之前传送附加的包。接收方告诉发送方在某一时刻能送多少包（称窗口尺寸）。 TCP中采用滑动窗口来进行传输控制，滑动窗口的大小意味着...
《前端开发实践：JavaScript打造响应式滑动窗口》-涵盖交互设计、事件处理、DOM操作，助力网页交互与用户界面优化
05-03
它不仅提供了一套全面且实用的滑动窗口制作指南，还通过具体的实例深入浅出地介绍了如何使用JavaScript实现滑动窗口的基本原理与步骤。本文旨在帮助读者掌握滑动窗口的制作技巧，并进一步提升网页的交互体验。 ####...
jQuery实现仿微软首页感应鼠标变化滑动窗口效果
10-23
这个实例演示了如何使用jQuery库来实现一个简单的动画效果，类似于微软官方网站上的响应鼠标动作的滑动窗口效果。当用户将鼠标悬停（hover）在页面的特定元素上时，该元素会扩大，当鼠标移开时，元素会恢复到原始...
js代码-8.2 滑动窗口 双端队列
07-14
在JavaScript中，滑动窗口通常与数据结构如数组、队列或者在本例中提到的双端队列（deque）一起使用。 双端队列是一种可以在两端进行插入和删除操作的线性数据结构。它可以像队列一样在后端（尾部）添加元素，在...
基于JavaScript实现鼠标向下滑动加载div的代码
10-21
标题“基于JavaScript实现鼠标向下滑动加载div的代码”所指的是一个前端编程技术，它涉及到使用JavaScript（一种脚本语言，常用于网页中的动态交互）来实现当用户在网页上向下滚动鼠标时，动态加载（或者说显示）...
六、leetcode - 滑动窗口（JS）
seaalan的博客
04-18 187
3. 无重复字符的最长子串 给定一个字符串 s ，请你找出其中不含有重复字符的 最长子串 的长度。 输入: s = "abcabcbb" 输出: 3 解释: 因为无重复字符的最长子串是 "abc"，所以其长度为 3。 { a: 1 } l=0 r=1 res=1 { a: 1, b: 1 } l=0 r=2 res=2 { a: 1, b: 1, c: 1 } l=0 r=3 res=3 { a: 1, b: 1, c: 1 } l=1 r=
javascript 浮动窗口滚动.拖动
xinyiu1989的专栏
05-18 499
 function close(){  QQkefu.style.display="none";  return true; }  function msgBox()  {   this.container = "aaaa";   this.titleheadArea = "titlehead";   this.width = 154;   this.height = 105;   this.sm
js学习之滑动窗口
Erin_coast的博客
10-08 178
【代码】js学习之滑动窗口。
【算法】JS 滑动窗口&(最大/小堆 | 单调队列) 力扣周赛6911. 不间断子数组
qq_53512708的博客
07-02 234
力扣周赛352，6911. 不间断子数组，js题解
JavaScript（三十九）——鼠标滚轮、滚动窗口制作
苦作舟的空城机
02-29 979
鼠标滚轮事件 滚轮就是鼠标上的滚轮，它滚动时触发的事件 oDiv.onmousewheel = function(event){ oDiv.innerHTML = event.wheelDelta; } onmousewheel就是鼠标滚动事件，mouse鼠标，wheel就是轮子 event参数最重要的事就是event.wheelDelta属性，表示了滚动的方向，这是浏览器的规定...
GEE基于滑动窗口法主成分分析合成遥感图像的JavaScript代码实现
06-08
以下是GEE基于滑动窗口法主成分分析合成遥感图像的JavaScript代码实现的一个示例： ```javascript // 设置滑动窗口的大小，这里设为3x3的窗口 var windowSize = 3; // 加载需要进行主成分分析的遥感图像 var image = ee.Image('LANDSAT/LC08/C01/T1_TOA/LC08_123032_20140515'); // 获取图像的波段数 var numBands = image.bandNames().size(); // 定义一个滑动窗口的核心函数 var slidingWindow = function(img) { // 将图像转换为一个数组 var arr = img.toArray(); // 获取图像的行和列数 var rows = img.size()[0]; var cols = img.size()[1]; // 定义一个空的结果数组 var out = ee.List([]); // 循环遍历每一个像素点 for (var i = windowSize; i <= rows - windowSize; i++) { for (var j = windowSize; j <= cols - windowSize; j++) { // 定义一个滑动窗口 var window = arr.slice(i - windowSize, j - windowSize, i + windowSize + 1, j + windowSize + 1); // 将滑动窗口转换为一个矩阵 var windowMatrix = ee.Array(window); // 对矩阵进行主成分分析 var pca = windowMatrix.reduceRegion({ reducer: ee.Reducer.pca(numBands), geometry: ee.Geometry.Rectangle(i - windowSize, j - windowSize, i + windowSize, j + windowSize), scale: 30 }); // 将主成分分析的结果添加到结果数组中 out = out.add(ee.Feature(null, pca)); } } // 将结果数组转换为一个特征集合 return ee.FeatureCollection(out); }; // 对图像进行滑动窗口主成分分析 var pcaImage = slidingWindow(image); // 将主成分分析的结果可视化 Map.addLayer(pcaImage, {}, 'PCA Image'); ``` 需要注意的是，这只是一个简单的示例，实际应用中可能需要对代码进行调整以满足不同的需求。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值