原生JavaScript实现竖直轮播图

最新推荐文章于 2023-12-09 07:59:27 发布

原创

最新推荐文章于 2023-12-09 07:59:27 发布 · 5.1k 阅读

10 ·

CC 4.0 BY-SA版权

本文将介绍如何利用原生JavaScript实现一个垂直方向的轮播图效果，包括上下切换、自动播放、无限循环等功能，同时探讨如何优化用户体验和性能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="日常封装函数.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			ul li,ol li{
				list-style: none;
			}
			#wrap{
				width: 1024px;
				height: 320px;
				border: 1px solid #000;
				margin: 100px auto;
				position: relative;
				overflow: hidden;
			}
			#wrap #list{
				height: 320px;
				position: absolute;
			}
			#wrap #list li{
				width: 1024px;
				height: 320px;
			}
			#wrap #list li img{
				width: 1024px;
				height: 320px;
				display: block;
			}
			#wrap #prev{
				width: 80px;
				height: 50px;
				font-size: 12px;
				position: absolute;
				top: 0;
				background: #fff;
				opacity: .5;
				border: 0;
			}
			#wrap #next{
				width: 80px;
				height:50px;
				font-size: 12px;
				position: absolute;
				bottom: 0;
				background: #fff;