全屏滚动图片网站制作（HTML5＋JS＋jQuery）——（HTML＋CSS篇）

最新推荐文章于 2024-09-08 06:30:51 发布

Zhiyuan_Ma

最新推荐文章于 2024-09-08 06:30:51 发布

阅读量3.2k

点赞数 1

分类专栏： Web前端文章标签：制作网站图片全屏滚动源码

本文链接：https://blog.csdn.net/Zhiyuan_Ma/article/details/51582517

版权

本文展示了如何使用HTML5、JavaScript和jQuery创建一个全屏滚动图片网站的效果，支持齿轮滚动切换和横竖屏切换。文章提供了详细的HTML和CSS源代码，并附带了效果说明。

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

近段时间全屏滚动图片网站特效特别流行，一时兴趣，结合最近学习的JS以及jQuery制作出小成果。支持齿轮滚动切换，支持横竖屏切换。

本文只提供一种实现思路，仅供参考。欢迎交流。

注：本页面由HTML5+JS制作，引用jQuery框架，背景图片放在images文件夹（自行创建，图片命名根据代码改动）

HTML＋CSS源代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>页面切换</title>
	<style type="text/css">
		h1,body,html{
			padding: 0;
			margin: 0;
		}
		body{
			font-family: Arial,"Microsoft YaHei","Hiragino Sans GB",sans-serif;
		}
		html,body{
			height: 100%;
			overflow: hidden;
		}
		h1{
			font-size: 6em;
			font-weight: normal;
		}
		p{
			font-size: 2em;
			margin: