创建简单的图片轮播效果

Growing Hacker

已于 2023-06-01 22:41:47 修改

阅读量270

点赞数

文章标签： html javascript css

于 2023-06-01 19:33:26 首次发布

本文链接：https://blog.csdn.net/m0_63117721/article/details/130994663

版权

简介：在本篇博客中，我们将学习如何使用HTML、CSS和JavaScript创建一个简单的图片轮播效果。通过这个轮播图，我们可以展示一系列图片，并在一定时间间隔内自动切换图片。

代码解析：

HTML结构部分：代码中的HTML部分定义了一个div容器，用于容纳轮播图和控制按钮。轮播图使用img标签，通过src属性引用各个图片文件。控制按钮使用ul和li标签创建，每个li标签对应一个图片。

<body>
<div class="slideshow" οnmοuseοver="RunOrStop(flag=false)" οnmοuseοut="RunOrStop(flag=true)">
<img src="./img/1.jpg" alt="Image 1">
<img src="./img/2.jpg" alt="Image 2">
<img src="./img/3.jpg" alt="Image 3">
<img src="./img/5.jpg" alt="Image 4">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
</body>

2.CSS样式部分：代码中的CSS部分定义了轮播图容器（.slideshow）和图片（img）的样式。其中，轮播图容器的宽度、高度和overflow属性用于确定容器的尺寸和溢出内容的处理方式。图片使用width和height属性使其适应容器，并通过display属性的none值将所有图片隐藏起来。控制按钮（li）使用了一些样式，如宽度、高度、边框、边框半径等，以及相对定位和偏移来实现垂直居中效果。

<style>
.slideshow {
width: 600px; /* 轮播图容器的宽度 */
height: 400px; /* 轮播图容器的高度 */
overflow: hidden; /* 隐藏超出容器范围的内容 */
text-align: center;
margin: 0 auto;
}
.slideshow img {
width: 100%; /* 图片宽度填充容器 */
height: auto; /* 根据宽度等比缩放高度 */
display: none; /* 隐藏所有图片 */
border-radius: 12px;
}

ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
text-align: center; /* 设置文本水平居中 */
position: relative; /* 设置相对定位 */
top: -45px; /* 将 ul 向上偏移 45px */
}

li {
display: inline-block; /* 将列表项显示为行内块元素 */
width: 30px; /* 设置列表项的宽度 */
height: 30px; /* 设置列表项的高度 */
border: 1px solid #000; /* 设置边框样式 */
border-radius: 50%; /* 设置边框为圆形 */
margin-right: 10px; /* 可根据需要调整间距 */
text-align: center; /* 设置文本水平居中 */
line-height: 30px; /* 设置行高等于列表项的高度，实现垂直居中 */
background-color: white;
}

</style>

3.JavaScript部分：代码中的JavaScript部分使用DOM操作获取轮播图容器、图片和控制按钮元素。通过currentIndex变量追踪当前显示的图片索引。showImage函数用于显示指定索引的图片，并更新当前索引。startSlideshow函数用于自动切换图片，通过setInterval函数和定时器实现。最后，通过调用startSlideshow函数启动轮播图，并添加鼠标移入移出事件监听函数，用于控制轮播的开始和停止。

<script>
// 获取轮播图容器和所有图片元素
var slideshow = document.querySelector('.slideshow');
var images = slideshow.getElementsByTagName('img');
var li=slideshow.getElementsByTagName('li');
// 定义当前显示的图片索引
var currentIndex = 0;

// 显示指定索引的图片
function showImage(index) {
// 隐藏当前显示的图片
images[currentIndex].style.display = 'none';
li[currentIndex].style.backgroundColor="white";

// 显示新的图片
images[index].style.display = 'block';
li[index].style.backgroundColor="blue";

// 更新当前索引
currentIndex = index;
}
var itv;
// 自动切换图片
function startSlideshow() {
itv= setInterval(function() {
// 计算下一张图片的索引
var nextIndex = (currentIndex + 1) % images.length;

// 显示下一张图片
showImage(nextIndex);
}, 3000); // 切换间隔时间，单位为毫秒
}

// 开始轮播
startSlideshow();
function RunOrStop(flag){
if(flag){
startSlideshow();
}else{
clearInterval(itv);
}
}

</script>

思路总结部分：使用HTML、CSS和JavaScript创建一个简单的图片轮播效果。这个轮播图可以在一定时间间隔内自动切换图片，并提供控制按钮供用户手动切换。

首先，我们需要创建HTML结构。代码中的HTML部分包含一个div容器，用于容纳轮播图和控制按钮。我们使用img标签添加图片，通过src属性引用不同的图片文件。同时，我们使用ul和li标签创建控制按钮，每个li标签对应一个图片。

接下来，我们为轮播图和控制按钮添加CSS样式。在CSS部分，我们定义了轮播图容器（.slideshow）的宽度、高度和溢出处理方式。我们还定义了图片（img）的样式，使其适应容器，并使用display属性的none值隐藏所有图片。为了创建控制按钮，我们设置了li标签的样式，包括宽度、高度、边框、边框半径等，并使用相对定位和偏移来实现垂直居中效果。

现在，让我们来编写JavaScript代码来实现轮播功能。首先，我们使用DOM操作获取轮播图容器、图片和控制按钮元素。我们使用currentIndex变量来追踪当前显示的图片索引。showImage函数用于显示指定索引的图片，并更新当前索引。startSlideshow函数用于自动切换图片，我们使用setInterval函数和定时器来实现切换的间隔时间。最后，我们调用startSlideshow函数启动轮播，并为轮播图容器添加鼠标移入和移出事件监听函数，以便在鼠标悬停时停止自动切换，移出时继续自动切换。

以上就是创建简单的图片轮播效果的代码和解析。通过这个轮播图，我们可以展示一系列图片，并在一定时间间隔内自动切换图片。你可以根据需要修改代码中的样式和图片，以创建符合自己需求的图片轮播效果。

希望本篇博客对你有所帮助！如果你有任何问题或疑问，请随时提问。

Growing Hacker

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
创建简单的图片轮播效果

最后，我们调用startSlideshow函数启动轮播，并为轮播图容器添加鼠标移入和移出事件监听函数，以便在鼠标悬停时停止自动切换，移出时继续自动切换。最后，通过调用startSlideshow函数启动轮播图，并添加鼠标移入移出事件监听函数，用于控制轮播的开始和停止。我们还定义了图片（img）的样式，使其适应容器，并使用display属性的none值隐藏所有图片。为了创建控制按钮，我们设置了li标签的样式，包括宽度、高度、边框、边框半径等，并使用相对定位和偏移来实现垂直居中效果。希望本篇博客对你有所帮助！
复制链接

扫一扫