以makeblock为主题的滚动html案例(swiper实现界面滚动)

已于 2023-05-31 14:34:03 修改
阅读量154 收藏
点赞数 1
分类专栏： 前端 文章标签： html css javascript
于 2023-05-31 14:32:11 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43823060/article/details/130968298
版权

目录

1.项目演示

2.项目目录

3.项目代码

4.项目源码

1.项目演示

2.项目目录

3.项目代码

index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>移动端推广项目</title>
		<link rel="stylesheet" type="text/css" href="css/animate.min.css" />
		<link rel="stylesheet" type="text/css" href="css/swiper.min.css" />
		<link rel="stylesheet" type="text/css" href="css/index.css"/>
	</head>
	<body>
		<div class="swiper-container">
		    <div class="swiper-wrapper">
		        <div class="swiper-slide">
		        	<div class="jidiv ani" swiper-animate-effect="bounceInDown" swiper-animate-duration="0.5s" swiper-animate-delay="0s">
		        		<img src="img/makeblock.png">
		        	</div>
		        	<div class="wenzidiv ani" swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="1.5s">
		        		<h1>拥有了Makeblock</h1>
		        		<h2>你便有了无数可能</h2>
		        	</div>
		        	<div class="che ani" swiper-animate-effect="bounceInUp" swiper-animate-duration="1s" swiper-animate-delay="0.5s">
		        		<img src="img/che.png" />
		        	</div>
		        </div>
		        <div class="swiper-slide">
		        	<div class="touxiang ani" swiper-animate-effect="flash" swiper-animate-duration="0.5s" swiper-animate-delay="0s">
		        		<img src="img/touxiang.jpg" />
		        	</div>
		        	<div class="aboutus">
		        		<div class="xiahuaxian ani" swiper-animate-effect="bounceInLeft" swiper-animate-duration="0.7s" swiper-animate-delay="0.5s">
		        			<img src="img/tubiao.jpg" />应用介绍
		        		</div>
		        		<div class="text ani"  swiper-animate-effect="bounceInLeft" swiper-animate-duration="0.7s" swiper-animate-delay="0.5s">
		        			Makeblock是一款专为Makeblock平台电子控制而开发的免费应用，同时也可以用它来和Arduino平台的传感器和执行器进行数据交互，控制机器人移动。<br />
		        		</div>
		        		
		        		<div class="xiahuaxian ani"  swiper-animate-effect="bounceInRight" swiper-animate-duration="0.7s" swiper-animate-delay="1.2s">
		        			<img src="img/tubiao.jpg" />产品介绍
		        		</div>
		        		<div class="text ani" swiper-animate-effect="bounceInRight" swiper-animate-duration="0.7s" swiper-animate-delay="1.2s">
		        			融入微软认知服务和谷歌深度学习功能，通过游戏进行AI功能教学，让孩子更容易理解 AI技术背后的逻辑和原理，实现更多创造。<br />
		        			hjdfhgdkljfg
		        		</div>
		        		
		        		<div class="xiahuaxian ani" swiper-animate-effect="bounceInUp" swiper-animate-duration="0.7s" swiper-animate-delay="1.9s">
		        			<img src="img/tubiao.jpg" />IoT（物联网）教学
		        		</div>
		        		<div class="text ani"  swiper-animate-effect="bounceInUp" swiper-animate-duration="0.7s" swiper-animate-delay="1.9s">
		        			引导学生基于现实去创造专为IoT教学设计的云服务，可实现多种IoT应用。通过简单的应用，让学生在生活场景中了解IoT。<br />
		        		</div>
		        	</div>
		        </div>
		        <div class="swiper-slide">
		        	<div class="rongyu">
		        		<div class="xiahuaxian2 ani"   swiper-animate-effect="tada" swiper-animate-duration="0.5s" swiper-animate-delay="0s">
		        			<img src="img/wangjianjun.jpg">王建军 （Makeblock创始人&CEO）&nbsp;&nbsp;个人经历
		        		</div>
		        		<div class="text2">
		        			<div class="aboutry ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s"swiper-animate-delay="0.5s">
		        			<img src="img/tubiao2.jpg"/>2010年王建军从西北工业大学飞行器设计专业获得硕士学位。<br />
		        			</div>
		        			<div class="aboutry ani"  swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="1s">
		        			<img src="img/tubiao2.jpg"/>2011年5月，入职一年后，王建军辞职。<br />
		        			</div>
		        			<div class="aboutry ani"  swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="1.5s">
		        			<img src="img/tubiao2.jpg"/>离职后，王建军用工作赚得的几万元在租住的房子里开始创业。<br /></div>
		        			<div class="aboutry ani"  swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="2s">
		        			<img src="img/tubiao2.jpg"/>2012年春，王建军带着团队参加了美国H A XLR8R硬件孵化器比赛，成为打入前十的中国团队，成功获得2.3万美元融资。<br /></div>
		        			<div class="aboutry ani"  swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="2.5s">
		        			<img src="img/tubiao2.jpg"/>2012年年底，王建军决定参加Kickstarter众筹融资，成为第一个在该平台成功融资的中国项目。<br /></div>
		        			<div class="aboutry ani"  swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="3s">
		        			<img src="img/tubiao2.jpg"/>2013年6月，Makeblock获得第一笔300万元风投。<br /></div>
		        			<div class="aboutry ani"  swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="3.5s">
		        			<img src="img/tubiao2.jpg"/>GET2017教育科技大会上，Makeblock的创始人&CEO王建军到场参会，发布普及型编程机器人——“程小奔”，并以Makeblock为例分享对于STEAM教育的理解和看法。<br /></div>
		        		</div>
		        	</div>
		        </div>
		        <div class="swiper-slide">
		        	<div class="jineng ani">
		        		<h1>产品展示</h1>
		        		<img src="img/jineng1.jpg" class="jn1 ani" swiper-animate-effect="rotateIn" swiper-animate-duration="0.5s" swiper-animate-delay="0s"/>
		        		<img src="img/jineng2.jpg" class="jn2 ani"  swiper-animate-effect="rotateInDownLeft" swiper-animate-duration="0.5s" swiper-animate-delay="0.6s"/>
		        		<img src="img/jineng3.jpg" class="jn3 ani"  swiper-animate-effect="rotateInDownRight" swiper-animate-duration="0.5s" swiper-animate-delay="1.2s"/>
		        		<img src="img/jineng4.jpg" class="jn4 ani"  swiper-animate-effect="rotateInUpLeft" swiper-animate-duration="0.5s" swiper-animate-delay="1.8s"/>
		        		<img src="img/jineng5.jpg" class="jn5 ani"  swiper-animate-effect="rotateInUpRight" swiper-animate-duration="0.5s" swiper-animate-delay="2.4s"/>
		        		<img src="img/jineng6.jpg" class="jn6 ani"  swiper-animate-effect="rotateIn" swiper-animate-duration="0.5s" swiper-animate-delay="3s"/>
		        	</div>
		        </div>
		        <div class="swiper-slide">
		        	<div class="zuopin">
		        		<h1>产品售价</h1>
		        		<img src="img/mai1.png" class="ani" swiper-animate-effect="slideInLeft" swiper-animate-duration="0.5s" swiper-animate-delay="0s" />
		        		<img src="img/mai2.png" class="ani" swiper-animate-effect="slideInRight" swiper-animate-duration="0.5s" swiper-animate-delay="0.5s"/>
		        		<img src="img/mai3.png" class="ani" swiper-animate-effect="slideInLeft" swiper-animate-duration="0.5s" swiper-animate-delay="1s" />
		        		<img src="img/mai4.png" class="ani" swiper-animate-effect="slideInRight" swiper-animate-duration="0.5s" swiper-animate-delay="1.5s" />
		        	</div>
		        </div>
		        <div class="swiper-slide">
		        	<div class="weiye">
		        		<img src="img/makeblock.png" class="ani" swiper-animate-effect="rotateInDownRight" swiper-animate-duration="0.5s" swiper-animate-delay="0s" />
		        	</div>
		        	<div class="weiye2 ani" swiper-animate-effect="bounceIn" swiper-animate-duration="0.5s" swiper-animate-delay="0.5s">
		        		<hr />
		        		<h2>谢谢观看</h2>
		        		<hr />
		        	</div>
		        	<div class="weiye3 ani"  swiper-animate-effect="lightSpeedIn" swiper-animate-duration="1.5s" swiper-animate-delay="1s">
		        		<h2>mBlock</h2><br />
		        		<h2>“入门级机器人mBot，再加上mBlock软件，很适合9–15岁儿童作为入门级教育机器人。”</h2><br />
		        		<h2>——36氪</h2>
		        	</div>
		        </div>
		    </div>
		    
		    <!-- 如果需要导航按钮 -->
		    <div class="swiper-button-prev"></div>
		    <div class="swiper-button-next"></div>
		    
		    <!-- 如果需要滚动条 -->
		    <div class="swiper-scrollbar"></div>
		</div>
		<script type="text/javascript" src="js/swiper-3.4.2.min.js" ></script>
		<script type="text/javascript" src="js/swiper.animate1.0.3.min.js" ></script>
		<script type="text/javascript" src="js/swiper.min.js"></script>
		<script type="text/javascript" src="js/swiper.animate1.0.2.min.js" ></script>
		<script>     
			var mySwiper = new Swiper ('.swiper-container', {
		    direction: 'vertical', // 垂直切换选项
		    loop: true, // 循环模式选项 
		    autoplay:{ 
		    	delay: 5000,//5秒切换一次
		    	disableOnInteraction: false,
		    },
		    // 如果需要分页器
		    pagination: {
		      el: '.swiper-pagination',
		      clickable :true,
		    },
		    
		    // 如果需要前进后退按钮
		    navigation: {
		      nextEl: '.swiper-button-next',
		      prevEl: '.swiper-button-prev',
		    },
		    
		    // 如果需要滚动条
		    scrollbar: {
		      el: '.swiper-scrollbar',
		    },
		    
		    
			on:{
			    init: function(){
			    	swiperAnimateCache(this); //隐藏动画元素 
			    	swiperAnimate(this); //初始化完成开始动画
			    }, 
			    slideChangeTransitionEnd: function(){ 
			    swiperAnimate(this); //每个slide切换结束时也运行当前slide动画
//this.slides.eq(this.activeIndex).find('.ani').removeClass('ani'); 动画只展现一次，去除ani类名
			    } 
			}
		  })        
		  </script>
	</body>
</html>

index.css

*{
	margin: 0;
	padding: 0;
}
html,body{
	width: 100%;
	height: 100%;
}
.swiper-container{
	width: 100%;
	height: 100%;
	color: white;
}
.swiper-slide{
	background: url(../img/black.jpg);
	font-family: "微软雅黑";
	font-size: 10px;
}
.jidiv{
	margin-top: 20%;
	margin-left: 22%;
}
.jidiv img{
	width: 70%;
	border-radius: 1000px;
	background: rgba(255,255,255,0.7);
	padding: 10px;
}
.wenzidiv{
	margin-top: 20%;
	margin-left: 15%;
	margin-right: 15%;
	text-align: center;
}
.wenzidiv h1{
	font-size: 80px;
	line-height: 100px;
}
.wenzidiv h2{
	font-size: 70px;
}
.che{
	margin-top: 20%;
	margin-right: 2%;
}
.touxiang{
	margin-top: 8%;
	margin-left: 32%;
}
.touxiang img{
	width: 50%;
	border-radius: 1000px;
	background: rgba(255,255,255,0.7);
	padding: 10px;
}
.xiahuaxian img{
	width: 9%;
	border-radius: 1000px;
}
.aboutus{
	margin-left: 5%;
	margin-right: 5%;
}
.xiahuaxian{
	font-size: 50px;
	font-weight: bold;
	border-bottom: white solid 1px;
	padding: 10px;
}

.text{
	font-size: 40px;
	line-height: 70px;
	margin-bottom: 20px;
	padding-top: 3%;
	padding-bottom: 3%;
}

.xiahuaxian2{
	font-size: 50px;
	font-weight: bold;
	border-bottom: white solid 1px;
	padding: 10px;
}
.xiahuaxian2 img{
	width: 20%;
	border-radius: 1000px;
	margin-left: 5%;
	margin-top: 3%;
}
.text2{
	font-size: 43px;
	line-height: 70px;
	margin-bottom: 20px;
	padding-top: 3%;
	padding-bottom: 3%;
	margin-left: 5%;
	margin-right: 5%;
}
.text2 img{
	width: 9%;
	border-radius: 1000px;
}
.jineng h1{
	font-size: 70px;
	margin-top: 10%;
	margin-left: 10%;
}
.jineng img{
	width: 35%;
}
.jn1{
	position: absolute;
	top: 30%;
	left: 20%;
}
.jn2{
	position: absolute;
	top: 34%;
	left: 40%;
}
.jn3{
	position: absolute;
	top: 20%;
	left: 25%;
}
.jn4{
	position: absolute;
	top: 60%;
	left: 50%;
}
.jn5{
	position: absolute;
	top: 70%;
	left: 20%;
}
.jn6{
	position: absolute;
	top: 80%;
	left: 55%;
}
.zuopin h1{
	font-size: 70px;
	margin-top: 10%;
	margin-left: 10%;
}
.zuopin{
	margin-left: 6%;

}
.zuopin img{
	width: 46%;	
	margin-top: 3%;
	margin-right: 2%;
}
.weiye{
	margin-left: 18%;
	margin-top: 20%;
}
.weiye img{
	width: 80%;
	border-radius: 1000px;
	background: rgba(255,255,255,0.7);
	padding: 10px;
}
.weiye2{
	margin-left: 20%;
	margin-right: 20%;
	font-size: 60px;
	margin-top: 10%;
	text-align: center;
}
.weiye3{
	margin-left: 10%;
	margin-right: 10%;
	font-size: 35px;
	margin-top: 15%;
	text-align: center;
}

4.项目源码

https://download.csdn.net/download/weixin_43823060/87847894?spm=1001.2014.3001.5501https://download.csdn.net/download/weixin_43823060/87847894?spm=1001.2014.3001.5501

PG5
关注
专栏目录
H5--大概的,没事看看
weixin_44462907的博客
03-20 641
1.设置弹性盒 任何元素都可以设置 display:flex; display:inline-flex //给行内元素设置弹性盒子 display:-webkit-flex; //webkit(是浏览器的内核，是谷歌浏览器和safari(苹果浏览器)的内核) display:-webkit-flex //谷歌浏览器和safari(苹果浏览器)的内核 display:-moz-flex...
前端学习笔记 - 移动端Web开发
fengxm0309的博客
10-18 1104
移动端基础 浏览器现状 PC端常见浏览器：360浏览器、谷歌浏览器、火狐浏览器、QQ浏览器、百度浏览器、搜狗浏览器、IE浏览器 移动端常见浏览器：UC浏览器，QQ浏览器，欧朋浏览器，百度手机浏览器，360安全浏览器，谷歌 浏览器，搜狗手机浏览器，猎豹浏览器，以及其他杂牌浏览器。 国内的UC和QQ，百度等手机浏览器都是根据Webkit修改过来的内核，国内尚无自主研发的内核，就像国内的手机操作系统都是基于Android修改开发的一样 兼容移动端主流浏览器，处理Webkit内核浏览器即可
原生开发 HTML页面引入swiper，纯轮播展示页面
feiyu的博客
01-06 969
原生开发 HTML 轮播图 swiper
html轮播如何实现
祎祎的博客
06-04 738
wwwwwwwwwwwwwwwwwwwww
Swiper.js实现无缝滚动
m0_52761651的博客
09-27 3819
swiper.js实现无缝滚动
web课程设计——健身俱乐部健身器材网站模板(24页)HTML+CSS+JavaScript (1)
HTML网页设计
06-04 909
🎉精彩专栏推荐 💭文末获取联系 ✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主 💂 作者主页: 【主页——🚀获取更多优质源码】 🎓 web前端期末大作业： 【📚毕设项目精品实战案例 (1000套) 】 🧡 程序员有趣的告白方式：【💌HTML七夕情人节表白网页制作 (110套) 】 🌎超炫酷的Echarts大屏可视化源码：【🔰 echarts大屏展示大数据平台可视化(150套) 】 🎁 免费且实用的WEB前端学习指南： 【📂web前端零基础到高级学习视频教程 120G干货分享】 🥇 关
web课程设计——健身俱乐部健身器材网站模板(24页)HTML+CSS+JavaScript
网页设计与制作
11-06 515
🏀校园篮球网页设计、⚽足球体育运动、🤽体育游泳运动、🏓兵乓球 、🎾网球、等网站的设计与制作。🏷️ 大学生校园运动静态HTML网页设计作品，采用DIV CSS布局制作，内容包括：校园运动、运动技巧、运动规则、技术规则、经典动作。页面主体内容区域宽度为1200PX。网页整体使用CSS设置了网页背景图片。页面精美包含多个排版布局，学生网页作业水平制作。🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构
前六章总结
2302_76619477的博客
04-26 515
组件是页面视图层(WXML)的基本组成单元，组件组合可以构建功能强大的页面结构。小程序框架为开发者提供了容器视图、基础内容、表单、导航、多媒体、地图、画布、开放能力等8类(30多个)基础组件。每一个组件都由一对标签组成，有开始标签和结束标签，内容放置在开始标签和结束标签之间，内容也可以是组件。组件的语法格式如下:<标签名 属性名=”属性值”>内容…</标签名>组件通过属性来进一步细化。
微信小程序开发与运营复习博客
2301_78041961的博客
04-26 1737
组件是页面视图层（WXML）的基本组成单元，组件组合可以构建功能强大的页面结构。小程序框架为开发者提供了容器视图、基础内容、表单、导航、多媒体、地图、画布、开放能力等8类（30多个）基础组件。每一个组件都由一对标签组成，有开始标签和结束标签，内容放置在开始标签和结束标签之间，内容也可以是组件。组件的语法格式如下：＜标签名 属性名＝”属性值”＞内容···＜／标签名＞组件通过属性来进一步细化。
swiper Scrollbar滚动条组件详解
12-09
本文实例为大家分享了swiper Scrollbar滚动条组件的具体代码，供大家参考，具体内容如下 1、scrollbar 为Swiper增加滚动条。类型：object。 2、el scrollbar容器的css选择器或HTML元素。类型：string/HTML Element，...
微信小程序实现swiper切换卡内嵌滚动条不显示的方法示例
01-20
在微信小程序中，Swiper组件通常用于实现卡片式的切换效果，而内嵌的Scroll-View则可以实现内容的滚动。然而，默认情况下，Scroll-View在滚动时会显示滚动条，这可能会影响页面的整体美观。本实例主要讲解如何在微信...
Swiper实现导航栏滚动效果
01-18
在一些移动app中，总能看到导航栏是可以滚动，下列例子是在vant的官方文档中看到的，这样的滚动效果利用Swiper也可以实现，效果实现的思路是，根据当前点击的“标签”为起点，当前标签”的位置大于视口的一半时，让...
前端开发笔记--html 黑马程序员2
m0_73805171的博客
10-08 531
路径分为绝对路径和相对路径。
使用html写一个能发起请求的登录界面
2301_79431343的博客
10-03 1398
这是文档类型声明，告诉浏览器这是一个 HTML文档。这是 HTML 文档的根元素，lang="en" 表明文档的主要语言是英语。
html 之 relative 和 absolute
u010194271的博客
10-09 410
结合 relative 和 absolute 的工作原理当一个父元素使用 relative 定位，并且其子元素或伪元素使用 absolute 定位时，子元素会根据父元素的边界进行定位，而不是根据视口或文档流。这个模式非常常见，用于创建复杂的布局效果。
《常见 HTML 标签和属性全解析》
最新发布
一名资深Java工程师的技术分享
10-10 1041
在网页开发的世界里，HTML（超文本标记语言）就像是构建数字大厦的基石。它通过各种标签和属性来定义网页的结构、内容和样式。下面，让我们深入了解一些常见的 HTML 标签和属性。
HTML 常用的块级元素和行内元素
u010194271的博客
10-09 596
块级元素行内元素divspanpah1-h6strongul,olli,emtablei,b,ublockquoteimgbrcodenavlabelaside。
实现Swiper横向循环滚动的HTML/CSS/JS技术
**注意：** 如果Swiper.js库通过CDN引入，需要替换`<script src="path/to/swiper.js"></script>`中的`path/to/swiper.js`为实际的CDN链接。同时，在生产环境中，确保图片的路径正确，以及考虑到不同设备的适配问题。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值