用javascript实现图片切换

百变鹏仔 2个月前 (10-30) #前端问答

文章标签图片

随着互联网应用的发展，网站的美观和互动性成为吸引访问者的重要因素。在网页设计中，图片的运用是不可或缺的。在页面中设置一个图片切换效果是一个很好的方式来吸引用户的注意力。在本文中，我们将用javascript来实现一个简单的图片切换效果。

首先，我们需要创建一个HTML文件。在文件头部，我们可以添加CSS样式和JavaScript脚本的引用。在body标签中，创建一个div元素来包裹我们的图片。如下所示：

<!DOCTYPE HTML><html><head>  <title>图片切换</title>  <style type="text/css">    #img {      width: 600px;      height: 400px;      margin: 0 auto;      position: relative;    }    #img img {      position: absolute;      left: 0;      top: 0;      opacity: 0;      transition: opacity 1s ease-in-out;    }    #img img.active {      opacity: 1;    }  </style>  <script src="img_switch.js"></script></head><body>  <div id="img">    <img  src="image1.jpg" class="active" / alt="用javascript实现图片切换" >    <img  src="image2.jpg" / alt="用javascript实现图片切换" >    <img  src="image3.jpg" / alt="用javascript实现图片切换" >    <img  src="image4.jpg" / alt="用javascript实现图片切换" >  </div></body></html>

在CSS样式中，我们设置了#img div元素的宽度和高度，并定义了图片的位置为relative。同时设置每个图片的位置为absolute来使它们可以叠加在一起。

在这里，我们用opacity属性设置图片的透明度。active类代表当前展示的图片。当切换到下一张图片时，我们将当前展示的图片的opacity值设为0，然后将下一张图片的opacity值设为1。这样可以产生逐渐消失和逐渐出现的效果。

接下来，我们将创建一个JavaScript脚本文件img_switch.js。代码如下所示：

立即学习“Java免费学习笔记（深入）”；

var i = 0; // 初始化计数器var images = document.querySelectorAll("#img img"); // 获取所有的图片元素var len = images.length; // 获取图片的总数function switchImg() {  // 隐藏当前展示的图片  images[i].classList.remove("active");  // 获取下一个图片的索引位置  i = (i + 1) % len;  // 显示下一张图片  images[i].classList.add("active");}// 每隔5秒切换一次图片setInterval(switchImg, 5000);

在这个JavaScript脚本中，我们首先定义了一个计数器变量i，然后获取了所有的图片元素，并存储在变量images中。我们还定义了变量len来存储图片的总数。

在switchImg函数中，我们首先去掉当前展示的图片的active类，然后计算出下一个图片的索引位置，并添加active类来显示下一张图片。我们使用setInterval函数来定期调用switchImg函数，实现自动切换图片的功能。

最后，我们在HTML文件中引用该JavaScript脚本，以触发自动切换效果。

这就是用JavaScript实现图片切换的方法。我们可以根据需要自定义样式和脚本，实现更加酷炫的效果。

文章推荐

用javascript实现图片切换

javascript里怎么输入

网页关闭javascript

javascript怎么实现异步

javascript隐藏的元素显示属性

javascript要全部记住吗