图片切换器

当点击“循环”按钮时，当图片为最后一个或第一个时，再次点击时会自动切换到第一个或最后一个，然后正常切换

当点击“非循环”按钮时，当图片为最后一个或第一个时，再次点击时将不再切换

当点击“左右”按钮时图片会对应的向左、向右切换

 

下面直接上代码：

<div class="container">

  <!-- 展示部分 -->
  <div class="imgShow">

    <img id="imgData" src="./images/0.jpg" alt="">

    <!-- 左右按钮 -->
    <input id="prev" type="image" src="./images/prev.png">
    <input id="next" type="image" src="./images/next.png">
    <span class="runNum" id="runNum">1/5</span>
  </div>

<!-- 底部按钮区域 -->
  <div class="btns">
    <input type="submit" value="循环" class="circulate">
    <input type="submit" value="非循环" class="acyclic">
  </div>
</div>
<script src="index.js"></script>

body {
  background: #282828;
}

.container {
  width: 650px;
  margin: 100px auto;
}

.imgShow {
  width: 100%;
  height: 400px;
  position: relative;
}

.imgShow img {
  width: 100%;
  height: 100%;
}

/* 设置左按钮 */
#prev {
  position: absolute;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  left: 10px;
  top: 175px;
}

/* 设置右按钮 */
#next {
  position: absolute;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  right: 10px;
  top: 175px;
}

/* 设置span */
.runNum {
  /* display: block; */
  position: absolute;
  left: 50%;
  margin-left: -50px;
  bottom: 10px;
  width: 100px;
  height: 28px;
  border-radius: 20px;
  background-color: #ccc;
  text-align: center;
  line-height: 28px;
  font-size: 16px;
  font-weight: 600px;
  color: #fff;
}

/* 按钮区域 */
.btns {
  height: 100px;
  width: 100%;
  text-align: center;
  margin-top: 30px;
}

.btns input {
  width: 190px;
  height: 30px;
  border-radius: 25px;
  color: #fff;
  font-weight: 600px;
  background-color: skyblue;
  cursor: pointer;
  outline: none;
}

.btns input.circulate {
  margin-right: 60px;
}

.btns input.acyclic {
  margin-left: 60px;
}

.btns input:focus {
  background-color:burlywood;
}

/**
 *
 *思路：
 *1. img 标签更换路径，把图片路径保存到img数组中
 *arr = [];
 *img.src = arr[0];
 *2. 上下点击，改变img数组中的索引，然后更换到图片上
 *3. 设置加一个锁，改变循环和非循环
 *4. 整理封装
 *
 */

// 立即执行函数
(function (){
  // var dataStr =
  //   '{"src":["./images/0.jpg","./images/1.jpg","./images/2.jpg","./images/3.jpg","./images/4.jpg"]}';

  //将json数据解析成js
  //var imgArr = JSON.parse(dataStr);

  var imgArr = ['./images/0.jpg','./images/1.jpg','./images/2.jpg','./images/3.jpg','./images/4.jpg'];

  //获得元素
  var btn_prev = document.getElementById('prev');
  var btn_next = document.getElementById('next');
  var runNum = document.getElementById('runNum');
  var imgNode = document.getElementById('imgData');
  var circulateBtns = document.getElementsByClassName('btns')[0];

  // var sonNum = 0;//下标值
  // var flag=true;

  // 封装部分
  function turnImages(arr){//构造函数
    this.imgsLen = arr.length-1;//索引是从0开始。
  }

  turnImages.prototype = {//构造函数原型上添加方法
    sunNum:0,//公共数字
    flag:true,//默认循环
    downNum: function () {

      if(this.flag){
        this.sunNum--;
        // if(sonNum < 0){
        //   sonNum=4;
        // }
        this.sunNum = this.sunNum < 0 ? this.imgsLen : this.sunNum;
      }
      else{
        this.unNum--;
        // if(sonNum < 0){
        //   sonNum=0;
        // }
        this.sunNum = this.sunNum < 0 ? 0 : this.sunNum;
      }
      return this.sunNum;//返回所引数
    },
    upNum: function () {

      if(this.flag){
        this.sunNum++;
        // if(sonNum > 4){
        //   sonNum=0;
        // }
        this.sunNum = this.sunNum > this.imgsLen ? 0 : this.sunNum;
      }
      else{
        this.sunNum++;
        // if(sonNum > 4){
        //   sonNum=4;
        // };
        this.sunNum = this.sunNum > this.imgsLen ? this.imgsLen : this.sunNum;
    }
    return this.sunNum;//返回索引数
   }
  };

  var getImageIndex = new turnImages(imgArr);


// 点击上一个
  btn_prev.onclick = function(){
  // if(flag){
  //   sonNum--;
  //   if(sonNum < 0){
  //     sonNum=4;
  //   }
  // }else{
  //   sonNum--;
  //   if(sonNum < 0){
  //     sonNum=0;
  //   }
  // }

    var cot = getImageIndex.downNum(); //对象里减数的方法
    imgNode.src = imgArr[cot];
    runNum.innerHTML = (cot+1) + '/' + imgArr.length;
  };

// 点击下一个
  btn_next.onclick = function (){
    // if(flag){
    //   sonNum++;
    //   if(sonNum > 4){
    //     sonNum=0;
    //   }
    // }else{
    //   sonNum++;
    //   if(sonNum > 4){
    //     sonNum=4;
    //   }
    var cot = getImageIndex.upNum();
    imgNode.src = imgArr[cot];
    runNum.innerHTML = (cot+1) + '/' + imgArr.length;
  };

//循环 非循环 更改
  circulateBtns.onclick = function(e){
    var str = e.target.className;
    if(str == 'circulate'){
      getImageIndex.flag = true; // 打开循环
      circulateBtns.getElementsByClassName('circulate')[0].style.backgroundColor = 'burlywood';
      circulateBtns.getElementsByClassName('acyclic')[0].style.backgroundColor = 'skyblue';
    }else if (str == 'acyclic') {
      getImageIndex.flag = false; // 打开非循环
      circulateBtns.getElementsByClassName('circulate')[0].style.backgroundColor = 'skyblue';
      circulateBtns.getElementsByClassName('acyclic')[0].style.backgroundColor = 'burlywood';
    }
  };

  }
)();