前端实战：小实例2——滚动轮播图

最新推荐文章于 2025-04-09 22:45:55 发布

测试小实战

最新推荐文章于 2025-04-09 22:45:55 发布

阅读量1.9k

点赞数 3

分类专栏：小实例文章标签： javascript css html

本文链接：https://blog.youkuaiyun.com/weixin_43328954/article/details/106485805

版权

本文详细介绍了如何使用HTML、CSS和JavaScript实现一个滚动轮播图。通过浮动布局展示图片，利用绝对定位设置按钮，结合CSS的:hover伪类和JavaScript的onclick事件改变图片的left值来实现切换效果。同时，文章提到了注意事项，如处理边界情况和使用定时器进行自动轮播。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

滚动轮播图的原理类似滑动窗口，放置一个固定窗口，使所有图片无缝连接，然后在固定窗口下滑动，每次在固定窗口中只会看到一个图片。本实例代码中的标签用法可参考菜鸟教程或 W3Cschool 。

实现思路

用 div 封装轮播图，用 img 标签放置所有图片，此处用了五张图片，使图片在同一行中展示（float : left）
在轮播图中放置左右按钮，按钮通过绝对定位叠加在轮播图固定窗口之上（position : absolute），而作为父元素的轮播图使用相对定位，但不设置偏移量（position : relative），原理参照最下面的参考教程
在 CSS 中为左右按钮设置鼠标靠近事件（:hover），在 JS 中为左右按钮设置鼠标点击事件(onclick)，通过改变 CSS 中的 left 值实现图片切换效果
设置轮播图页数下标，给每个下标设置点击事件，在点击下标时先判断向左滑动还是向右滑动，然后滚动切换到对应图片

注意事项

在滑动窗口最左边放多第五张图片，最右边放多第一张图片，即共放置七张图片，但显示效果只看五张
特别处理在第一张图片点击左按钮的情况和在最后一张图片点击右按钮的情况
每一次进行新的定时器设置时都要先将原来的定时器清除
（例如：clearInterval（定时器名称）;）
点击下标切换图片时要特别注意两种情况：
一是当前一次点击还未滑动到目标图片时，点击另一个下标的情况；
二是在即将到某一下标，但该下标对应图片未完全展示时，点击该下标的情况（可能出现图片未完全展现就停止的情况）

HTML + CSS + JavaScript

index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <link rel="stylesheet" href="css/rotationChart1.css" />
    </head>
    <body>
        <!--设置轮播图-->
        <div class="rotation">
            <!--轮播图滑动窗口-->
            <div class="image-list">
                <!--在滑动窗口最前面添加第五张图片，最后面添加第一张图片，用于循环滑动-->
	        <img class="image" src="img/图片5.jpg"/>
	        <img class="image" src="img/图片1.jpg"/>
	        <img class="image" src="img/图片2.jpg"/>
	        <img class="image" src="img/图片3.jpg"/>
	        <img class="image" src="img/图片4.jpg"/>
	        <img class="image" src="img/图片5.jpg"/>
	        <img class="image" src="img/图片1.jpg"/>
	    </div>
	    <!--设置左右按钮-->
	    <a class="button leftBtn">&lt;</a>
	    <a class="button rightBtn">&gt;</a>
	    <!--分页下标-->
	    <ol class="image_page">
		<li class="img1"></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
	    </ol>
        </div>
    </body>
    <script type="text/javascript" src="js/rotationChart1.js" ></script>
</html>

rotationChart1.css

/*设置轮播图（固定窗口）的样式*/
.rotation{
   
	 /*设置轮播图的宽、高*/
	 width: 750px;
	 height: 450px;
	 /*使轮播图居中*/
	 margin: 0 auto;
	 /*position: relative;*/
	 /*超出轮播图位置的内容不展示*/
	 overflow: hidden;
	 /*作为按钮及滑动窗口的父类元素，使用相对定位，但不设置偏移量*/
	 position: relative;
}
/*设置滑动窗口的样式*/
.image-list{
   
	 /*设置宽度为轮播图的n倍(n为图片数量),高度与轮播图一致*/
	 width: 700%;
	 height: 100%;
	 /*设置滑动窗口初始偏移量，开始时显示第一张图片*/
	 left: -750px;
	 top: 0px;
	 /*设置绝对定位，使图片通过滑动方式在固定窗口中显示，而不在固定窗口内的图片也不会影响其他元素的布局*/
	 position: absolute;
}
/*设置滑动窗口中的图片样式*/
.rotation .image-list .image{
   
	 /*图片尺寸与轮播图大小相同,即宽度为滑动窗口宽度的1/n倍,高度一致*/
	 width: 750px;
	 height: 100%;
	 /*所有图片排列在同一行*/
	 float: left;
}
/*设置轮播图的左右按钮样式*/
.rotation .button{
   
 	/*设置按钮的宽、高*/
	 width: 50px;
	 height: 90px;
	 /*使用绝对定位叠加在固定窗口上*/
	 position: absolute;
	 /*相对于父元素的上方边缘进行偏移，根据父类元素求比值，此处按钮高度占据父类元素高度的20%，剩余80%平分后作为按钮与父类元素上下边缘的间距*/
	 top: 40%;
	 /*按钮中的文字进行居中*/
	 text-align: center;
	 /*行高与按钮高度一致，相当于垂直居中*/
	 line-height: 90px;
	 /*按钮背景为黑色透明，0.3为透明程度*/
	 background-color: rgb(0,0,0,0.3);
	 /*按键文字颜色*/
	 color: white;

最低0.47元/天解锁文章