<!DOCTYPE html>
<html>
<head>
<title>纯JS制作简单的图片切换</title>
<meta charset="utf-8">
<!-- <link rel="stylesheet" href="css/reset.css"> -->
<style>
*{
margin:0;
padding:0;
list-style:none;
}
#row{
position:relative;
width:500px;
height:350px;
/*background-color:pink;*/
margin:50px auto;
}
#row #btn{
display:flex;
width:100%;
height:50px;
/*background-color:#484a19;*/
}
#row #btn span{
width:80px;
height:50px;
margin-right:5px;
background-color:#010000;
line-height:50px;
text-align:center;
color:#fff;
cursor:pointer;
}
#row #btn span.active{
background-color:#f60;
}
#nav{
position:relative;
width:500px;
height:300px;
/*background-color:#fab000;*/
}
#nav .pic{
position:relative;
width:100%;
height:100%;
}
#nav .pic img{
position:absolute;
display:none;
top:0;
left:0;
width:100%;
height:100%;
}
#nav .pic img.out{
display:block;
}
#row #nav p{
position:absolute;
height:25px;
background-color:rgba(0,0,0,.5);
line-height:25px;
text-align:center;
color:#fff;
font-size:12px;
}
#row #nav p.top{
top:0;
width:100%;
}
#row #nav p.bottom{
bottom:0;
width:100%;
}
#row #nav p.left{
top:50%;
left:0;
cursor:pointer;
}
#row #nav p.right{
top:50%;
right:0;
cursor:pointer;
}
</style>
</head>
<body>
<div id='row'>
<div id='btn'>
<span class='active'>循环切换</span>
<span>单边切换</span>
</div>
<div id='nav'>
<div class='pic'>
<img src="images/k1.jpg" class='out'>
<img src="images/k2.jpg">
<img src="images/k3.jpg">
<img src="images/k4.jpg">
<img src="images/k5.jpg">
<img src="images/k6.jpg">
</div>
<p class='top'><span>1</span>/6</p>
<p class='bottom'>第<span>一</span>张图片</p>
<p class='left click'>上一张</p>
<p class='right click'>下一张</p>
</div>
</div>
</body>
<script>
var tab = document.querySelectorAll("#row #btn span"),
imgs = document.querySelectorAll("#row #nav .pic img"),
right = document.querySelector("#row #nav p.right"),
left = document.querySelector("#row #nav p.left"),
oTop = document.querySelector("#row #nav .top span"),
oBottom = document.querySelector("#row #nav .bottom span"),
arr = ["一","二","三","四","五","六"],//底部文字数组
flag = true;//标记,当前处于哪个模式(循环/单边)
index = 0;//下标
tab[0].onclick = function(){
this.className = 'active';
tab[1].className = '';
flag = true;
}
tab[1].onclick = function(){
this.className = 'active';
tab[0].className = '';
flag = false;
}
right.tabs = true;//自定义属性
right.onclick = tabImg;
left.tabs = false;//自定义属性
left.onclick = tabImg;
/*function(){
imgs[index].className = '';//清空原来的class
index--;
if(index < 0){
index = 5;
}
imgs[index].className = 'out';//给下一个img元素赋class值
oTop.innerHTML = index + 1;//顶部数字变化
oBottom.innerHTML = arr[index];//底部文字变化
}*/
function tabImg(){
imgs[index].className = '';
if(this.tabs){//当点击上一张或者下一张时,判断boolean是否为真,如果是假执行else语句
index++;
if(index > 5){
if(flag){//如果是真,index值为0
index = 0;
}else{
index--;//阻止index++
alert("已经是最后一张图片!");
}
}
}else{
index--;
if(index < 0){
if(flag){
index = 5;
}else{
index++;//阻止index--
alert("已经是第一张图片不能在切换了!")
}
}
}
imgs[index].className = 'out';//给下一个img元素赋class值
oTop.innerHTML = index + 1;//顶部数字变化
oBottom.innerHTML = arr[index];//底部文字变化
}
</script>
</html>
