js点击实现多图顺序切换和循环切换效果代码

吐槽君 分类:实例代码

本章节分享一段代码实例,它利用js实现的多图循环效果。

实现顺序循环,当到达最后一张图片以后会给出提示,当使用循环切换方式时候,可以实现循环切换。

下面就给出代码,并且给出详细的介绍,代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>犀牛前端部落</title>
<style>
p {
  margin: 0;
}
input {
  border: none;
  outline: none;
  margin: 0;
  padding: 0;
}
img {
  width: 300px;
  height: 300px;
}
#loop {
  margin-left: 50px;
  background: #c80;
  width: 60px;
  height: 40px;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
}
#order {
  margin-left: 50px;
  background: #c80;
  width: 60px;
  height: 40px;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
}
div {
  width: 300px;
  height: 300px;
  position: relative;
}
span {
  position: absolute;
  left: 0;
  top: 0;
  width: 300px;
  height: 20px;
  font-size: 14px;
  line-height: 20px;
  background: #000;
  opacity: 0.5;
  color: #fff;
  text-align: center;
}
div p {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 300px;
  height: 20px;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  color: #fff;
  background: #000;
  opacity: 0.5;
}
div input {
  position: absolute;
  width: 60px;
  height: 60px;
  top: 100px;
  background: pink;
}
#back {
  left: 0;
}
#next {
  right: 0;
}
</style>
<script type="text/javascript">
window.onload = function () {
  //循环切换
  var oNext = document.getElementById("next");
  var oBack = document.getElementById("back");
  var oImg = document.getElementById("img");
  var oText = document.getElementById("text");
  var oSpan = document.getElementById("span");
  var oLoop = document.getElementById("loop");
  var Oorder = document.getElementById('order');
  var oText1 = document.getElementById("text1");
  var aImg = ["demo/js/img/1.jpg", "demo/js/img/2.jpg", "demo/js/img/3.jpg", "demo/js/img/4.jpg"];
  var aText = ["图片1", "图片2", "图片3", "图片4"];
 
  var num = 0;
  //点击下一张事件
  function next() {
    num = num + 1; //每次加一
    //进行判断,如果num大于最后一张时,图片返回第一张
    // 1 2 3 4
    if (num > aImg.length - 1) {
      num = 0;
    }
    oImg.src = aImg[num];
    oText.innerHTML = aText[num];//图片信息变化,与数组关联
    oSpan.innerHTML = (num + 1) + "/" + aImg.length;//数量变化,与数组关联
  }
  function back() {
    num = num - 1;
    //进行判断,如果图片小于第一张时,图片返回最后一张
    if (num < 0) {
      num = aImg.length - 1;
    }
    oImg.src = aImg[num];
    oText.innerHTML = aText[num];//图片信息变化,与数组关联
    oSpan.innerHTML = (num + 1) + "/" + aImg.length;//数量变化,与数组关联
  }
  function next1() {
    num = num + 1; //每次加一
    //进行判断,如果num大于最后一张时,弹出警告并把图片定在最后一张
    // 1 2 3 4
    if (num > aImg.length - 1) {
      num = aImg.length - 1;
      alert("最后一张了");
    }
    oImg.src = aImg[num];
    oText.innerHTML = aText[num];
    oSpan.innerHTML = num + 1 + "/" + aImg.length;
  }
  function back1() {
    num = num - 1;
    //进行判断,如果图片小于第一张时,弹出警告并把图片定在第一张
    if (num < 0) {
      num = 0;
      alert("已经是第一张了");
    }
    oImg.src = aImg[num];
    oText.innerHTML = aText[num];
    oSpan.innerHTML = num + 1 + "/" + aImg.length;
  }
 
  oNext.onclick = next;
  oBack.onclick = back;
  oLoop.onclick = function () {
    oText1.innerHTML = "图片可以从第一张到最后一张循环切换";
    oNext.onclick = next;
    oBack.onclick = back;
  }
  Oorder.onclick = function () {
    oText1.innerHTML = "图片只能从第一张到最后一张顺序切换";
    oNext.onclick = next1;
    oBack.onclick = back1;
  }
}
</script>
</head>
<body>
<input id="loop" type="button" name="" value="循环切换" />
<input id="order" type="button" name="" value="顺序切换" />
<p id="text1">图片可以从第一张到最后一张循环切换</p>
<div>
  <input id="back" type="button" name="" value="上一张" />
  <input id="next" type="button" name="" value="下一张" />
  <img id="img" src="demo/js/img/1.jpg" />
  <span id="span">1/4</span>
  <p id="text">图片1</p>
</div>
</body>
</html>

上面的代码实现了我们的要求,下面介绍一下它的实现过程。

一.代码注释:

(1).var oNext = document.getElementById("next"),获取对应id的元素对象。

(2).var aImg = ["demo/js/img/1.jpg", "demo/js/img/2.jpg", "demo/js/img/3.jpg", "demo/js/img/4.jpg"],创建一个数组,里面存放的是图片的地址。

(3).var aText = ["图片1", "图片2", "图片3", "图片4"],创建一个数组,里面存放的是文本说明。

(4).var num = 0,声明一个变量并赋值为0,后面会有使用。

(5).function next() {

    num = num + 1; 

    if (num > aImg.length - 1) {

      num = 0;

    }

    oImg.src = aImg[num];

    oText.innerHTML = aText[num];//图片信息变化,与数组关联

    oSpan.innerHTML = (num + 1) + "/" + aImg.length;//数量变化,与数组关联

  },作为可以循环的的下一张事件处理函数。

点击以后,num会加1,。

如果num的数目大于aImg.length - 1,因为num是从0开始,也就是超过了图片的最大数目。

那么就将num重置为0,也就是从头再开始一遍。

然后根据索引设置src值,和文本内容。

二.相关阅读:

(1).innerHTML属性可以参阅innerHTML一章节。

(2).onclick事件可以参阅javascript click事件一章节。

js点击实现多图顺序切换和循环切换效果代码,这样的场景在实际项目中还是用的比较多的,关于js点击实现多图顺序切换和循环切换效果代码就介绍到这了。

js点击实现多图顺序切换和循环切换效果代码属于前端实例代码,有关更多实例代码大家可以查看

网站出售中,有意者加微信:javadudu

回复

我来回复
  • 暂无回复内容