数组头尾的添加删除 & 实现图片的简单滚动

 

删除数组头和尾:
pop()删除最后一个元素, shift()删除第一个元素 #删除什么返回什么
push()添加最后一个, unshift()添加第一个 #返回添加第几个元素的几

<script type="text/javascript">
 var ar = [1,2,3];
 alert(ar.pop());   //3
 alert(ar.shift());  //1
 alert(ar);          //2
 //返回添加的第几个元素
 alert(ar.push("world"));     //添加最后一个元素
 alert(ar.unshift("hello"));  //添加第一个元素
 alert(ar.push(true));        
 alert(ar);
</script>

====================图片的简单滚动====================

<body>
<div id="img"></div>
<button onclick="change(1)">上一张<button>
<button onclick="change(-1)">下一张<button>

</body>
<script type="text/javascript">
  var arr = ["../images/1.jpg","../images/2.jpg","../images/3.jpg"];
  
  (function(){
      show_img();
      })();
  
  function change(n){
      switch(n){
          case 1:
            var t = arr.pop();
            arr.unshift(t);
            show_img();
            break;
          case -1:
            var t = arr.shift();
            arr.push(t);
            show_img();
            break;
          default:
            show_img();
          }
      }
      function show_img(){
          var s = "";
          for(var i in arr){
              s += "<img src='"+arr[i]+"' style='width:150px' />";
              }
          document.getElementById("img").innerHTML = s;
          }
</script>

效果图:

 

==============稍复杂的图片切换效果==================

<body>
<img id="big_img" alt="图片正在加载中...." width="300" height="250" src=""/>
<table>
  <tr>
    <td><button onclick="change(1)">上一张</button></td>
    <td><div id="small_img" style="width:150px;"></div></td>
    <td><button onclick="change(-1)">下一张</button></td>
  </tr>
</table>


</body>
<script type="text/javascript">
  var str = "../images/1.jpg:../images/1.jpg,../images/2.jpg:../images/2.jpg,../images/3.jpg:../images/3.jpg";
  var arr1 = str.split(",");
  //alert(typeof(arr1));
  if(typeof(arr1) == "object"){
      //alert("111");
      for(var i in arr1){
        var arr2 = arr1[i].split(":");
          if(typeof(arr2) == "object"){
                arr1[i] = arr2;
              }
         }
      }
   //alert(arr1);
  (function(){
          document.getElementById("big_img").src = arr1[0][0];
          show_img(0);
             
      })();
  
       
    function change(n){
        switch(n){
            case 1:
            var t = arr1[arr1.length-1];
            arr1.pop();
            arr1.unshift(t);
            show_img();
            break;
            case -1:
            var t = arr1[0];
            arr1.shift();
            arr1.push(t);
            show_img();
            break;
            default:
            show_img();
            }
        }
     function show_img(){
          var s = "";
          for(var i in arr1){
              s += "<img src='"+arr1[i][0]+"' width='50' height='50' onclick='show_big("+i+")'/>";
              }
          document.getElementById("small_img").innerHTML = s;
       }
     function show_big(n){
           document.getElementById("big_img").src = arr1[n][0];
           }
</script>

效果图如下:

   (点击哪张小图片,大图显示哪张)

 

posted @ 2016-10-05 14:01  乱世_独自美  阅读(145)  评论(0)    收藏  举报