原生JS實作切換圖檔demo
- 一、總源碼
-
- （一）HTML源碼
- （二）CSS源碼
- （三）JS源碼
- （四）images圖檔
- 二、效果展示
一、總源碼
（一）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';
}
}
})()
（四）images圖檔
1.jpg:
2.jpg:
3.jpg:
4.jpg:
5.jpg:
next.png:
prev.png:
非循環模式.png:
循環模式.png:
backBotton.png:
二、效果展示
20200505原生js切換圖檔demo