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

我们在做web开发的时候，前台的效果要求是很高的，因为对于不懂程序的用户来说，前台的视觉冲击，无疑是对我们产品的***印象。

在完成web图片各种功能上，很多框架有很绚丽的效果，但今天我们来看看用原生的js如何简单的实现这些功能。欢迎大家交流指正。

1.相册左右点击翻页功能

实现步骤

1.需要一个HTML标签img，添加一张图片。

2.然后需要添加一个js事件onmouseover，使每次鼠标移到图片上指针都会随左右发生变化。

3.***需要添加一个点击事件，根据鼠标的在左边还是右边，判断是应该上一页还是下一页翻动相册。

HTML代码:

<body> 
        <div> 
            <img src="img/pic1.jpg" id = "bigimg" onmouseover="upNext(this)" width="300" height="300"> 
        </div> 
</body>

JS代码:

<script type="text/javascript"> 
 
            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]; 
            } 
        } 
        </script>

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

#p#

2.自动切换功能

实现步骤:

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

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

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

HTML:

<body> 
        <img src="img/pic1.jpg" width="427" height="219" id="showpic" /> 
</body>

js:

<script language =javascript > 
        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]; 
        } 
    </script>

#p#

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

实现步骤:

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

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

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

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

HTML:

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

<div id=demo style="overflow:hidden;width: 300px; height: 100px;"> 
            <table> 
                <tr> 
                    <td id=demo1 valign=top> 
                        <table align=left cellpadding=0 cellspace=0 border=0> 
                            <tr> 
                                <td> 
                                    <img src="img/jg.jpg"> 
                                </td> 
                                <td> 
                                    <img src="img/fxz.jpg"> 
                                </td> 
                                <td> 
                                    <img src="img/gh.jpg"> 
                                </td> 
                                <td> 
                                    <img src="img/yj.jpg"> 
                                </td> 
                                <td> 
                                    <img src="img/zzh.jpg"> 
                                </td> 
                            </tr> 
                        </table> 
                    </td> 
                    <td id=demo2 valign=top ><td> 
                </tr> 
            </table> 
        </div>

js:

<script>  
            var speed=30 ;//设置滚动速度 
            demo2.innerHTML=demo1.innerHTML ; 
            demo.scrollLeft=demo.scrollWidth ; 
            function Marquee(){  
                if(demo.scrollLeft<=0)  
                demo.scrollLeft+=demo2.offsetWidth;  
                else{  
                    demo.scrollLeft--;  
                }  
            }  
            var MyMar=setInterval(Marquee,speed) ; 
            demo.onmouseover=function() {clearInterval(MyMar);}  
            demo.onmouseout=function() {MyMar=setInterval(Marquee,speed);}  
</script>

#p#

4.相册简单轮播实现

实现步骤:

1.首先对html进行图片布局，使得上面一个有一个大的img标签，下面排列若干个小的img标签。

2.我们需要添加两个js事件，分别在鼠标移到小img标签和移出小img标签时产生效果。

3.在鼠标移到小img标签上时，使大的img图片src变化，并且使小img标签的border属性值颜色发生改变，在鼠标移出时颜色改变回来。

！！此处注意，大家需要使用简单的css进行页面的排版与装饰，也可以躲在css上下些功夫，使页面更漂亮。

HTML:

<body> 
        <div><img src="img/pic1.jpg" width="320" height="300" id="bigimg"></div> 
        <div> 
            <ul> 
                <li><img src="img/pic1.jpg" width="60" height="60" onmouseover="rep(this);" onmouseout="recover(this)"></li> 
                <li><img src="img/pic2.jpg" width="60" height="60" onmouseover="rep(this);" onmouseout="recover(this)"></li> 
                <li><img src="img/pic3.jpg" width="60" height="60" onmouseover="rep(this);" onmouseout="recover(this)"></li> 
                <li><img src="img/pic4.jpg" width="60" height="60" onmouseover="rep(this);" onmouseout="recover(this)"></li> 
                <li><img src="img/pic5.jpg" width="60" height="60" onmouseover="rep(this);" onmouseout="recover(this)"></li> 
            </ul> 
        </div> 
</body>

js:

<script type="text/javascript"> 
            function rep(obj){ 
                document.getElementById("bigimg").src = obj.src ; 
                obj.style.border = "2px solid blue" ; 
            } 
            function recover(obj){ 
                obj.style.border = "2px solid black" ; 
            } 
</script>

潮平帆远，击水三千