js经典案例实战

一、经典选项卡

demo1.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>经典选项卡案例</title>
    <link rel="stylesheet" href="css/demo1.css" />
  </head>
  <body>
    <div>
      <ul class="tab">
        <li data-index="1" class="navigation state">水果</li>
        <li data-index="2" class="navigation">手机</li>
        <li data-index="3" class="navigation">汽车</li>
      </ul>
      <ul data-index="1" class="item state">
        <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 data-index="2" class="item hidden">
        <li><a href="">华为</a></li>
        <li><a href="">Vivo</a></li>
        <li><a href="">OPPO</a></li>
        <li><a href="">小米</a></li>
        <li><a href="">魅族</a></li>
      </ul>
      <ul data-index="3" class="item hidden">
        <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>
  </body>
  <script src="js/demo1.js"></script>
</html>

demo1.css

* {
  padding: 0px;
  margin: 0px;
  box-sizing: border-box;
}
a {
  text-decoration: none;
}
ul {
  list-style: none;
}
body {
  display: flex;
  justify-content: center;
}
div {
  width: 300px;
  height: 340px;
}
div > ul:nth-of-type(1) {
  display: flex;
}
.hidden {
  display: none;
}
.navigation {
  width: 100px;
  height: 40px;
  text-align: center;
  line-height: 40px;
}
.navigation:hover {
  cursor: pointer;
}
.state {
  background: rgb(204, 204, 204);
}
.item {
  width: 300px;
  height: 300px;
}
.content > li {
  height: 30px;
  text-align: center;
  padding: 10px 0;
}

demo1.js

//1.获取导航ul
var tab = document.querySelector(".tab");
//console.log(tab);
//2.获取详情页
var items = document.querySelectorAll(".item");
//3.给导航添加点击事件(事件代理/事件委托/冒泡)
tab.addEventListener("click", show, false);
tab.addEventListener("mouseover", show, false);
//声明show函数
function show(ev) {
  //ev:事件对象
  //ev.type:事件类型，如click,mouseover...
  //console.log(ev.type);
  //ev.target事件的触发者
  //console.log(ev.target);
  //ev.currentTarget事件绑定者
  //console.log(ev.currentTarget);
  //1.清空所有选项卡高亮显示
  //childNodes返回数组
  ev.currentTarget.childNodes.forEach(function (item) {
    if (item.nodeType === 1) item.classList.remove("state");
  });
  //2.将用户点击的当前选项卡高亮显示
  ev.target.classList.add("state");
  //3.清空原有列表
  items.forEach(function (item) {
    item.classList.add("hidden");
    item.classList.remove("state");
  });
  //4.将选项卡对应的内容进行切换（根据导航和详情中的data-index）
  items.forEach(function (item) {
    console.log(item);
    //console.log(ev.target.dataset.index, item.dataset.index);
    if (ev.target.dataset.index === item.dataset.index) {
      item.classList.add("state");
      item.classList.remove("hidden");
    }
  });
}

二、懒加载

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>懒加载</title>
    <style>
      img {
        width: 400px;
      }
      body {
        display: flex;
        flex-flow: column;
      }
    </style>
  </head>
  <body>
    <img src="images/moban.jpg" alt="" data-src="images/1.jpg" />
    <img src="images/moban.jpg" alt="" data-src="images/2.jpg" />
    <img src="images/moban.jpg" alt="" data-src="images/3.jpg" />
    <img src="images/moban.jpg" alt="" data-src="images/4.jpg" />
    <img src="images/moban.jpg" alt="" data-src="images/5.jpg" />
    <img src="images/moban.jpg" alt="" data-src="images/6.jpg" />
    <img src="images/moban.jpg" alt="" data-src="images/7.jpg" />
    <img src="images/moban.jpg" alt="" data-src="images/8.jpg" />
    <img src="images/moban.jpg" alt="" data-src="images/9.jpg" />
    <img src="images/moban.jpg" alt="" data-src="images/10.jpg" />
    <img src="images/moban.jpg" alt="" data-src="images/11.jpg" />
    <img src="images/moban.jpg" alt="" data-src="images/12.jpg" />
    <img src="images/moban.jpg" alt="" data-src="images/13.jpg" />
    <img src="images/moban.jpg" alt="" data-src="images/14.jpg" />
  </body>
  <script>
    //1.获取所有的图片
    var imgs = document.querySelectorAll("img");
    //2.获取文档高度/视口高度
    var clientHeight = document.documentElement.clientHeight;
    //3.监听滚动事件
    window.addEventListener(
      "scroll",
      function () {
        lazyload(imgs, clientHeight);
      },
      false
    );
    //4.懒加载函数
    function lazyload(imgs, clientHeight) {
      //获取文档的滚动大小
      var scrollTop = document.documentElement.scrollTop;
      //遍历图片，判断是否进入到可视区
      imgs.forEach(function (img) {
        if (img.offsetTop <= clientHeight + scrollTop) {
          img.src = img.dataset.src;
        }
      });
    }
  </script>
</html>

三、轮播图

demo3.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>轮播图</title>
    <link rel="stylesheet" href="css/demo3.css" />
  </head>
  <body>
    <div class="box" id="box">
      <img src="images/1.jpg" alt="" data-index="1" class="slider active" />
      <img src="images/2.jpg" alt="" data-index="2" class="slider" />
      <img src="images/3.jpg" alt="" data-index="3" class="slider" />
      <img src="images/4.jpg" alt="" data-index="4" class="slider" />
      <div class="point-list"></div>
      <span class="skip prev">&lt;</span>
      <span class="skip next">&gt;</span>
    </div>
  </body>
  <script src="js/demo3.js"></script>
</html>

css/demo3.css

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
ul,
li {
  list-style: none;
}
.box {
  position: relative;
  width: 500px;
  height: 300px;
  margin: 0 auto;
}
.slider {
  width: 500px;
  height: 300px;
  display: none;
}
.box .slider.active {
  display: block;
}
.box .point-list {
  position: absolute;
  left: 43%;
  top: 270px;
}
.box .point-list .point {
  display: inline-block;
  width: 12px;
  height: 12px;
  background: #fff;
  border-radius: 100%;
  margin: 0 5px;
}
.box .point-list .point:hover {
  cursor: pointer;
}
.box .point-list .point.active {
  background: rgb(241, 3, 3);
}
.skip {
  position: absolute;
  display: inline-block;
  width: 30px;
  height: 40px;
  top: 130px;
  font-size: 40px;
  text-align: center;
  line-height: 40px;
  background: #000;
  color: #fff;
  opacity: 0.4;
}
.prev {
  left: 0;
}
.next {
  right: 0;
}
.skip:hover {
  cursor: pointer;
  opacity: 0.7;
  color: red;
}

demo3.js

window.onload = function () {
  //获取轮播图片
  var imgs = document.querySelectorAll("img");
  //获取小圆点组
  var pointList = document.querySelector(".point-list");
  //动态生成小圆点
  imgs.forEach(function (img, index) {
    //根据图片数量创建对应的span元素
    var span = document.createElement("span");
    //给第一个span元素添加特殊样式
    if (index == 0) span.classList.add("point", "active");
    //其它span元素为默认样式
    span.classList.add("point");
    //给当前小圆点添加自定义的data-index
    span.dataset.index = img.dataset.index;
    //把所有span元素添加到小圆点组中显示
    pointList.appendChild(span);
  });
  //获取所有的小圆点
  var points = document.querySelectorAll(".point");
  /*————————————————————————————————轮播功能————————————————————————————————————*/
  //获取最顶层div
  var box = document.querySelector("#box");
  console.log(box);
  //创建定时器变量，索引变量
  var timer = null;
  var index = 0;
  //创建定时器并自动执行
  timer = setInterval(autoPlay, 2000);
  //当鼠标移入div元素时清空定时器
  box.addEventListener("mouseover", test, false);
  //当鼠标离开元素时触发定时器
  box.addEventListener(
    "mouseout",
    function () {
      timer = setInterval(autoPlay, 2000);
    },
    false
  );
  //鼠标离开元素时的定时器回调函数，index自增
  function autoPlay() {
  //如果自增index大于图片数量时，让索引为0
    if (++index >= imgs.length) index = 0;
    //定义函数把index值传进去
    changeImg(index);
  }
  function changeImg(currIndex) {
    console.log(currIndex);
    //清空所有样式，隐藏所有图片
    for (var i = 0; i < imgs.length; i++) {
      points[i].classList.remove("active");
      imgs[i].classList.remove("active");
    }
    //给有当前索引的图片和小点添加样式并显示
    points[currIndex].classList.add("active");
    imgs[currIndex].classList.add("active");
  }
  //鼠标移入时的回调函数，清除定时器
  function test() {
    clearInterval(timer);
    console.log("清除定时器");
  }
  //给小圆点添加事件(代理)
  pointList.addEventListener("click", function (ev) {
    imgs.forEach(function (img) {
      if (img.dataset.index === ev.target.dataset.index) {
        imgs.forEach(function (img) {
          img.classList.remove("active");
        });
        img.classList.add("active");
        //设置与当前图片对应的小圆点高亮显示
        //因为这个功能要多处使用，这里将它声明为公共函数
        setPointActive(img.dataset.index);
      }
    });
  });
  //设置与当前图片对应的小圆点高亮显示
  function setPointActive(imgIndex) {
    //清空小圆点所有样式
    points.forEach(function (point) {
      point.classList.remove("active");
    });
    //当前小圆点的索引和图片的索引相同时，再给小圆点添加特殊样式
    points.forEach(function (point) {
      if (point.dataset.index === imgIndex) point.classList.add("active");
    });
  }
  /*————————————————————————————————翻页功能————————————————————————————————————*/
  //获取翻页按钮
  var skip = document.querySelectorAll(".skip");
  //添加事件
  skip.item(0).addEventListener("click", skipImg, false);
  skip.item(1).addEventListener("click", skipImg, false);
  //翻页显示图片的回调方法
  function skipImg(ev) {
    //获取当前图片
    var currentImg = null;
    imgs.forEach(function (img) {
      if (img.classList.contains("active")) {
        currentImg = img;
      }
    });
    //2.判断是否是点击了显示前一张的按钮
    if (ev.target.classList.contains("prev")) {
      //为了显示出来前一张图片，必须将当前图片的激活去掉
      currentImg.classList.remove("active");
      //将当前图片的前一张图片设置为当前图片
      currentImg = currentImg.previousElementSibling;
      //如果存在前一张，再显示，否则进入循环，显示最后一张
      if (currentImg !== null && currentImg.nodeName === "IMG") {
        currentImg.classList.add("active");
      } else {
        currentImg = imgs[imgs.length - 1];
        currentImg.classList.add("active");
      }
    }
    //3.判断是否是点击了显示后一张的按钮
    if (ev.target.classList.contains("next")) {
      //为了显示出来后一张图片，必须将当前图片的激活去掉
      currentImg.classList.remove("active");
      //将当前图片的后一张图片设置为当前图片
      currentImg = currentImg.nextElementSibling;
      console.log(currentImg);
      //如果存在后一张，再显示，否则进入循环，显示第一张
      if (currentImg !== null && currentImg.nodeName === "IMG") {
        currentImg.classList.add("active");
      } else {
        currentImg = imgs[0];
        currentImg.classList.add("active");
      }
    }
    //小圆点高亮
    setPointActive(currentImg.dataset.index);
  }
};