html相册翻页效果图,js实现相册翻页,滚动,切换,轮播功能
在完成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:
html相册翻页效果图,js实现相册翻页,滚动,切换,轮播功能相关推荐
- 使用hammer.js实现移动端手指滑动切换轮播图教程
今天面试前端开发时,要求在移动端实现手指滑动切换轮播图 这里我用到 bootsrap 的轮播图组件 + hammer.js 库 文章参考: Hammer.js - 李林峰的园子 - 博客园 (cnbl ...
- 业务展示类网站高保真原型模板库、企业品牌官网、公司业务介绍、产品展示及营销、首页模板、内页模板、单页模板、整站模板、导航、轮播、横幅、列表、客户、案例、页脚、动态面板、母版、页面事件、窗口函数
本作品是一套专为业务展示类网站而推出的原型模板库,适用于制作企业品牌官网.公司业务介绍.产品展示及营销等各类网站.作品中包含了符合目前主流展示类网站设计风格的丰富模板及素材,并以UI设计稿级别的高保真 ...
- js + css 做出网易云音乐的轮播图
先说一下思路,网易云轮播图是这样的,每隔一段时间(这里运用到了js的定时器)右边的图片会放大(css的transform)并切换(定位的z-index)上来(这里还运用了过渡transition),最 ...
- html怎么做到滚动鼠标转换,js实现的鼠标滚轮滚动切换页面效果(类似360默认页面滚动切换效果)...
本文实例讲述了js实现的鼠标滚轮滚动切换页面效果的方法.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: wheel var currentShowPageIndex = 0; v ...
- html js简单实现图片轮播功能
本章记录简单的图片轮播功能,需要html.js和css共同实现1.html文件 <!DOCTYPE html> <html><head><meta chars ...
- js实现相册翻页,滚动,切换,轮播功能
我们在做web开发的时候,前台的效果要求是很高的,因为对于不懂程序的用户来说,前台的视觉冲击,无疑是对我们产品的第一印象. 在完成web图片各种功能上,很多框架有很绚丽的效果,但今天我们来看看用原生的 ...
- 老徐WEB:JS简单实现图片滚动效果轮播图,自动、手动和自适应(二)
轮播图是前端网页中常用的功能,包括PC端和移动端,都会用到轮播图,像咨讯.电商和个人博客等,首页基本都会有轮播图. 老徐在上一篇文章的基础上[最简单详细的轮播图原理和制作过程],又扩展了功能,使之成为 ...
- dw按钮图片滚动js_轮播图--swiper插件/原生js/jQuery
1.swiper插件: 需要下载该插件到本地,并用link标签引用其swiper-bundle.min.css文件,用script引用其swiper-bundle.min.js文件,下载地址及官方文档 ...
- Swipper.js实现轮播功能
我是歌谣 放弃很难 但是坚持一定很酷 微信公众号关注小歌谣 今天我们来说一下工作中的一个小需求 就是给我们的页面去实现一个轮播的功能 最近需要实现一个小的需求 就是如何类似于如何把一个图片变成一个轮播 ...
最新文章
- 教你用Android做二次开发,识别率达到科大讯飞语音输入水平 | 原力计划
- 你为什么总学不会设计模式?
- python3下载慢-PIP 下载慢,给你Python3的pip换个源 一键换源
- UVA 11235 Frequent values(RMQ)
- 在React中处理事件
- 场景模型驱动自动化测试在盒马的探索及实践
- Java代码内容概述
- MCU OTA升级流程
- C/C++基础题035.一元二次方程公式
- 第二人生的源码分析(9)登录界面显示
- tensorflow roadshow 全球巡回演讲 会议总结
- SpiderMonkey 入门
- 计算机硕士论文导师评语,硕士论文指导教师评语
- https证书异常是什么意思?
- 网络基础 select模型
- 用AI变革新药研发,终极目标是延缓衰老,这家创业公司迎来“里程碑”
- 大数据处理过程之核心技术ETL详解
- 网络基础——牛客网刷题第五波
- 黑客攻防技术宝典(十六)
- ROS 2行动-actions-
热门文章
- RK3399 Android7.1进入烧录模式的几种方法
- [Err] [Imp] 1366 - Incorrect string value: ‘\xE8\xB5\x96\xE5\x81\xA5...‘ for column ‘学生姓名‘ at row 1
- 怎么关闭文件预读取的服务器,r2如何开启预读和SuperFetch
- uni-app 360加固(APP加固)
- zeros什么意思_Matlab中 函数zeroS(1,8) 代表什么意思??
- scrollIntoView 使用方法
- 工业平板电脑在智能工厂的应用
- 长文干货助UI设计师拿高薪
- OpenStack Pike版本+KVM+Passthrough+NVIDIA显卡1060透传
- Google惩罚日本网站:PR由9下降到5