一、总源码
(一)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