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.onclick=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].onclick=function(){
    //上一张
    clear(this);
    fn2();
}
            
//顺序切换
aBtns[1].onclick=function(){
    clear(this);
    //上一张
    lf_btn.onclick=function(){
        num--;
        if(num<0){
           num=0;
        }
        fn1();
     }
     //下一张
     rt_btn.onclick=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];
    }
}