引用jQuery实现背景轮播滚动

最新推荐文章于 2022-10-29 18:05:59 发布

Smallmouse96

最新推荐文章于 2022-10-29 18:05:59 发布

阅读量352

点赞数

文章标签： HTML5 轮播效果 jQuery 背景滚动动画效果

本文链接：https://blog.csdn.net/Smallmouse96/article/details/125409554

版权

客户要求头部背景轮播滚动，本来是懒省事不想引插件，就自己写了一个，结果好家伙，写了 ~~一上午~~ 一天。不多说，直接上代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
		<style type="text/css">
			html,body {margin: 0;}
			.pc-first {position: relative;width: 100%;height: 257px;overflow: hidden;}
		</style>
	</head>
	<body>
		<div class="pc-first" style="background: none;">
			<div class="pc-first-before"></div>
			<div class="pc-first-after"></div>	
		</div>
		<div id="topBannerBckImg" style="display: none;"> 
			<img src="./images/202206/20220621174115622.jpg">
			<img src="./images/202206/20220621173753741.jpg"> 
			<img src="./images/20210926115111395.jpg"> 
		</div>
		<script type="text/javascript">
			var bckImg = $("#topBannerBckImg img");
			var bckImgSum = 0; // 默认显示第几个
			var bckImgSpeed = 3000; // 轮播速度
			var animateSpeed = 800; // 轮播动画速度
			var bckImgShow = "before"; // 当前显示 before|after
			var flag = true; // 节流阀
			var after = "pc-first-after"; // 元素class属性
			var before = "pc-first-before"; // 元素class属性
			var rollType = "right" // 滚动方式 top|right|bottom|left
			// 初始化样式
			$("."+after).css({
				"position": "absolute",
				"width": "100%",
				"height": "100%",
				"top": "auto",
				"left": "auto",
				"right": "auto",
				"bottom": "auto",
				"background-repeat": "no-repeat",
				"background-position": "top center"
			});
			$("."+before).css({
				"position": "absolute",
				"width": "100%",
				"height": "100%",
				"top": "auto",
				"left": "auto",
				"right": "auto",
				"bottom": "auto",
				"background-repeat": "no-repeat",
				"background-position": "top center"
			});
			$("."+after).css(rollType, "0");
			$("."+before).css(rollType, "-100%");
			// 运行
			bckImgRun();
			// 动画
			function aBAnimate(a,b) {
				switch (rollType) {
					case "top":
						$("."+after).animate({top: a}, animateSpeed);
						$("."+before).animate({top: b}, animateSpeed, function() {flag = true;});
					break;
					case "right":
						$("."+after).animate({right: a}, animateSpeed);
						$("."+before).animate({right: b}, animateSpeed, function() {flag = true;});
					break;
					case "bottom":
						$("."+after).animate({bottom: a}, animateSpeed);
						$("."+before).animate({bottom: b}, animateSpeed, function() {flag = true;});
					break;
					case "left":
						$("."+after).animate({left: a}, animateSpeed);
						$("."+before).animate({left: b}, animateSpeed, function() {flag = true;});
					break;
				}
			}
			// 设置背景
			function bckImgFunItem(i,start) {
				var j = i-1;
				if(i == 0) j = bckImg.length - 1;
				var vbkImgItem = bckImg.eq(i).attr("src");
				var vbkImgItemBefor = bckImg.eq(j).attr("src");
				/* after:a; before:b;
				 * 1、a、b都设置背景，a、b元素向下移动一格 显示b 顺序ba
				 * 2、b不动，a元素向上移动两个0秒执行，设置a、b背景，a、b元素向下移动一格 显示a 顺序ab
				 * 3、a不动，b元素向上移动两个0秒执行，设置a、b背景，a、b元素向下移动一格 显示b 顺序ba
				 * */
				if(start) {
					$("."+before).css({"background-image": "url("+vbkImgItemBefor+")"});
					$("."+after).css({"background-image": "url("+vbkImgItem+")"});
					return false;
				}
				if(bckImgShow=="before") {
					// 初始化属性值
					$("."+after).css(rollType, "0");
					$("."+before).css(rollType, "-100%");
					$("."+before).css({"background-image": "url("+vbkImgItem+")"});
					// 设置动画
					aBAnimate("100%","0");
					// 当前显示重新赋值
					bckImgShow = "after";
				}else if(bckImgShow=="after") {
					// 初始化属性值
					$("."+before).css(rollType, "0");
					$("."+after).css(rollType, "-100%");
					$("."+after).css({"background-image": "url("+vbkImgItem+")"});
					// 设置动画
					aBAnimate("0","100%");
					// 当前显示重新赋值
					bckImgShow = "before";
				}
			}
			// 定时器运行
			function bckImgRun() {
				if(bckImg.length<1) return false;
				var vbkImgItem = bckImg.eq(0).attr("src");
				$("."+after).css({"background-image": "url("+vbkImgItem+")"});
				if(bckImg.length==1) return false;
				bckImgFunItem(0,true);
				setInterval(function() {
					bckImgSum++;
					if(bckImgSum == bckImg.length) bckImgSum = 0;
					if(flag) flag = false; else return false;
					bckImgFunItem(bckImgSum);
				}, bckImgSpeed)
			}
		</script>
	</body>
</html>

外层.pc-first一定要设置position、width、height、overflow:hidden。

#topBannerBckImg里面放的是需要展示的背景图。

支持更改的属性为：

bckImg：背景图item序列

bckImgSum：默认显示bckImg下标的背景图

bckImgSpeed：背景切换速度

animateSpeed：背景切换动画时间

bckImgShow：当前显示的背景图，默认值不要动

flag：节流阀，防止窗口切换长时间后页面动画异常

after：显示背景图的元素class

before：显示背景图的元素class

rollType：切换方式，支持 top | right | bottom | left

都是些基础语法，主要是为了兼容ie，animate属性值无法使用[]写法些动态对象属性（哪位大佬知道如何写兼容ie的动态对象属性请教教小弟吧），轮播思路：（以“rollType”等于“top”为例）

1、默认显示after，befor在after上方，滚动after、befor同时向下推。

滚动前	滚动后
befor	空
after显示	befor显示
空	after

2、将after放到befor上方，滚动after、befor同时向下推

滚动前	滚动后
after	空
befor显示	after显示
空	befor

3、......以下省略

Smallmouse96

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
引用jQuery实现背景轮播滚动

客户要求头部背景轮播滚动，本来是懒省事不想引插件，就自己写了一个，结果好家伙，写了一上午。不多说，直接上代码外层.pc-first一定要设置position、width、height、overflow:hidden。#topBannerBckImg里面放的是需要展示的背景图。支持更改的属性为：bckImg：背景图item序列bckImgSum：默认显示bckImg下标的背景图bckImgSpeed：背景切换速度animateSpeed：背景切换动画时间bckImgShow：当前显示的背景图，默认值不要
复制链接

扫一扫