Html文字轮播源代码,无需加插件

滚动代码,如下图。

文字向上滚动,当鼠标移动上去的时候,文字会静止。


当鼠标移动上去的时候



源代码:

<marquee  behavior="scroll" direction="up" height="300" οnmοuseοver=this.stop() οnmοuseοut=this.start() scrollamount=3>
					<span style="color:#000000;">        学院(Liy),是一所具有百年师范教育历史的广东省属普通本科院校,坐落在中国大陆最南端的美丽港城湛江市。学校办学历史可追溯到1636年的“雷阳书院”。2000年成为全国第一所通过教育部本科教学工作合格评估的师范院校。
					</span><br/>
					<span style="color: #000000;">   截至2013年,学校设有本科专业59个(其中师范类专业30个),涵盖教、文、法、经、史、理、工、农、管、艺等10大学科门类;国家级特色专业2个、广东省级特色专业6个,全日制在校本科生近人,教职工多名,其中教授名、博士人。</span>
			</marquee>

  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是一个简单的 HTML 手动轮播源代码,可以让用户通过点击按钮来切换图片: ```html <!DOCTYPE html> <html> <head> <title>手动轮播</title> <style type="text/css"> .carousel { position: relative; width: 500px; height: 300px; margin: 0 auto; overflow: hidden; } .carousel img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1s ease-in-out; } .carousel img.active { opacity: 1; } .carousel button { position: absolute; top: 50%; transform: translateY(-50%); padding: 10px; background-color: #ccc; border: none; cursor: pointer; font-size: 18px; } .carousel button.prev { left: 0; } .carousel button.next { right: 0; } </style> </head> <body> <div class="carousel"> <img src="image1.jpg" class="active"> <img src="image2.jpg"> <img src="image3.jpg"> <button class="prev">上一张</button> <button class="next">下一张</button> </div> <script type="text/javascript"> var carousel = document.querySelector('.carousel'); var prevBtn = carousel.querySelector('.prev'); var nextBtn = carousel.querySelector('.next'); var images = carousel.querySelectorAll('img'); var currentIndex = 0; function showImage(index) { images[currentIndex].classList.remove('active'); images[index].classList.add('active'); currentIndex = index; } prevBtn.addEventListener('click', function() { var index = currentIndex - 1; if (index < 0) { index = images.length - 1; } showImage(index); }); nextBtn.addEventListener('click', function() { var index = currentIndex + 1; if (index >= images.length) { index = 0; } showImage(index); }); </script> </body> </html> ``` 在这个例子中,我们使用了 `position: absolute` 来将图片定位在轮播容器的左上角。初始时,第一张图片被标记为 `active`,其余的图片的透明度为 0。点击上一张或下一张按钮时,我们会计算出要显示的图片的索引,然后通过 `classList` 来添或删除 `active` 类,从而切换图片的显示。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值