在完成web图片各种功能上，很多框架有很绚丽的效果，但今天我们来看看用原生的js如何简单的实现这些功能。欢迎大家交流指正。
1.相册左右点击翻页功能
实现步骤
1.需要一个HTML标签img，添加一张图片。
2.然后需要添加一个js事件onmouseover，使每次鼠标移到图片上指针都会随左右发生变化。
3.***需要添加一个点击事件，根据鼠标的在左边还是右边，判断是应该上一页还是下一页翻动相册。
HTML代码:
JS代码:
vararr=newArray();
arr[0]="1.jpg";
arr[1]="2.jpg";
arr[2]="3.jpg";
arr[3]="4.jpg";
arr[4]="5.jpg";
varindex=0;
functionupNext(bigimg){
varaction;
varwidth=bigimg.width;
varheight=bigimg.height;
bigimg.onmousemove=function(){
if(window.event.offsetX
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事件。
2.自动切换功能
实现步骤:
1.首先还是需要一个img标签，显示一张图片。
2.需要一个数组，记录每张图片的路径，设置，跳转间隔时间。
3.添加一个js方法，根据数组下标，更改图片src。利用setInterval方法循环执行。
HTML:
js:
varcurIndex=0;
//时间间隔单位毫秒
vartimeInterval=3000;
vararr=newArray();
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事件
functionchangeImg()
{
varobj=document.getElementById("showpic");
if(curIndex==arr.length-1)
{
curIndex=0;
}
else
{
curIndex+=1;
}
obj.src="img/pic"+arr[curIndex];
}
3.循环滚动功能(右移)
实现步骤:
1.我们需要对html进行布局，将所有要显示的图片都放在一行以内。此处注意:行内所有图片的宽度需大于外部容器的大小，否则不能达到预想效果。
2.设置滚动事件，宽度，滚动方向。此处注意,滚动速度，数字越大，滚动的越慢(每间隔一段时间执行，数字越大间隔时间越长，滚动速度越慢)；滚动的方向其实就是if else中的
简单的逻辑判断以及自增自减实现的。
3.第三部分，我们需要添加js事件，让鼠标放到滚动图片上时，时滚动终止；鼠标离开时，继续滚动。
HTML:
!!此处添加需要展示的所有图片。布局不仅限于table标签，多种html标签都能实现。
js:
varspeed=30;//设置滚动速度
demo2.innerHTML=demo1.innerHTML;
demo.scrollLeft=demo.scrollWidth;
functionMarquee(){
if(demo.scrollLeft<=0)
demo.scrollLeft+=demo2.offsetWidth;
else{
demo.scrollLeft--;
}
}
varMyMar=setInterval(Marquee,speed);
demo.οnmοuseοver=function(){clearInterval(MyMar);}
demo.οnmοuseοut=function(){MyMar=setInterval(Marquee,speed);}
4.相册简单轮播实现
实现步骤:
1.首先对html进行图片布局，使得上面一个有一个大的img标签，下面排列若干个小的img标签。
2.我们需要添加两个js事件，分别在鼠标移到小img标签和移出小img标签时产生效果。
3.在鼠标移到小img标签上时，使大的img图片src变化，并且使小img标签的border属性值颜色发生改变，在鼠标移出时颜色改变回来。
！！此处注意，大家需要使用简单的css进行页面的排版与装饰，也可以躲在css上下些功夫，使页面更漂亮。
HTML:
js:
