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点击实现多图顺序切换和循环切换效果代码属于前端实例代码,有关更多实例代码大家可以查看

回复

我来回复
  • 暂无回复内容