js实现相册翻页，滚动，切换，轮播功能

JS代码: 

   
 

    
  
 
    
  
 
    
  
            var arr = new Array(); 
    
  
            arr[0] = "1.jpg"; 
    
  
            arr[1] = "2.jpg"; 
    
  
            arr[2] = "3.jpg"; 
    
  
            arr[3] = "4.jpg"; 
    
  
            arr[4] = "5.jpg"; 
    
  
            var index = 0; 
    
  
            function upNext(bigimg) { 
    
  
            var action; 
    
  
            var width = bigimg.width; 
    
  
            var height = bigimg.height; 
    
  
            bigimg.onmousemove = function () { 
    
  
                if (window.event.offsetX < width / 2) { 
    
  
                    action = 'left' 
    
  
                    bigimg.style.cursor = 'url(img/arr_left.cur),auto';//将鼠标指针更换成向左指向箭头 
    
  
                }  
    
  
                else { 
    
  
                    bigimg.style.cursor = 'url(img/arr_right.cur),auto'; 
    
  
                    action = 'right'; 
    
  
                } 
    
  
            } 
    
  
            bigimg.onmouseup = function () { 
    
  
                if (action == 'left') { 
    
  
                   if(index==0) 
    
  
                       return ; 
    
  
                   else 
    
  
                       index--; 
    
  
                } 
    
  
                else { 
    
  
                  if(index == 4) 
    
  
                    return; 
    
  
                  else 
    
  
                      index ++ ; 
    
  
                } 
    
  
                this.src = 'img/pic'+arr[index]; 
    
  
            } 
    
  
        } 
    
  
         
   
 

 ！！此处需要注意，有些浏览器并不兼容event事件。

#p#

2.自动切换功能

实现步骤:

1.首先还是需要一个img标签，显示一张图片。

2.需要一个数组，记录每张图片的路径，设置，跳转间隔时间。

3.添加一个js方法，根据数组下标，更改图片src。利用setInterval方法循环执行。

HTML:

js:

   
 

    
  
 
    
  
        var curIndex=0; 
    
  
        //时间间隔 单位毫秒 
    
  
        var timeInterval=3000; 
    
  
        var arr=new Array(); 
    
  
        arr[0]="1.jpg"; 
    
  
        arr[1]="2.jpg"; 
    
  
        arr[2]="3.jpg"; 
    
  
        arr[3]="4.jpg"; 
    
  
        arr[4]="5.jpg"; 
    
  
        setInterval(changeImg,timeInterval);//每隔timeInterval时间，执行一次changeImg事件 
    
  
        function changeImg() 
    
  
        { 
    
  
            var obj=document.getElementById("showpic"); 
    
  
            if (curIndex==arr.length-1) 
    
  
            { 
    
  
                curIndex=0; 
    
  
            } 
    
  
            else 
    
  
            { 
    
  
                curIndex+=1; 
    
  
            } 
    
  
            obj.src="img/pic"+arr[curIndex]; 
    
  
        } 
    
  
     
   
 

 #p#

3.循环滚动功能(右移)

 实现步骤:

1.我们需要对html进行布局，将所有要显示的图片都放在一行以内。此处注意:行内所有图片的宽度需大于外部容器的大小，否则不能达到预想效果。

2.设置滚动事件，宽度，滚动方向。此处注意,滚动速度，数字越大，滚动的越慢(每间隔一段时间执行，数字越大间隔时间越长，滚动速度越慢)；滚动的方向其实就是if else中的

简单的逻辑判断以及自增自减实现的。

3.第三部分，我们需要添加js事件，让鼠标放到滚动图片上时，时滚动终止；鼠标离开时，继续滚动。

HTML:

!!此处添加需要展示的所有图片。布局不仅限于table标签，多种html标签都能实现。