旋转式轮播图

最新推荐文章于 2023-04-08 23:18:56 发布

孤独的天才

最新推荐文章于 2023-04-08 23:18:56 发布

阅读量2.3k

点赞数 3

分类专栏：前端文章标签：旋转式轮播图

本文链接：https://blog.csdn.net/qq_40181206/article/details/89177510

版权

前端专栏收录该内容

34 篇文章 26 订阅

订阅专栏

旋转式轮播图

今天给出的是旋转式的轮播图，本实例主要考验对动画函数的封装使用，以及对数组的增删操作，通过json对象组成的数组为每个轮播图设定位置实现旋转式轮播图的效果具体代码如下

<!DOCTYPE html>
<html>

	<head>
		<meta charset="{CHARSET}">
		<title></title>
		<style>
			* {
				margin: 0;
				padding: 0;
				list-style: none;
				vertical-align: middle;
			}
			
			.wrap {
				width: 1200px;
				margin: 100px auto;
			}
			
			.slide {
				height: 500px;
				position: relative;
			}
			
			.slide li {
				position: absolute;
				left: 200px;
				top: 0;
			}
			
			.arrow {
				opacity: 0;
			}
			
			.prev,
			.next {
				width: 76px;
				height: 112px;
				position: absolute;
				top: 50%;
				margin-top: 56px;
				background: url(images/prev.png) no-repeat;
				z-index: 99;
			}
			
			img {
				width: 100%;
			}
			
			.next {
				right: 0;
				background: url(images/next.png) no-repeat;
			}
		</style>
	</head>

	<body>
		<div class="wrap" id="wrap">
			<div class="slide" id="slide">
				<ul>
					<li>
						<a href="#"><img src="images/slidepic1.jpg" alt="" /></a>
					</li>
					<li>
						<a href="#"><img src="images/slidepic2.jpg" alt="" /></a>
					</li>
					<li>
						<a href="#"><img src="images/slidepic3.jpg" alt="" /></a>
					</li>
					<li>
						<a href="#"><img src="images/slidepic4.jpg" alt="" /></a>
					</li>
					<li>
						<a href="#"><img src="images/slidepic5.jpg" alt="" /></a>
					</li>
				</ul>
				<div class="arrow" id="arrow">
					<a href="javascript:;" class="prev" id="arrLeft"></a>
					<a href="javascript:;" class="next" id="arrRight"></a>
				</div>
			</div>
		</div>
		<script>
			var config = [{
					width: 400,
					top: 20,
					left: 50,
					opacity: 0.2,
					zIndex: 2
				}, //0
				{
					width: 600,
					top: 70,
					left: 0,
					opacity: 0.8,
					zIndex: 3
				}, //1
				{
					width: 800,
					top: 100,
					left: 200,
					opacity: 1,
					zIndex: 4
				}, //2
				{
					width: 600,
					top: 70,
					left: 600,
					opacity: 0.8,
					zIndex: 3
				}, //3
				{
					width: 400,
					top: 20,
					left: 750,
					opacity: 0.2,
					zIndex: 2
				} //4

			];
			var liObjs = document.getElementsByTagName("li");
			var arrow = document.getElementById("arrow");
			var slide = document.getElementById("slide");
			var arrLeft = document.getElementById("arrLeft");
			var arrRight = document.getElementById("arrRight");
			var flag=true;
			function assign() {
				for(var i = 0; i < liObjs.length; i++) {
					animate(liObjs[i], config[i],function(){
						flag=true;
					});
				}
			}
			assign();
			function animate(element, json, fn) {
				clearInterval(element.timeId);
				element.timeId = setInterval(function() {
					var flag = true;
					for(var attr in json) {
						if(attr == "opacity") {
							var current = getStyle(element, attr) * 100;
							var target = json[attr] * 100;
							var step = (target - current) / 10;
							step = step > 0 ? Math.ceil(step) : Math.floor(step);
							current += step;
							element.style[attr] = current / 100;
						} else if(attr == "zIndex") {
							element.style[attr] = json[attr];
						} else {
							var current = parseInt(getStyle(element, attr));
							var target = json[attr];
							var step = (target - current) / 10;
							step = step > 0 ? Math.ceil(step) : Math.floor(step);
							current += step;
							element.style[attr] = current + "px";
						}
						if(current != target) {
							flag = false;
						}
					}
					if(flag) {
						clearInterval(element.timeId);
						if(fn) {
							fn();
						}
					}
				}, 10);
			}

			function getStyle(element, attr) {
				return window.getComputedStyle ? window.getComputedStyle(element, null)[attr] : element.currentStyle[attr];
			}
			slide.onmouseover = function() {
				animate(arrow, {
					"opacity": "1"
				});
			}
			slide.onmouseout = function() {
				animate(arrow, {
					"opacity": "0"
				});
			}
			arrRight.onclick = function() {
				if(flag){
					flag=false;
					config.push(config.shift());
				assign();
				}
			}
			arrLeft.onclick = function() {
				if(flag){
					flag=false;
					config.unshift(config.pop());
				assign();
				}
			}
		</script>
	</body>

</html>

刚运行的页面
在这里插入图片描述
当前鼠标进行悬浮时左右按键显示

当点击右边的按钮时发生向右旋转，进行切换轮播图页面：

当点击左边的按钮时，将进行左旋转实现轮播图的切换：

孤独的天才

关注

3
点赞
踩
19

收藏

觉得还不错? 一键收藏
0
评论
旋转式轮播图

旋转式轮播图旋转式轮播图今天给出的是旋转式的轮播图，本实例主要考验对动画函数的封装使用，以及对数组的增删操作，通过json对象组成的数组为每个轮播图设定位置实现旋转式轮播图的效果具体代码如下<!DOCTYPE html><html> <head> <meta charset="{CHARSET}"> <title...
复制链接

扫一扫