图片切换Demo

二姑娘coding
29 阅读5分钟

方式1

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title></title>
  <meta charset="utf-8" />
  <style>
    body {
      width: 100%;
      height: 100%;
      position: relative;
    }

    img {
      position: absolute;
      top: 0;
      left: 0;
      opacity: 0;
    }

    .active {
      opacity: 1;
    }

    .fadeout {
      -webkit-transition: all 0.67s;
      -moz-transition: all 0.67s;
      -ms-transition: all 0.67s;
      -o-transition: all 0.67s;
      transition: all 0.67s;
      opacity: 0;
    }

    .fadein {
      -webkit-transition: all 0.67s;
      -moz-transition: all 0.67s;
      -ms-transition: all 0.67s;
      -o-transition: all 0.67s;
      transition: all 0.67s;
      opacity: 1;
    }
  </style>
</head>
<body>
  <img src="image/1.jpg" alt="" class="item active">
  <img src="image/2.jpg" alt="" class="item">
  <img src="image/3.jpg" alt="" class="item">
  <script type="text/javascript">
    var item = document.querySelectorAll('.item');
    var index = 0; //记录图片的下标
    // 切换图片效果实现
    timer1 = setInterval(nextImg, 2000)
    function nextImg() {
      item[index].className = "fadeout"; //当前图片淡出
      index++
      index = index % 3;
      item[index].className = "fadein"; //下一张图片淡出
    }
  </script>
</body>
</html>

方式2

<!DOCTYPE html>
<html lang="en">
<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>Document</title>
  <style>
    body {
      width: 100%;
      height: 100%;
      position: relative;
    }

    img {
      position: absolute;
      top: 0;
      left: 0;
      opacity: 0;
    }

    .active {
      opacity: 1;
    }
  </style>
</head>
<body>
  <img src="image/1.jpg" alt="" class="item active">
  <img src="image/2.jpg" alt="" class="item">
  <img src="image/3.jpg" alt="" class="item">
  <script>
    var item = document.querySelectorAll('.item');

    var opa = 1; //通过控制透明度opacity来实现图片的渐隐渐现的效果
    var time1, time2;
    var index = 0; //记录图片的下标

    // 切换下一张图片效果实现
    function nextImg() {
      if (time1) {
        clearInterval(time1);
      }
      //用计时器实现渐变消失效果
      time1 = setInterval(function () {
        opa -= 0.1;
        // 满足条件，证明当前的图片已经看不见，下一张图片就开始出现
        if (opa <= 0) {
          clearInterval(time1);
          opa = 0;//以防万一，再给它赋值为0；这样透明度就为0
          index++;//下一张图片的索引就是index++; 
          index = index % item.length;
          fadeIn();//上一张图片消失，这张图片就要显示，执行此函数
        }
        item[index].style.opacity = opa;//当前的图片的透明度随着opa的减少减少
      }, 16.7)
    }

    // 控制图片的出现
    function fadeIn() {
      time2 = setInterval(function () {
        opa += 0.1;
        if (opa >= 1) {
          clearInterval(time2);
          opa = 1;
        }
        item[index].style.opacity = opa;//这里的index就是上张图片的index++;
      }, 16.7)
    }

    // 控制图片的自动播放
    var autoPlay = setInterval(nextImg, 3000); //默认计时器打开
  </script>
</body>
</html>

方式3

<!DOCTYPE html>
<html lang="en">
<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>Document</title>
  <style>
    body,
    .wrap {
      width: 100%;
      height: 100%;
      position: relative;
    }

    img {
      position: absolute;
      top: 0;
      left: 0;
      opacity: 0;
    }

    .active {
      opacity: 1;
    }
  </style>
</head>
<body>
  <div class="wrap">
    <img src="image/1.jpg" alt="" class="item active">
    <img src="image/2.jpg" alt="" class="item">
    <img src="image/3.jpg" alt="" class="item">
  </div>
  <script>
    var item = document.querySelectorAll('.item');
    var wrap = document.querySelector('.wrap')

    var opa = 1; //通过控制透明度opacity来实现图片的渐隐渐现的效果
    var time1, time2;
    var index = 0; //记录图片的下标

    // 切换下一张图片效果实现
    function nextImg() {
      if (time1) {
        clearInterval(time1);
      }
      //用计时器实现渐变消失效果
      time1 = setInterval(function () {
        opa -= 0.1;
        // 满足条件，证明当前的图片已经看不见，下一张图片就开始出现
        if (opa <= 0) {
          clearInterval(time1);
          opa = 0;//以防万一，再给它赋值为0；这样透明度就为0
          index++;//下一张图片的索引就是index++; 
          index = index % item.length;
          fadeIn();//上一张图片消失，这张图片就要显示，执行此函数
        }
        item[index].style.opacity = opa;//当前的图片的透明度随着opa的减少减少
      }, 16.7)
    }

    // 控制图片的出现
    function fadeIn() {
      time2 = setInterval(function () {
        opa += 0.1;
        if (opa >= 1) {
          clearInterval(time2);
          opa = 1;
        }
        item[index].style.opacity = opa;//这里的index就是上张图片的index++;
      }, 16.7)
    }

    // 控制图片的自动播放
    var autoPlay = setInterval(nextImg, 3000); //默认计时器打开

    //鼠标进入清除计时器，停止播放
    wrap.onmouseenter = function () {
      clearInterval(autoPlay);
    }

    //鼠标离开继续执行计时器
    wrap.onmouseleave = function () {
      autoPlay = setInterval(nextImg, 3000);
    }
  </script>
</body>
</html>

方式4

<!DOCTYPE html>
<html lang="en">
<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>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .wrap {
      width: 590px;
      height: 470px;
      position: relative;
    }

    img {
      width: 590px;
      height: 470px;
      position: absolute;
      top: 0;
      left: 0;
      opacity: 0;
    }

    .active {
      opacity: 1;
    }

    .pre,
    .next {
      width: 76px;
      height: 40px;
      position: absolute;
      top: 50%;
      margin-top: -20px;
      color: red
    }

    .pre {
      left: 20px;
      background: url(image/left.png) no-repeat center center;
    }

    .next {
      right: 20px;
      background: url(image/right.png) no-repeat center center;
    }

    ul,
    li {
      list-style: none;
    }

    .circle {
      width: 80px;
      position: absolute;
      bottom: 20px;
      left: 50%;
      margin-left: -40px;
    }

    .btn {
      float: left;
      margin: 0 5px;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background-color: skyblue;
    }

    .btn-active {
      background-color: orange;
    }
  </style>
</head>

<body>
  <div class="wrap">
    <div class="banner">
      <img src="image/1.jpg" alt="" class="item active">
      <img src="image/2.jpg" alt="" class="item">
      <img src="image/3.jpg" alt="" class="item">
    </div>
    <div class="pre"></div>
    <div class="next"></div>
    <div class="circle">
      <ul>
        <li class="btn btn-active"></li>
        <li class="btn"></li>
        <li class="btn"></li>
      </ul>
    </div>
  </div>
  <script>
    var item = document.querySelectorAll('.item');
    var wrap = document.querySelector('.wrap');
    var btn = document.querySelectorAll('.btn'); // btn按钮组
    var pre = document.querySelector('.pre'); // 上一个按钮
    var next = document.querySelector('.next'); // 下一个按钮

    var opa = 1; //通过控制透明度opacity来实现图片的渐隐渐现的效果
    var time1, time2;
    var index = 0; //记录图片的下标

    // 切换下一张图片效果实现
    function nextImg() {
      if (time1) {
        clearInterval(time1);
      }
      //用计时器实现渐变消失效果
      time1 = setInterval(function () {
        opa -= 0.1;
        // 满足条件，证明当前的图片已经看不见，下一张图片就开始出现
        if (opa <= 0) {
          clearInterval(time1);
          opa = 0;//以防万一，再给它赋值为0；这样透明度就为0
          index++;//下一张图片的索引就是index++; 
          index = index % item.length;
          fadeIn();//上一张图片消失，这张图片就要显示，执行此函数
        }
        item[index].style.opacity = opa;//当前的图片的透明度随着opa的减少减少

        // btn按钮组样式重置
        for (var i = 0; i < btn.length; i++) {
          btn[i].style.backgroundColor = 'skyblue';
        }
        // 当前图片的点样式高亮
        btn[index].style.backgroundColor = 'orange';
      }, 16.7)
    }

    // 控制图片的出现
    function fadeIn() {
      time2 = setInterval(function () {
        opa += 0.1;
        if (opa >= 1) {
          clearInterval(time2);
          opa = 1;
        }
        item[index].style.opacity = opa;//这里的index就是上张图片的index++;
      }, 16.7)
    }

    // 控制图片的自动播放
    var autoPlay = setInterval(nextImg, 3000); //默认计时器打开

    //鼠标进入清除计时器，停止播放
    wrap.onmouseenter = function () {
      clearInterval(autoPlay);
    }

    //鼠标离开继续执行计时器
    wrap.onmouseleave = function () {
      autoPlay = setInterval(nextImg, 3000);
    }

    // 切换下一张图片效果实现
    next.onclick = function () {
      nextImg();
    }

    // 切换上一张图片效果实现
    pre.onclick = function () {
      if (time1) {
        clearInterval(time1);
      }
      time1 = setInterval(function () {
        // 控制当前图片消失
        opa -= 0.1;
        if (opa <= 0) {
          clearInterval(time1);
          opa = 0;
          index--; //上张图片的index
          if (index < 0) { //如果索引值小与0，那就从图片的最后一个重新开始
            index = item.length - 1;
          }
          fadeIn(); //此时显示的就是上张图片
        }
        item[index].style.opacity = opa;

        // btn按钮组样式重置
        for (var i = 0; i < btn.length; i++) {
          btn[i].style.backgroundColor = 'skyblue';
        }
        btn[index].style.backgroundColor = 'orange';
      }, 16.7)
    }

    // 通过点击点来控制图片的切换
    for (var i = 0; i < btn.length; i++) {
      btn[i].index = i;
      btn[i].onclick = function () {
        // 切换下一张图片
        // 提前存储this
        var that = this;
        console.log(this.index, index);
        if (time1) {
          clearInterval(time1)
        }
        time1 = setInterval(function () {
          opa -= 0.1;
          if (opa <= 0) {
            clearInterval(time1);
            opa = 0;
            index = that.index;
            fadeIn();
          }
          item[index].style.opacity = opa;
          // 对记录图片的点的样式进行重置
          for (var j = 0; j < btn.length; j++) {
            btn[j].style.backgroundColor = 'skyblue';
          }
          btn[index].style.backgroundColor = 'orange';
        }, 16.7)
      }
    }
  </script>
</body>
</html>
avatar
文章
阅读
粉丝