JS CSS实现简单的无缝轮播效果

最新推荐文章于 2024-07-16 14:17:50 发布

whitexxxkkk

最新推荐文章于 2024-07-16 14:17:50 发布

阅读量619

点赞数

分类专栏：前端文章标签： js html css

本文链接：https://blog.csdn.net/qq_46239972/article/details/108440413

版权

本文介绍了一种使用JavaScript和CSS实现简单无缝轮播效果的方法，不依赖外部库。通过调整元素的left属性和利用CSS过渡效果，实现了在轮播图之间的平滑切换。虽然该方案在跨界面切换时的过渡效果可能存在不均匀的问题，但仍然允许在HTML中动态增删轮播界面。作者也承认这不是最佳方案，欢迎读者提出改进意见。

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

JS CSS实现简单的无缝轮播效果

因为我没有查看过其他人写的无缝轮播代码，所以我的实现方式可能和他人通常的实现方式有较大的差异。

该程序是通过JS配合CSS的过渡效果实现的。

最终效果除在跨越界面切换界面时的过渡效果如果不为匀速则会较不合适外，其他效果和一般无缝轮播效果并无差异。且可以在html中增删界面。

运行效果：
在这里插入图片描述

该程序思路：
界面的left值根据界面标签对象在对象数组中的顺序决定。在两张轮播图之间切换时，根据选择方向更改对象在数组中的顺序，重新设置对象left属性值，不需要被显示窗口看到的界面的过渡效果时间值设为0s，需要的则使用过渡效果。
在点击下方按钮，跨轮播图切换时则是算出多个界面使用两个界面切换的时间的平均时间，再使用这个时间应用到每一张需要切换的界面的过渡效果上即可。

代码：
下面是html、css和js的相关代码，可供参考。
但请注意该方案并不是最好的无缝轮播的解决方案，只是众多方案中可能较差的一种。

html：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	
		<link rel="stylesheet" type="text/css" href="css/new_file.css"/>
		<script type="text/javascript" src="js/new_file_3.js"></script>
	</head>
	
	<body>
		
		<div class="box">
			<div class="lrButtons" style="left: 0px;"> < </div>
			<div class="lrButtons" style="left: 920px"> > </div>
			
			<ul class = 'buttons'>
				<li style="background-color: blue;">1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>
				<li>5</li>
			</ul>
			
			<ul class="windows">
				<!-- <li style="background-image: url(img/1.jpg);">第一界面</li>
				<li style="background-image: url(img/2.jpg);">第二界面</li>
				<li style="background-image: url(img/3.jpg);">第三界面</li> -->
				<li style="background-color: brown;">第一界面</li>
				<li style="background-color: burlywood;">第二界面