JS——实现轮播图（完整功能）

最新推荐文章于 2024-07-24 21:47:58 发布

花里梦雨

最新推荐文章于 2024-07-24 21:47:58 发布

阅读量6.3k

点赞数 4

分类专栏： JavaScript 文章标签： css3 前端 javascript

本文链接：https://blog.csdn.net/qq_37369201/article/details/123865058

版权

没有把细节单拎出来讲，但基本上所有重要步骤都在代码里边备注解释了~~

个人认为比较难的地方就是：

怎么在自动播放到最后一张图片后，瞬间切换回第一张图片重新播放？

这里采用了比较取巧的方法，比如我用了四张例图，然后我把第一张再次添加到最后，就是这样：
在这里插入图片描述
然后在setA函数中，做这样一个判断

		if (index >= imgArr.length - 1) {
   
			index = 0
			// 此时我们设置的是，最后一张图片和第一张图片相同，
			// 因此通过css把最后一张瞬间切换到第一张！！！
			ul.style.left = 0
		}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- tool.js中的move函数 -->
		<script src="js/tools.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			* {
   
				margin: 0;
				padding: 0;
			}

			/* 总div的样式 */
			#outer {
   
				/* 图片宽度是640，li设置的坐和右的外边距都是10，所以外容器宽度设置成660px */
				width: 660px;
				height: 639px;
				background-color: #bfa;
				margin: 50px auto;
				padding: 10px 0;
				/* 子绝父相 */
				position: relative;
				/* 裁减掉自身宽度之外的元素 */
				overflow: hidden;
			}

			/* ul的样式 */
			#ul {
   
				/* 去掉点 */
				list-style: none;
				/* （图片宽640+图片间的外边距10+10）x 4 */
				width: 2640px;
				/* 开启绝对定位，方便移动left来显示不同的图片 */
				position: absolute;
				/* 通过js来控制left的值 */
				left: 0px;

			}

			/* 图片放在li中 */
			#ul li {
   
				/* li是块元素，通过浮动使其中的图片排列到一行去 */
				float: left;
				/* 图片间的外边距 */
				margin: