我的大学

       我记得曾经上中学时在学到高尔基的一篇文章时,老师介绍了高尔基的代表作,人生三步曲《童年、在人间、我的大学》,这本书我一直没有读过,不过在过两天我就要把高尔基的这人生的三步曲全部体会完了。最后的阶段,我的大学是影响一生的最重要的四年。毕业设计进行到了尾声,我的大学生活也随之结束了。利用校园最后的几天时间,用笨拙的手指敲下大学四年的零星的体会。

      答辩完毕,整个人跟虚脱了一样,不论结果是什么样,我终将离开这个我生活了四年的校园。没有什么感觉,一个人走在校园里,整个校园都充满着离别。学校的大副标语格外的耀眼,我有点无可奈何的感觉。
      答辩之前我卖了我心爱的电脑,那是我大学中最喜欢的一件东西,陪伴我度过了每个日夜。师兄来搬电脑的那天,我真的有些不舍,一切都没有办法。随后的每个晚上,我都在学校的四周闲逛,去久违的海边转了又转,一切依旧。
      学校举办的毕业晚会上,播放了四年前我们初来报到、刚开学时的录象,时间转瞬而过,那时我们的脸象一张白纸,充满对大学生活的期盼与兴奋。对比今天,每个人得到的结果都不一样,走上了各自不同的路。在这记下我四年的点点经历,如果能给还在学校的学弟学妹一点点启发与提示,我亦将心中窃喜.

### 创建一个展示“我的大学”的HTML页面并包含图片轮播功能 以下是一个完整的 HTML 页面示例,该页面展示了“我的大学”,并集成了图片轮播功能。此代码结合了 HTML、CSS 和 JavaScript 的使用[^1]。 ```html <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>我的大学</title> <style> body { font-family: Arial, sans-serif; margin: 0; padding: 0; background-color: #f4f4f4; } .header { background-color: #4CAF50; color: white; text-align: center; padding: 20px; } .carousel-container { width: 80%; max-width: 960px; margin: 20px auto; overflow: hidden; position: relative; } .carousel-images { display: flex; transition: transform 0.5s ease-in-out; } .carousel-images img { width: 100%; height: 400px; object-fit: cover; } .dots { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); display: flex; } .dots span { cursor: pointer; height: 15px; width: 15px; margin: 0 5px; background-color: #bbb; border-radius: 50%; display: inline-block; transition: background-color 0.3s; } .dots span.active { background-color: #717171; } .description { text-align: center; margin-top: 20px; } </style> </head> <body> <div class="header"> <h1>欢迎来到我的大学</h1> <p>这里展示了我大学的美丽风景和学习环境</p> </div> <div class="carousel-container"> <div class="carousel-images" id="carouselImages"> <img src="university1.jpg" alt="大学风景1"> <img src="university2.jpg" alt="大学风景2"> <img src="university3.jpg" alt="大学风景3"> <img src="university4.jpg" alt="大学风景4"> </div> <div class="dots" id="dots"></div> </div> <div class="description"> <p>我的大学是一所充满活力和学术氛围的地方。</p> </div> <script> const images = document.querySelectorAll('.carousel-images img'); const dotsContainer = document.getElementById('dots'); let currentIndex = 0; // 动态生成圆点 images.forEach((_, index) => { const dot = document.createElement('span'); dot.classList.add('dots'); if (index === 0) dot.classList.add('active'); dotsContainer.appendChild(dot); dot.addEventListener('click', () => showImage(index)); }); function updateDots() { const dots = document.querySelectorAll('.dots span'); dots.forEach((dot, index) => dot.classList.toggle('active', index === currentIndex)); } function showImage(index) { const carouselImages = document.getElementById('carouselImages'); currentIndex = index; carouselImages.style.transform = `translateX(${-currentIndex * 100}%)`; updateDots(); } // 自动播放 setInterval(() => { currentIndex = (currentIndex + 1) % images.length; showImage(currentIndex); }, 3000); </script> </body> </html> ``` 上述代码实现了一个简单的“我的大学”页面,并且包含了图片轮播功能。轮播图通过 CSS 的 `flex` 布局将所有图片排成一行,并通过 JavaScript 控制图片的移动,从而实现轮播效果。 ### 关键点说明 - **图片轮播**:通过设置 `.carousel-images` 的 `transform` 属性来控制图片的左右移动,从而实现轮播效果。 - **圆点导航**:每个图片对应一个圆点,点击圆点可以跳转到对应的图片。 - **自动播放**:通过 `setInterval` 函数实现图片的自动切换,每 3 秒切换一次图片。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值