1、给最大值最小值赋初值
max=-Infinity 负无穷
min=Infinity 正无穷
2、多种方法做切换（后续补充）
1）通过定位和层级
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
li{
list-style: none;
}
.box{
width: 400px;
height: 400px;
border: 2px solid #000;
margin: 0 auto;
position: relative;
}
a{
position: absolute;
top:50%;
width: 30px;
height: 30px;
font-size: 30px;
color: red;
margin-top: -15px;
z-index: 999999999;
}
a:nth-of-type(1){
left:50px;
}
a:nth-of-type(2){
right: 50px;
}
img{
width: 100%;
height: 100%;
vertical-align: top;
}
ul{
position: relative;
width: 100%;
height: 100%;
}
li{
width: 100%;
height: 100%;
position: absolute;
top:0;
left: 0;
}
li:nth-of-type(1){
z-index: 5;
}
li:nth-of-type(2){
z-index: 4;
}
li:nth-of-type(3){
z-index: 3;
}
li:nth-of-type(4){
z-index: 2;
}
</style>
</head>
<body>
<!---通过层级改变-->
<div class="box">
<ul>
<li>
<img src="img/1.png" alt="">
</li>
<li>
<img src="img/2.png" alt="">
</li>
<li>
<img src="img/3.png" alt="">
</li>
<li>
<img src="img/4.png" alt="">
</li>
</ul>
<a href="javascript:;"><</a>
<a href="javascript:;">></a>
</div>
<script type="text/javascript">
var oAs=document.querySelectorAll('a');
var lis=document.querySelectorAll('ul li');
var num = 5; //设置层级
var index = 0; // 设置下标
//上一个
oAs[0].onclick=function(){
num++;
index--;
index = index<0?(lis.length-1):index;
lis[index].style.zIndex=num;
}
//下一个
oAs[1].onclick=function(){
num++;
index++;
index = index>(lis.length-1)?0:index;
lis[index].style.zIndex=num;
}
</script>
</body>
</html>
2）通过定位层级+transition+透明度：实现淡入淡出
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
li{
list-style: none;
}
.box{
width: 400px;
height: 400px;
border: 2px solid #000;
margin: 0 auto;
position: relative;
}
a{
position: absolute;
top:50%;
width: 30px;
height: 30px;
font-size: 30px;
color: red;
margin-top: -15px;
z-index: 999999999;
}
a:nth-of-type(1){
left:50px;
}
a:nth-of-type(2){
right: 50px;
}
img{
width: 100%;
height: 100%;
vertical-align: top;
}
ul{
position: relative;
width: 100%;
height: 100%;
}
li{
width: 100%;
height: 100%;
position: absolute;
top:0;
left: 0;
}
li:nth-of-type(1){
z-index: 5;
}
li:nth-of-type(2){
z-index: 4;
}
li:nth-of-type(3){
z-index: 3;
}
li:nth-of-type(4){
z-index: 2;
}
/*淡入淡出*/
.box .active{
opacity: 1;
transition: 2s;
}
.box .hidde{
opacity: 0;
transition: 2s;
}
/*点点切换*/
nav{
position: absolute;
bottom: 10px;
left:40%;
z-index: 100;
}
nav span{
float: left;
width: 20px;
height: 20px;
background: #fff;
border-radius: 100%;
margin-right: 10px;
}
nav .activeSpan{
background: red;
}
</style>
</head>
<body>
<!---通过层级改变-->
<div class="box">
<ul>
<li>
<img src="img/1.png" alt="">
</li>
<li>
<img src="img/2.png" alt="">
</li>
<li>
<img src="img/3.png" alt="">
</li>
<li>
<img src="img/4.png" alt="">
</li>
</ul>
<a href="javascript:;"><</a>
<a href="javascript:;">></a>
<nav>
<span class="activeSpan"></span>
<span></span>
<span></span>
<span></span>
</nav>
</div>
<script type="text/javascript">
var oAs=document.querySelectorAll('a');
var lis=document.querySelectorAll('ul li');
var oSpan=document.querySelectorAll('nav span');
var index = 0; // 设置下标
//上一个
oAs[0].onclick=function(){
//隐藏但不消失
lis[index].className = 'hidde';
index--;
index = index<0?(lis.length-1):index;
//切换时显示
lis[index].className = 'active';
//点点进入清除样式
for(var i=0;i<oSpan.length;i++){
oSpan[i].className='';
}
// 设置点的背景颜色
oSpan[index].className='activeSpan';
}
//下一个
oAs[1].onclick=function(){
lis[index].className = 'hidde';
index++;
index = index>(lis.length-1)?0:index;
lis[index].className = 'active';
//点点
for(var i=0;i<oSpan.length;i++){
oSpan[i].className='';
}
// 设置点的背景颜色
oSpan[index].className='activeSpan';
}
//点点的切换
for(var j=0;j<oSpan.length;j++){
//自定义属性,将点点切换的下标和图片下标练习
oSpan[j].index=j;
oSpan[j].onclick = function(){
for(var i=0;i<oSpan.length;i++){
oSpan[i].className = '';
}
// 设置点的背景颜色
this.className = 'activeSpan';
// 把点击的span的下标赋值给变量index
lis[index].className = 'hidde';
index = this.index;
lis[index].className = 'active';
}
}
</script>
</body>
</html>
3）取模循环图片切换
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<img src="img/1.png" alt="" width="300px" height="300">
<button type="button">下一张</button>
<script type="text/javascript">
var oImg=document.querySelector('img');
var btn=document.querySelector('button');
var num=1;
btn.onclick=function(){
num++;
num=num%4;
// 取模 a%b
// a>b 余数
// a=b 0
// a<b a本身
oImg.src='img/'+num+'.png';
}
</script>
</body>
</html>
4）三元运算符点击图片切换
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>三元运算符</title>
</head>
<body>
<img src="img/2.png" alt="" width="300px" height="300px">
<script type="text/javascript">
var oImg=document.querySelector('img');
var onoff=true;
oImg.onclick=function(){
onoff=!onoff;
oImg.src=onoff?"img/2.png":"img/3.png";
}
</script>
</body>
</html>
5)连接符
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.img{
width: 300px;
height: 300px;
margin: 0px auto;
border: 5px solid black;
}
img{
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<button type="button" id="next">下一个</button>
<div class="img">
<img src="img/1.png" alt="" id="oImg">
</div>
<button type="button" id="last">上一个</button>
<script type="text/javascript">
// 获取按钮标签
var btn=document.getElementById('next');
var last=document.getElementById('last');
var oImg=document.getElementById('oImg');
// 获取图片标签
// 设置一个下标初始值
var num=1;
btn.onclick=function(){
num=num+1;
if(num>4){
num=1;
// 当num大于等于数组长度时,修改num为初始值实现循环
}
oImg.src='img/'+num+'.png';
}
last.onclick=function(){
num=num-1;
if(num<0){
num=4;
// 当num大于等于数组长度时,修改num为最大值值实现循环
}
oImg.src='img/'+num+'.png';
}
// 最后实现:点击切换图片
// 自身缺点：编程复杂化，应避免
</script>
</body>
</html>
6）遍历数组
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.img{
width: 300px;
height: 300px;
margin: 0px auto;
border: 5px solid black;
}
img{
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<button type="button" id="next">下一个</button>
<div class="img">
<img src="img/1.png" alt="" id="oImg">
</div>
<button type="button" id="last">上一个</button>
<script type="text/javascript">
// 获取按钮标签
var btn=document.getElementById('next');
var btn1=document.getElementById('last');
// 获取图片标签
var oImg=document.getElementById('oImg');
// 用数组存储需要的图片路径
var arr=['img/1.png','img/2.png','img/3.png','img/4.png'];
// 设置一个下标初始值
var num=0;
btn.onclick=function(){
num=num+1;
if(num>=arr.length){
num=0;
// 当num大于等于数组长度时,修改num为初始值实现循环
}
// if(num<=arr.length-1){
// oImg.src=arr[num];这样做缺少循环对num值进行自增
// }
oImg.src=arr[num];
// 当按钮点击时,数据下标增一,修改图片元素的src属性值
}
btn1.onclick=function(){
num=num-1;
if(num<0){
num=arr.length-1;
}
if(num == -1){
num=arr.length-1;
}
oImg.src=arr[num];
}
// 最后实现:点击切换图片
// 自身缺点：编程复杂化，应避免
</script>
</body>
</html>
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
