JS 自动轮播图
用视图文件index.html. JS处理文件slider.js及图片文件

index.html
slider.js
slider.css
轮播图文件

示例 index.html

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

slider.js 处理文件

源码：

//获取轮播图所有图片
var imgs = document.querySelectorAll("img");
//获取小圆点组
var pointList = document.querySelector(".point-list");
//动态生成小圆点
//圆点的数量和图片的数量是一样多
imgs.forEach(function (img, index) {
  //遍历图片数量生成圆通数量
  var span = document.createElement("span");
  //创建一个span
  if (index == 0) {
    //判断是否第一个圆点
    span.classList.add("point", "active");
    //生成圆点第一个的样式
  }
  span.classList.add("point"); //圆点的样式
  span.dataset.index = img.dataset.index; //圆点自定义的data-index等于图片的
  pointList.appendChild(span); //写入到文档
});
//获取到所有的小圆点
var points = document.querySelectorAll(".point");
//点击小圆点添加事件
pointList.addEventListener("click", function (ev) {
  imgs.forEach(function (img) {
    //遍历图片
    if (img.dataset.index === ev.target.dataset.index) {
      //如果点击的图片的index是否等于小圆点的index
      imgs.forEach(function (img) {
        img.classList.remove("active");
        //变量清除其他图片的显示
      });
      //图片的显示样式
      img.classList.add("active");
      //设置与当前图片对应的小圆点高亮显示
      // 因为这个功能要多处使用，这里将它声明为公共函数
      setPointActive(img.dataset.index);
      //传图片的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 = "";
  imgs.forEach(function (img) {
    if (img.classList.contains("active")) {
      currentImg = img;
    }
  });
  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");
    }
  }
  if (ev.target.classList.contains("next")) {
    currentImg.classList.remove("active");
    //为了显示出前一张，必须将当前图片的激活去掉
    // 将当前图片的前一张图片设置为当前图片
    currentImg = currentImg.nextElementSibling;
    if (currentImg !== null && currentImg.nodeName == "IMG") {
      currentImg.classList.add("active");
    } else {
      currentImg = imgs[0];
      currentImg.classList.add("active");
    }
  }
  setPointActive(currentImg.dataset.index);
}
var box = document.querySelector(".box");
var timer = null;
box.addEventListener(
  "mouseout",
  function () {
    star();
  },
  false
);
function star() {
  // 创建一个事件模拟器
  var clickEvent = new Event("click");
  timer = setInterval(function () {
    skip.item(1).dispatchEvent(clickEvent);
    //触发模拟事件(自动翻页)
  }, 2000);
}
box.addEventListener(
  "mouseover",
  function () {
    clearInterval(timer);
    // clearInterval() 来停止执行自动模拟自动触发的事件
  },
  false
);

示例图：

懒加载

源码示例：


<!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="static/css/base.css">
</head>
<body>
    <div class="container">
    <img src="static/images/temp.png" data-src="static/images/1.png">
    <img src="static/images/temp.png" data-src="static/images/2.png">
    <img src="static/images/temp.png" data-src="static/images/3.png">
    <img src="static/images/temp.png" data-src="static/images/4.png">
    <img src="static/images/temp.png" data-src="static/images/5.png">
    <img src="static/images/temp.png" data-src="static/images/6.png">
    </div>
    <script>
        // 1.获取所有图片
        var imgs = document.querySelectorAll(".container 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;
                    img.classList = "icon";
                    console.log(img.classList);
                }
            });
        }
    </script>
</body>
</html>

选项卡

index.html


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>经典选项卡案例</title>
</head>
<style>
    @import url(static/css/tabs.css);
</style>
<body>
   <div class="tabs">
    <ul class="tab">
        <li class= "active" data-index="1">水果</li>
        <li data-index="2">手机</li>
        <li data-index="3">汽车</li>
    </ul>
    <ul class="item active" data-index=1>
        <li><a href="">西瓜</a></li>
        <li><a href="">苹果</a></li>
        <li><a href="">橙子</a></li>
    </ul>
     <ul class="item"  data-index=2>
        <li><a href="">小米</a></li>
        <li><a href="">华为</a></li>
        <li><a href="">OPPO</a></li>
    </ul>
     <ul class="item" data-index=3>
        <li><a href="">长城</a></li>
        <li><a href="">五菱</a></li>
        <li><a href="">荣威</a></li>
    </ul>
   </div>
   <script type="text/javascript" src="static/js/tabs.js"></script>
</body>
</html>

JS 源码


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

示例图：

JS自定义轮播图

懒加载

选项卡

相关文章