原生JS实现切换图片demo

最新推荐文章于 2023-02-20 16:26:24 发布

白默若

最新推荐文章于 2023-02-20 16:26:24 发布

阅读量603

点赞数 2

分类专栏： web前端学习文章标签： html css javascript

本文链接：https://blog.csdn.net/weixin_43646665/article/details/105954706

版权

web前端学习专栏收录该内容

3 篇文章 0 订阅

订阅专栏

原生JS实现切换图片demo

一、总源码
二、效果展示

一、总源码

（一）HTML源码

下面展示一些 内联代码片。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>showImages</title>
  <link rel="stylesheet" href="css/index.css">
</head>
<body>
  <div class="wapper">
    <!-- 上面图片展示区域 -->
    <div class="imgShow">
      <img src="./images/1.jpg" alt="" id="imgData">
      <input id="prev" type="image" src="./images/prev.png" >
      <input id="next" type="image" src="./images/next.png " >
      <span id="runNum">1/5</span>
    </div>
    <!-- 下面按钮区域 -->
    <div class="btns">
      <input type="button" class="circulate" value="循环">
      <input type="button" class="acyclic" value="非循环">
    </div>

  </div>
<script src="js/index.js"></script>
  
</body>
</html>

（二）CSS源码

下面展示一些 内联代码片。

*{
  margin: 0;
  padding: 0;
}

body{
  background: #282828;
}

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

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

}

/* 左边按钮 */
.wapper .imgShow #prev{
  position: absolute;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  left: 10px;
  top: 175px;
  outline: none;

}

/* 右边按钮 */
.wapper .imgShow #next {
  position: absolute;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  right: 10px;
  top: 175px;
  outline: none;
}

/* 下面记数 */
.wapper .imgShow #runNum{
  position: absolute;
  display: block;
  width: 100px;
  height: 28px;
  background: #cccccc;
  border-radius: 20px; 
  bottom: 10px;
  left: 50%;
  color: white;
  font-size: 16px;
  margin-left: -50px;
  font-weight: 600;
  text-align: center;
  line-height: 28px;

}

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

.wapper .btns input{
  width: 192px;
  height: 30px;
  color: white;
  font-size: 16px;
  font-weight: 600;
  border-radius: 25px;
  background: #2164f3;
  cursor: pointer;
  outline: none;
}
/* 让这两个按钮平均分开 */
input.circulate{
  margin-right: 60px;
}
input.acyclic{
  margin-left: 60px;
}
/* 点击更换颜色 */
.wapper .btns input:focus{
  background-color: burlywood;
}

（三）JS源码

下面展示一些 内联代码片。

// 1.点击按钮实现图片切换 切换images src的路径
// 2.js 保存数据 对象 和 数组，把路径放到数组里 下标（索引值）
// 3.循环 和 非循环 ？
// 4,优化代码
// 完成

(function(){
  // 获取这些操作的dom元素
  var imgArr = ["./images/1.jpg", "./images/2.jpg", "./images/3.jpg", "./images/4.jpg", "./images/5.jpg"];
  var prev_node = document.getElementById('prev'),
  next_node = document.getElementById('next'),
  imgShow = document.getElementById('imgData'),
  runNum = document.getElementById('runNum');
  
  // var index=0;
  // var bool=true;

  // 点击事件
  var circulateBtns = document.getElementsByClassName('btns')[0];

//面向对象
function TurnImageArr(arr){//构造函数
  this.len = arr.length - 1;//索引是从0开始。
}

  TurnImageArr.prototype = {//构造函数原型上添加方法
  index:0,
  flag:true,
  prevFn:function(){//减数字的方法
    
    // index = index - 1;
    if (this.flag) {//循环
      this.index--;
      this.index = this.index < 0 ? this.len : this.index;
    } else {
      this.index--;
      this.index = this.index < 0 ? 0 : this.index;
    }
    return this.index;
  },
  nextFn:function(){//加数字的方法
    // index = index + 1;
    if (this.flag) {//循环
      this.index++;
      this.index = this.index > this.len ? 0 : this.index;
    } else {//非循环
      this.index++;
      this.index = this.index > this.len ? this.len : this.index;
    }
    // console.log(this.index);
    return this.index;
  }
}

  var fnObj = new TurnImageArr(imgArr);//通过new 出对象

  prev_node.onclick = function () {
    var num = fnObj.prevFn();//获得索引值
    console.log(num);
    imgShow.src = imgArr[num]
    runNum.innerHTML = (num + 1) + '/' + imgArr.length;

  }

  next_node.onclick = function () {
    var num = fnObj.nextFn();
    console.log(num);
    imgShow.src = imgArr[num]
    runNum.innerHTML = (num + 1) + '/' + imgArr.length;
  }

  //点击切换是否循环
  circulateBtns.onclick = function (e) {  //控制开关
    if (e.target.className == 'circulate') {//循环
      fnObj.flag = true;
      circulateBtns.getElementsByTagName('input')[0].style.backgroundColor = 'burlywood';
      circulateBtns.getElementsByTagName('input')[1].style.backgroundColor = '#2164f3';

    } else if (e.target.className == 'acyclic') {//非循环
    fnObj.flag=false;
      circulateBtns.getElementsByTagName('input')[0].style.backgroundColor = '#2164f3';
      circulateBtns.getElementsByTagName('input')[1].style.backgroundColor = 'burlywood';

    }
  }

})()