js图片切换

1.不同方式的图片切换

功能点:
　　1.页面默认循环切换,循环切换按钮获得焦点
　　2.点击顺序切换时,顺序切换按钮获得焦点
　　　　点击上一张时,当图片为第一张时,图片不再进行切换,图片张数和描述也不在变动;
　　　　点击下一张时,当图片为最后一张时,图片不再进行切换,图片张数和描述也不在变动;
　　2.点击上一张按钮时触发的事件
　　　　点击上一张时,当图片为第一张时,图片切换到最后一张,图片张数和描述显示为对应图片的张数和描述;
　　　　点击下一张时,当图片为最后一张时,图片切换到第一张,图片张数和描述显示为对应图片的张数和描述;
　　3.点击左右按钮是图片内容/张数/描述进行相应的变动
开发思路:
　　1.实现图片循序切换:
　　　　声明变量num,使其初始值为0
　　　　上一张按钮:每点击一次,使num减1,当num的值小于0时,使其值等于图片数组的长度减1;
　　　　下一张按钮:每点击一次,使num加1,当num的值大于等于图片数组的长时,使其值0.
　　2.实现图片顺序切换:
　　　　上一张按钮:每点击一次,使num减1,当num的值小于0时,使其值等于0;
　　　　下一张按钮:每点击一次,使num加1,当num的值大于等于图片数组的长时,使其值等于图片数组的长度减1.
　　3.点击左右按钮触发的事件:
　　　　根据num来改变相应的数值和索引值
　　4.实现切换方式的切换:通过判断状态按钮的className来执行相应的事件函数

<div class="box"><input type="button" name="btn1" id="btn1" value="循环切换"  class="act"/><input type="button" name="btn2" id="btn2" value="顺序切换" /><div class="box1"><a href="javascript:;" id="lf_btn">&lt;</a><a href="javascript:;" id="rt_btn">&gt;</a><p>计算中...</p><img src=""/><p>计算中...</p></div>
</div>

*{margin: 0;padding: 0;    
}
.box{width: 500px;margin: 50px auto 0;text-align: center; 
}
input{width: 80px;height: 30px;background: #C0C0C0;border: none;margin: 0 5px;
}
.act{background: palevioletred;
}
.box1{width: 100%;height: 300px;position: relative;margin-top: 20px;background: #ccc;
}
.box1 img{width: 100%;height: 100%;
}
a{position: absolute;top: 50%;width: 50px;height: 50px;text-align: center;color: #fff;font-weight: bold;line-height: 50px;border-radius: 50%;text-decoration: none;background: #C0C0C0;opacity: .6;margin-top: -25px;font-size: 40px;
}
#lf_btn{left: 0;
}
#rt_btn{right: 0;
}
p{width: 100%;background: rgba(0,0,0,.5);height: 30px;color: #fff;position: absolute;left: 0;line-height: 30px;
}
p:nth-of-type(1){top: 0;
}
p:nth-of-type(2){bottom: 0;
}
a:hover{pacity: .8;
}

var lf_btn=document.getElementById("lf_btn");
var rt_btn=document.getElementById("rt_btn");
var oImg=document.getElementsByTagName("img")[0];
var aBtns=document.getElementsByTagName("input");
var arr=[["../demo/鑫/img/1.jpg","../demo/鑫/img/2.jpg","../demo/鑫/img/3.jpg","../demo/鑫/img/4.jpg","../demo/鑫/img/5.jpg"],["图片一","图片二","图片三","图片四","图片五"]];
var ps=document.getElementsByTagName("p");
var num=0;
var len=arr[0].length;
//页面初始化
fn1();
function fn1(){oImg.src=arr[0][num];ps[0].innerText=num+1+'/'+len;ps[1].innerText=arr[1][num];
}
//图片左右切换
//上一张
fn2();
function fn2(){lf_btn.onclick=function(){num--;if(num<0){num=len-1;}fn1();}//下一张rt_btn.οnclick=function(){num++;if(num>=len){num=0;}fn1();}
}//切换方式转换
//循环切换
var that=null;
function clear(that){for (var i=0;i<aBtns.length;i++) {aBtns[i].className=" ";}that.className="act";
}
aBtns[0].οnclick=function(){//上一张clear(this);fn2();
}//顺序切换
aBtns[1].οnclick=function(){clear(this);//上一张lf_btn.οnclick=function(){num--;if(num<0){num=0;}fn1();}//下一张rt_btn.οnclick=function(){num++;if(num>=len){num=len-1;}fn1();}}

2.自定义属性图片切换

HTML

<div id="box"><img src=""/><ul id="btns"></ul>
</div>

CSS

*{margin: 0;padding: 0;    
}
#box{margin: 20px 0 0 30px;position: relative;width: 400px;text-align: center;
}
#box ul{width: 100%;text-align: center;
}
#box li{list-style: none;display: inline-block;width: 40px;height: 10px;background: #C0C0C0;margin:0 2px;
}
#box img{width: 400px;height: 200px;
}
#box .act{background: palevioletred;
}

JS部分

var oImg=document.getElementsByTagName("img")[0];
var oBtn=document.getElementById("btns");
var Btns=document.getElementsByTagName("li");
var str="";
var imgs=["http://tse4.mm.bing.net/th?id=OIP.eyrAJHrqfyG4JDdYH2R57gEsDg&w=214&h=160&c=7&qlt=90&o=4&pid=1.7","http://tse2.mm.bing.net/th?id=OIP.jYyuulCIIlC-0U8vLeZcPQEsCo&w=300&h=168&c=7&qlt=90&o=4&pid=1.7","http://tse3.mm.bing.net/th?id=OIP.nxOcHfdj3G4tfdQ1da34ngEXDf&w=223&h=174&c=7&qlt=90&o=4&pid=1.7","http://tse3.mm.bing.net/th?id=OIP.yfBtP9Yis8AFz3MIBMiEhgEyDM&w=300&h=200&c=7&qlt=90&o=4&pid=1.7","http://tse1.mm.bing.net/th?id=OIP.jAS8cEFr324zQBQjlfg1EAEyDM&w=297&h=193&c=7&qlt=90&o=4&pid=1.7"];
//页面初始化
//生成切换按钮
for (var i=0;i<imgs.length;i++) {str+="<li></li>";
}
oBtn.innerHTML=str;
oImg.src=imgs[0];
Btns[0].className="act";//按钮点击切换图片，主要运用自定义属性
for (var i=0;i<Btns.length;i++) {Btns[i].index=i;Btns[i].onclick=function(){for (var i=0;i<Btns.length;i++) {Btns[i].className=" ";}this.className="act";oImg.src=imgs[this.index];}
}