JavaScript 原生实现图片轮播图

图片轮播图实现

1. 实现思路

1. 点击按钮切换图片
   • 获取两个按钮
   • 要切换图片就是要修改 img 标签的 src 属性
     • 获取 img 标签
     • 创建一个数组，用来保存图片的路径
     • 创建一个变量，来保存当前正在显示的图片索引
     • 获取 id 为 info 的 p 元素
     • 设置提示文字
     • 为两个按钮分别绑定单击响应函数
       • 切换到上一张，索引自减
       • 判断 index 是否小于 0
       • 当点击按钮以后，重新设置信息
       • 切换到下一张，使 index 自增
       • 切换图片就是修改 img 的 src 属性
         • 要修改元素的属性 元素。属性 = 属性值

2. 代码实现

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
      * {
        margin: 0;
        padding: 0;
      }
      #outer {
        width: 500px;
        margin: 50px auto;
        padding: 10px;
        background-color: greenyellow;
        text-align: center;
      }
    </style>
    <script type="text/javascript">
  
  
    
      
      
      上一张
      下一张