原生js解决图片点击左右切换（简单轮播图）的解决办法

内容摘要
这篇文章主要为大家详细介绍了原生js解决图片点击左右切换（简单轮播图）的简单示例，具有一定的参考价值，可以用来参考一下。

想写一个综合性的小案例，主要会运用到数组和判断以及
文章正文

这篇文章主要为大家详细介绍了原生js解决图片点击左右切换（简单轮播图）的简单示例，具有一定的参考价值，可以用来参考一下。

想写一个综合性的小案例，主要会运用到数组和判断以及我前面几篇博客所复习到的js的知识。今天案例想要实现的效果图如下图所示：效果是：点击“循环切换”按钮，那么“一号”位置的文案就要写入“图片可以循环”，而下面的左右箭头在点击过程中可以循环点击，并且“二号”和“三号”要响应切换到相对应的数字和文字内容；否则，点击“顺序切换”按钮，那么“一号”位置的文案就要写入“图片是顺序播放”除了“二号”和“三号”要响应切换到相对应的数字和文字内容之外，无论是第一张还是最后一张都不能继续往下点击了。好的具体来看代码。先来简单的看一下布局和样式： CSS代码如下： 

<style>
    body{text-align: center}
    #box{width:400px;height:400px;border:5px solid #e5e5e5;margin:20px auto;position:relative;}
    #img{width:100%;height:100%;}
    #text1{width:100%;height:30px;position:absolute;left:0;top:0;background: #000;text-align:center; line-height:30px;color:#fff; font-size:14px; filter:alpha(opacity:80); opacity:0.8;}
    #text2{width:100%;height:30px;position:absolute;left:0;bottom:0;background: #000;text-align:center; line-height:30px; color:#fff; font-size:14px; filter:alpha(opacity:80); opacity:0.8;}
    a{width:40px; height:40px; background:#fff; filter:alpha(opacity:80); opacity:0.8; position:absolute; top:160px; font-size:18px; color:#000; text-align:center; line-height:40px; text-decoration:none; }
    a:hover { filter:alpha(opacity:30); opacity:0.3; }
    #prev {left:10px;}
    #next {right:10px;}
  </style>
/***  来自php教程 （www.idcnote.com）***/
html代码如下： 

<body>
<input id="btn1" type="button" value="循环切换">
<input id="btn2" type="button" value="顺序切换">
<p id="p1">图片可以循环</p>
<div id="box">
  <img id="img" />
  <p id="text1"></p>
  <p id="text2">图片文字加载中……</p>
  <a id="prev" href="javascript:void(0)"><</a>
  <a id="next" href="javascript:void(0)">></a>
</div>
</body>
<!--   来自 php教程 （www.idcnote.com）-->
接下来就是最重要的js的写法了，因为是原生的写法，所以只能先获取到所有能用到的id，然后再去写具体的效果： JS代码如下： 

/**
 * 解决图片点击左右切换
 *
 * @param 
 * @arrange （www.idcnote.com）
 **/
<script>
  window.onload= function(){
    var oBtn1=document.getElementById("btn1");
    var oBtn2=document.getElementById("btn2");
    var oBox=document.getElementById("box");
    var oImg=document.getElementById("img");
    var oText1=document.getElementById("text1");
    var p1=document.getElementById("p1");
    var oText2=document.getElementById("text2");
    var oPrev=document.getElementById("prev");
    var oNext=document.getElementById("next");
    var arrSrc=["img/pic1.jpg","img/pic2.jpg","img/pic3.jpg","img/pic4.jpg"];
    var arrTxt=["文案1","文案2","文案3","文案4"];
    var num=0;
    var onOff=true; //true 循环 false 走顺序
    function fn(){   //开始先定义一个公共函数方便下面调用
      oImg.src = arrSrc[num];   //图片的显示路径
      oText1.innerHTML= num+1 +"/" + arrTxt.length;  //图中二号位置的数字显示
      oText2.innerHTML=arrTxt[num];  //图中三号位置的文字显示
    }
    fn();/*切记，定义之后，这里一定要调用一下*/
    //循环按钮
    oBtn1.onclick=function(){
      onOff=true;
        p1.innerHTML="图片会循环"
    };
    //顺序按钮
    oBtn2.onclick=function(){
      onOff=false;
        p1.innerHTML = "图片按顺序走"
    };
    oPrev.onclick = function(){
      num--; //点击左边的箭头那么就是num--
      if(onOff){ //onOff默认是true所以就是走循环了
        if(num==-1){  //在一直减的过程中，数组里最小的就是0，所以等于-1的时候要循环下去所以让它显示最后一张
          num=arrSrc.length-1;
        }
      }else{ //否则onOff是false所以就是走顺序了
        if(num==-1){   //在一直减的过程中，数组里最小的就是0，所以等于-1的时候没有数据走了，所以让它显示第一张不能点击了
          num=0; 
          alert("已经是第一张了")
        }
      }
      fn();//判断好之后记得调用函数
    };
    //相反下面就是点击左边的箭头所做出的判断，道理同上
    oNext.onclick = function(){
      num++;
      if(onOff){
        if(num==arrTxt.length){
          num=0;
        }
      }else{
        if(num==arrTxt.length){
          num=arrSrc.length-1;
          alert("已经是最后一张了")
        }
      }
      fn();
    }
  }
</script>
好了，以上就是这个案例所有代码了，这里面牵涉到两层逻辑关系就是点击最上面的循环和顺序的按钮时，下面的图片所对应到相应的效果，第二个逻辑就是当确定好是循环或者是顺序播放的其中一个之后，下面的图片在点击切换的时候是判断循环的一定要可以让它一直点击下去，而顺序的就是点击到最后一张就不能走下去了，要显示已经到头了，其实这些明白之后就好说了。

注：关于原生js解决图片点击左右切换（简单轮播图）的简单示例的内容就先介绍到这里，更多相关文章的可以留意

代码注释
上一篇JavaScript 获取input文字焦点消失离开显示的解决办法下一篇JS的原型继承功能实例

作者：喵哥笔记

IDC笔记

学的不仅是技术，更是梦想！