js应用之实现图片切换效果

数组的操作与应用

数组的定义

var 数组名=new Array(); //创建空数组

var 数组名=new Array(size);//创建指定数组长度的数组

var 数组名=new Array(值1；值2；...)//用指定的几个元素创建数组

数组操作常用方法

数组名.length 获取数组的长度

pop() 删除并返回数组的最后一个元素

push() 向数组的末尾添加一个新的数组元素，返回新的数组长度

sort() 对数组元素进行排序

思路：

　　第1步：简单的布局并设计基本的显示样式；

第2步：通过js获取相关元素；

第3步：通过数组进行图片url和对应文字描述的存储；

第4步：初始化：包括图片的初始化，显示图片数字以及对应文字的初始化等；

第5步：点击按钮切换图片，编写对应的函数，其实就是数组的简单应用。

接下来先看看效果图，然后进行对应的代码讲解。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
    <title></title>
    <style type="text/css">
         .box{  
            width: 833px;  
            height:500px;  
            border: 10px solid #ccc;  
            position: relative;  
            margin: 40px auto 0;  
        }  
        .box a{  
            width: 30px;  
            height: 30px;  
            background-color: #000;  
            border: 5px solid #fff;  
            position: absolute;  
            top:220px;  
            text-align: center;  
            font-size:25px;  
            font-weight: bold;  
            line-height: 30px;  
            color:#fff;  
            text-decoration: none;  
            opacity: 0.4;  
        }  
        .box a:hover{  
            opacity:0.8;  
        }  
        .box #prev{  
            left: 10px;  
        }  
        .box #next{  
            right: 10px;  
        } 

    </style>
    <script >
        window.onload=function(){
        var oprev=document.getElementById('prev');
        var onext=document.getElementById('next');
        var oimg=document.getElementById('img');

        var arr=new Array();
        arr[0]='image/1.jpg';
        arr[1]='image/2.jpg';
        arr[2]='image/3.jpg';
        
         

         var index=0;
         //alert('111');

　　　//鼠标单击事件
        onext.onclick=function(){
            index++;
            oimg.src=arr[index];
           
             //alert(arr[index]);
            if(index==arr.length-1){
                index=0;
            }
        }

　　　　//鼠标单击事件
        oprev.onclick=function(){
             oimg.src=arr[index];
             index--;
             if (index==-1) {
                index=arr.length-1;
             }
        }

        }

    </script>
</head>
<body>
     <div class="box">  
        <a id="prev" href="javascript:;"> < </a>  
        <a id="next" href="javascript:;"> > </a>  
        <img id="img" src="image/1.jpg" alt=""/>  
    </div>  
  

</body>
</html>

运行效果截图：