本篇文章主要介绍了"js实现相册翻页，滚动，切换，轮播功能1"，主要涉及到方面的内容，对于Javascriptjrs看球网直播吧_低调看直播体育app软件下载_低调看体育直播感兴趣的同学可以参考一下：
我们在做web开发的时候，前台的效果要求是很高的，因为对于不懂程序的用户来说，前台的视觉冲击，无疑是对我们产品的第一印象。在完成web图片各种功能上，很多框架有...
我们在做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代码:
- <>"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];
- }
- }
-
！！此处需要注意，有些浏览器并不兼容event事件。
