在完成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