用javascript实现图片的切换

最新推荐文章于 2024-06-27 12:49:37 发布

傻她你呀

最新推荐文章于 2024-06-27 12:49:37 发布

阅读量1.3k

点赞数

分类专栏： javascript 文章标签： javascript 图片图片切换切换图片

本文链接：https://blog.csdn.net/qq_41672008/article/details/86550656

版权

这篇博客通过JavaScript展示了如何实现在网页中切换图片的功能。通过创建一个包含图片路径的数组，然后利用事件监听器为‘上一张’和‘下一张’按钮绑定点击事件，动态改变img标签的src属性，从而实现图片的切换效果。同时，代码中还包括了用于显示当前图片索引的提示信息更新。

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

先把相应的图片路径添加到存储图片路径的数组imgArr里，之后运行代码就可以实现图片的切换了

以下是代码：

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
       
       <style type="text/css">
           *{
               margin: 0;
               padding: 0;
           }

           #outer{
               /* position: fixed; */
               width: 2000px;
               /* height: 1200px; */
               margin: 0 auto;
               /* padding: 20px; */
               /* background-color: greenyellow; */
               /*设置文本居中*/
               text-align: center;
           }