原生JS轮播图+进度条

最新推荐文章于 2024-07-12 15:47:36 发布

@小六小六

最新推荐文章于 2024-07-12 15:47:36 发布

阅读量1.3k

点赞数 6

分类专栏： web前端

本文链接：https://blog.csdn.net/qq_42695369/article/details/97911787

版权

该博客介绍了如何模仿honor官网的轮播图和进度条功能。作者分享了实现这一效果的过程，并展示了最终的视觉效果。尽管仍存在一些问题，作者欢迎读者提出建议和指导。

摘要由CSDN通过智能技术生成

最近模仿的honor官网轮播图和显示按钮的进度条效果，bug依然存在，请多指教。
以下是效果图：
在这里插入图片描述最后奉上代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			/* 这是显示窗口 */
			.main-wheel{
			    width: 1250px;
			    height: 550px;
			    /* border: 1px solid; */
				overflow: hidden;/*超出窗口部分隐藏*/
				position: relative;
				margin: 0 auto;
			}
			.main-wheel button{
			    position: absolute;
			    width: 50px;
			    height: 60px;
			    top: 250px;
			    z-index: 900;
			    border: none;
			    outline: none;
			    background-color:#000;
			    opacity: .05; 
			    color: #fff;