幻灯片的切换是网站常用功能，这个案例包括了顺序切换和循环切换两种效果。

1、循环切换就是点击下一张，到了最后一张，偷偷摸摸切换到第一张。点击上一张，到了第一张，再偷偷摸摸切换到最后一张， 让你觉得好像幻灯片永远看不完一样。

2、顺序切换就是点击到了第一张或者最后一张，直接粗暴的告诉用户，到头了。

具体页面效果可以点击查看

一、html代码

<div id="wrap">
<div id="btn-wrap">
<input type="button" id="btn1" value="循环切换" class="active">
<input type="button" id="btn2" value="顺序切换">
</div>
<div id="banner">
<img id="pic" src="images/loading.gif">
<h2 id="title">图片标题</h2>
<p id="counts">正在计算中...</p>
<a href="#" id="prev"><i class="iconfont icon-left"></i></a>
<a href="#" id="next"><i class="iconfont icon-right"></i></a>
</div>
</div>

二、css代码

body,input,h2,p{
    margin:0;
    padding:0;}
body{
    font:1em "microsoft Yahei";
    color:#333;}
img{
    vertical-align:middle;
    border:none;}
a{
    text-decoration:none;}
#wrap{
    width:975px;
    margin:20px auto 0;}
#btn-wrap{
    width:300px;
    margin:0 auto 30px;
    }
input[type=button]{
    width:140px;
    height:35px;
    background:#e1e1e1;
    border:none;
    color:#333;
    cursor:pointer;
    outline:none;}
input[type=button]:hover{
    background:#ddd;}
input[type=button].active   {
    background:rgba(227,194,38,1);
    color:#fff;}
#banner{
    height:350px;
    text-align:center;
    background:#FFF1CE;
    position:relative;}
#title{
    height:30px;
    line-height:30px;
    font-size:1.25rem;
    font-weight:normal;
    position:absolute;
    left:20px;
    bottom:20px;
    color:#fff;
    text-align:left;
    }
#counts{
    position:absolute;
    right:10px;
    top:10px;
    text-align:right;
    color:#fff;
    }
#prev,#next{
    display:none;
    position:absolute;
    color:#fff;
    width:40px;
    height:70px;
    line-height:70px;
    background:rgba(0,0,0,.2);
    top:50%;
    margin-top:-35px;
    }
#banner:hover a{
    display:block;}
#prev{
    left:0;
    border-radius:0 5px 5px 0;}
#next{
    right:0;
    border-radius:5px 0 0 5px;}
#prev:hover,#next:hover{
    background:rgba(0,0,0,.3);}
#prev i,#next i{
    font-size:2rem;}

三、js代码

window.onload=function(){
    //找元素
    var oBtn1=document.getElementById("btn1");
    var oBtn2=document.getElementById("btn2");
    var oBanner=document.getElementById("banner");
    var oImg=document.getElementById("pic");
    var oTitle=document.getElementById("title");
    var oCounts=document.getElementById("counts");
    var oPrev=document.getElementById("prev");
    var oNext=document.getElementById("next");
    
    var aUrl=["images/1.jpg","images/2.jpg","images/3.jpg","images/4.jpg","images/5.jpg"];
    var aTitle=["学会改作品集之后，我收到的offer多了一倍","超全面的变体美术字设计手册","推荐大家学习的通感设计方法","没灵感，就上优优灵感频道","2018年设计圈超实用干货大全"];
    var num=0;  /*初始化下标*/
    
    var btnTab=true;//创造一个开关，默认值是循环播放。
    
    oBtn1.onclick=function(){
        btnTab=true;
        this.className="active";
        oBtn2.className="";
        }
    oBtn2.onclick=function(){
        btnTab=false;
        this.className="active";
        oBtn1.className="";
        }
    
    //公共代码提取成函数，能反复利用
    function fnTab(){
        oImg.src=aUrl[num];
        oTitle.innerHTML=aTitle[num];
        oCounts.innerHTML=num+1+"/"+aUrl.length;
    }
    
    fnTab();/*先调用一次函数，初始化第一张图。*/
    
    //这里不能使用for循环，不然一下子就循环完所有图片，得到图片长度值，反而显示不了图片。应该是点击一次，下标值加一个1.
        oNext.onclick=function(){
            num++;
            if(num==aUrl.length){ //判断num的值，当等于数组长度的时候，再判断是循环还是顺序播放，从而设置num的值。  如果要循环，当num=数组长度的时候，回复到0. 
                if(btnTab){
                    num=0;
                }else{
                    alert('已经是最后一张了');
                    num=aUrl.length-1;
                    }
            }
            
                
            fnTab();
            
            }
        oPrev.onclick=function(){
            num--;
            if(num==-1){
                if(btnTab){
                    num=aUrl.length-1;
                }else{
                    alert('已经是第一张了');
                    num=0;
                    }
            }
            fnTab();
            }   
    
    }

案例下载地址：

链接: https://pan.baidu.com/s/1T5cSFAEC0aREvNzKONtGyA 提取码: cu5n