图片加到数组与按钮动态添加

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>实战2-经典轮播图</title>
    <style>
        /* ! 3. 轮播图 */
        .slider {
          max-width: 750px;
          min-width: 320px;
          margin: auto;
          padding: 0 10px;
        }
        .slider .imgs {
          /* 图片容器必须要有高度,否则下面图片不能正常显示 */
          max-height: 235px;
        }
        .slider .imgs img {
          /* 图片完全充满父级空间显示 */
          height: 100%;
          width: 100%;
          /* 图片带有圆角 */
          border-radius: 10px;
          /* 默认图片全部隐藏,只有有active的图片才显示 */
          display: none;
        }
        /* 默认显示第一张 */
        .slider .imgs  a  img.active {
          display: block;
        }
        /* 轮播图按钮组 */
        .slider .btns {
          /* 按钮水平一排显示,用flex,且水平居中 */
          display: flex;
          place-content: center;
        }
        .slider .btns span {
          /* 按钮宽高相同,确定显示成一个正圆 */
          width: 10px;
          height: 10px;
          /* 加上红色背景和数字是为了布局时可以看到,一会更去掉 */
          background-color: #333;
          /* 50%可确保显示为正圆 */
          border-radius: 50%;
          /* 按钮上外边距负值,可将它上移,可移动到图片中下方 */
          margin: -16px 5px 5px;
        }
        .slider .btns span.active {
          background-color: #fff;
        }
      </style>
</head>
<body>
    <div class="slider">
        <!-- 图片容器 -->-
        <div class="imgs"></div>
        <div class="btns"> </div>
      </div>
      <script>
   //获取照片盒子的元素
   const imgs = document.querySelector('.imgs');
   const btns = document.querySelector('.btns');
  //  console.log(imgs);
// 创建照片组
const imgGroup = ["../0728/images/banner-1.jpg","../0728/images/banner-2.jpg","../0728/images/banner-3.jpg"];
for(let i = 0 ; i < imgGroup.length ; i++){
    const aa = document.createElement('a');
    // 在 imgs照片组内添加aa的标签
    imgs.append(aa);
    const span = document.createElement('span');
    // 在 btns按钮组内添加的标签
    btns.append(span);
    //     a标签里面放img
    let img = document.createElement('img');
  aa.append(img)
    }
    const img1 = document.querySelectorAll('.imgs a img');
    //这一步是给第一张图片加上active图片
    img1[0].classList.add('active');
    //遍历img1给img标签添加对于的东西
    img1.forEach((item,k)=>{
      // 变量添加属性
      item.src=imgGroup[k];
      // 遍历添加自定义属性
      item.setAttribute('data-index',k+=1);
    })
    //获取所有按钮
    const btns1 = document.querySelectorAll('.btns span') 
  //给第一个按钮添加样式
  btns1[0].classList.add('active');
  //遍历按钮组给对应的按钮添加data-index
  btns1.forEach((item,k)=>item.setAttribute('data-index',k+=1));
//遍历按钮添加点击事件
btns1.forEach(function(item1,k){
  //遍历拿到所有按钮
  item1.onclick = function(){
    //点击按钮重新遍历按钮类数组并且清空active类
    btns1.forEach(item2=>item2.classList.remove('active'))
    // 点击时将类添加
    item1.classList.add('active')
    //遍历图片类数组
    img1.forEach((item,k)=>{
      //删除图片的active类
      item.classList.remove('active')
      // 判断按钮和图片的自定义属性的值是否一样 一样的时候就给图片添加active类
      if(item1.dataset.index === item.dataset.index){
        item.classList.add('active')
      }
    })
    console.log(k);
// console.log('================');
// console.log('================');
  }
})
setInterval(
        function (arr) {
          // 从头部取一个
          let index = arr.shift();
          //   console.log(arr);
          //   将一个自定义的点击事件,分配给与当前索引对应的按钮上就可以了
          btns1[index].dispatchEvent(new Event('click'));
          // 把头部取出来的,再尾部再追加上去
          arr.push(index);
        },
      1000,
        Object.keys(btns1)
      );
// console.log('================');
 </script>
</body>
</html>

选项卡

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>实战1-经典选项卡</title>
<style>
        /* 初始化 */
        * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      a {
        color: #555;
        text-decoration: none;
      }
      li {
        list-style: none;
      }
      .box {
        width: 30em;
        border: 1px solid #000;
        margin: 2em auto;
      }
      .box nav {
        height: 2em;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        text-align: center;
        line-height: 2em;
      }
      .box nav a.active {
        background-color: #ddd;
        color: red;
      }
      .box .list {
        padding: 1em;
        display: none;
      }
      .box .list.active {
        display: block;
        background-color: #ddd;
      }
      .box .list a {
        font-size: smaller;
      }
      .box .list a:hover {
        color: red;
      }
</style>
</head>
<body>
    <div class="box">
        <!-- 1. 标签 -->
        <nav class="menu">
          <a href="" class="active" data-index="1">安徽</a>
          <a href="" data-index="2">全国</a>
          <a href="" data-index="3">国际</a>
        </nav>
        <!-- 2. 内容列表 -->
        <ul class="list active" data-index="1">
          <li><a href="">安徽也想治愈你的精神内耗！</a></li>
          <li><a href="">安徽也想治愈你的精神内耗！</a></li>
          <li><a href="">安徽也想治愈你的精神内耗！</a></li>
          <li><a href="">安徽也想治愈你的精神内耗！</a></li>
          <li><a href="">安徽也想治愈你的精神内耗！</a></li>
        </ul>
        <ul class="list" data-index="2">
          <li><a href="">第五届数字中国建设30项最佳成果出炉</a></li>
          <li><a href="">第五届数字中国建设30项最佳成果出炉</a></li>
          <li><a href="">第五届数字中国建设30项最佳成果出炉</a></li>
          <li><a href="">第五届数字中国建设30项最佳成果出炉</a></li>
          <li><a href="">第五届数字中国建设30项最佳成果出炉</a></li>
        </ul>
        <ul class="list" data-index="3">
          <li><a href="">佩洛西访台闹剧，令美方骑虎难下</a></li>
          <li><a href="">佩洛西访台闹剧，令美方骑虎难下</a></li>
          <li><a href="">佩洛西访台闹剧，令美方骑虎难下</a></li>
          <li><a href="">佩洛西访台闹剧，令美方骑虎难下</a></li>
          <li><a href="">佩洛西访台闹剧，令美方骑虎难下</a></li>
        </ul>
      </div>
<script>
//   事件冒泡  拿到父类 导航     ,然后通过父类知道是哪个子类触发
const menu = document.querySelector('.menu');
menu.addEventListener('click', show, false);
// menu.addEventListener('click', show, false);
function show(){
    // 禁用a标签的默认跳转行为
    event.preventDefault();
    const btns = [...event.currentTarget.children];
    console.log(btns);
    console.log('----');
    console.log(event.target);
    console.log('----');
   const lists = document.querySelectorAll('.list');
   console.log(lists);
//    1、将原来的 nav的标签高亮标签  去掉，并把当前正在被点击的标签设置为高亮
btns.forEach (item => item.classList.remove('active')) ;
// 拿到当前时间触发者
console.log(event.target);
event.target.classList.add('active');
    // 2. 内容切换与标签切换原理一样,只不过多一个查询过程 data-index
    lists.forEach (item => item.classList.remove('active')) ;
    lists.forEach(lists => {
        if (lists.dataset.index == event.target.dataset.index){
            lists.classList.add('active');
        }
    });
//  简化 find()  一组里面拿到一个是数组的api    但是lists 不是类数组需要【】
// [...lists].find(list => list.dataset.index === event.target.dataset.index).classList.add('active');
}
</script>
</body>
</html>

数组排序、更新、删除

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数组api-4</title>
</head>
<body>
    <script>
// sort()  排序 默认将数组成员当成字符串
let arr = [1,2,3,6,5,4];
console.log(arr);
console.log(arr.sort());
// 升序
console.log(arr.sort(function(a,b){
  return a-b;
}));
// 降序
console.log(arr.sort(function(a,b){
  return b-a;
}));
// 简化
console.log(arr.sort((a,b) => b-a));
   // join: 将数组转为字符串   array -> string
console.log(arr.join());
console.log(arr.join('*'));
   // slice: 子元素  支持负数
 arr = [10,11,12,14,151,161,7];
// 索引  ，从左到右 1  到5   个
// 从右到左  -3  到 -1   个
console.log(arr.slice(-3,-1));
// 删除 splice: 删除子元素
console.log(arr);
// 1: 表示起始索引, 2: 表示删除的数量,返回被删除元素组成的数组
console.log(arr.splice(1,3));
console.log('===');
     // update, 传入与删除数量相同的参数,来替换掉被删除的元素
     console.log(arr);
     console.log('------');
     console.log(arr.splice(1, 2, 'a', 'b'));
     console.log('------');
        console.log(arr);
        console.log('===');
      //   insert: 删除数量为0,就是新增操作,当然要传入新增的元素
      console.log(arr.splice(1, 0, 'a', 'b', 'c'));
      console.log(arr);
    </script>
</body>
</html>

数组迭代

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数组api-3</title>
</head>
<body>
    <script>
    //    迭代方法： 逐个取出数组成员，并逐个处理一遍 
    //   方法一：forEach  , map
// forEach((item,index,arr)=>())    注意没有返回值，适合dom操作
let arr = [1,2,3,4,5,6];
//  遍历每个值item    index  索引     
let res = arr.forEach((item,index,arr) =>{
    console.log('key:'+index,'value:'+item );
    console.log(arr);
    // 添加文档 
    document.body.append( item );
})
    //   map() 参数 与 forEach  一样，但是有返回值 数组  结果有用 用map
    res =arr.map(item => {
        return item*2
    });
    console.log(res);
//   方法二： every  some   断言函数，返回 true  或false
// every  全部满足  返回 true      否则 false
console.log(arr.every(function(item){
     return item >3;
} ));
console.log(arr.every(function(item){
     return item >0;
} ));
// 简化
console.log(arr.every(item=> item >0));
console.log('=======');
// some  部分满足  返回 true      否则 false
console.log(arr.some(function(item){
     return item >3;
} ));
console.log('=======');
//  方法三  filter   返回满足条件的新数组
console.log(arr.filter(item => item>3));
// 获取数组中第一个满足条件的成员
console.log(arr.filter(item => item>3)[0]);
// 简化
// 获取数组中第一个满足条件的成员
console.log(arr.find(item => item>3));
// 获取数组中第二个满足条件的成员的索引 
console.log(arr.findIndex(item => item>3));
console.log('开始');
      // reduce: 归并                                    ,index, arr是可选参数
    //   res = arr.reduce(function (acc, cur, index, arr) 
res =  arr.reduce(function(acc,cur,index,arr){
    console.log(arr);
    console.log('----');
    console.log(acc,cur, index, arr);
    console.log('----');
    return acc + cur ;
    console.log('=======');
// 默认初值0   可以是  其他数值
},0);
console.log('简化');
// 简化
res = arr.reduce((acc, cur) => acc + cur, 10);
console.log(res);
    </script>
</body>
</html>

数组添加移除

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数组api-2</title>
</head>
<body>
    <script>
    let  arr = [];
    // push  ：从数组尾部添加、追加
  arr.push(10);
  arr.push(20);
  arr.push(30);
   // pop  ：从数组尾部删除
  arr.pop();
   // pop  ：从数组头部添加
   arr.unshift(40);
   arr.unshift(50);
    // shift ：从数组头部删除
    arr.unshift();
console.log(...arr);
console.log('==========');
// 队列
// 1、push  shift  尾部追加，头部删除
arr.push(90,100,120);
arr.shift();
console.log(...arr);
console.log('==========');
// 2、pop  unshift  尾部删除  头部追加，
arr.unshift(130,150,160);
arr.pop();
console.log(...arr);
console.log('==========');
    </script>   
</body>
</html>

数组转换

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数组api-1</title>
</head>
<body>
    <script>
        let arr = [1,2,3,'hello',false,{x:1,y:2},[5,6,7],function(){console.log('word');}];
        console.log(arr);
        //  。。。 离散值打包到数组   ，可以将类数组转为数组
        console.log(...arr);
        console.log([...arr]==arr);
        console.log([...arr][1] ==arr[1]);
    //    类数组
    const obj =  {
        // 注意索引
        0:1 ,
        1 :2,
        //  注意一定要有length
        length :2,
    }
    // 对象
console.log(obj);
// 对象转数组
console.log(Array.from(obj));
// 类数组转为真数组两种方式
// 一、。。。rest    要求对象接口有可迭代器接口
// 二 。  Array。from   不需要
        </script>
</body>
</html>

批改老师：

PHPz

批改状态：合格

老师批语：

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

markdownm语法

2022-07-02 10:53:43

图片加到数组与按钮动态添加

选项卡

数组排序、更新、删除

数组迭代

数组添加 移除

数组转换

数组添加移除