简单实现JavaScript图片切换效果


Posted in Javascript onNovember 28, 2016

JavaScript实现图片切换,主要用到setInterval()函数clearInterval()函数,前者功能是开启动画,后者功能则为清除动画(可理解为使动画停止),为了使动画停止,则需要定义全局变量作为标志,标志返回setInterval()函数的id,id作为clearInterval()函数的引用,目的是为了告诉clearInterval()函数动画暂停的位置。下面是实现的代码:

部分HTML代码:第一个为左按钮,是一张带箭头的透明图片,点击实现图片右滑动,第二个为图片展示区域,第三个是右按钮,点击实现图片左滑动。

<body onload="change()">
 <div id="changePhotos">
   <img src="images/left.png" id="leftimg" onclick="rightMove()"/>
   <img id="photo" src="images/4.jpg" onmouseover="off()" onmouseout="on()" />
   <img src="images/right.png" id="rightimg" onclick="leftMove()"/> 
 </div>
 </body>

JavaScript全部代码:JS主要实现鼠标放在图片上方,动画暂停,移开图片动画开始,以及点击左右按钮,图片的左右切换。

var photos = ['images/1.jpg','images/2.jpg','images/3.jpg','images/4.jpg','images/5.jpg'];
var count = 0; //记录图片张数
var flag; //返回动画id
function callback() //实现图片切换
{ 
 document.getElementById("photo").src = photos[count];
 count++;
 if (count == photos.length)
  count = 0; 
} 

function change() //动画开启
{
 flag = setInterval(callback,2000); 
}

function off() //onmouseover事件发生,动画暂停
{
 clearInterval(flag);
}

function on() //onmouseout事件发生,动画继续
{
 flag = setInterval(callback,2000); 
}

function leftMove() //实现左滑动
{
 document.getElementById("photo").src = photos[count];
 count++;
 if (count == photos.length)
  count = 0;
}

function rightMove() //实现右滑动
{
 count--;
 document.getElementById("photo").src = photos[count];
 if (count <= 0)
  count = photos.length - 1;
}

整体实现代码比较简单,具体展示样式则用到CSS,希望对初学者有所帮助!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
奉献给JavaScript初学者的编写开发的七个细节
Jan 11 Javascript
Node.js开发指南中的简单实例(mysql版)
Sep 17 Javascript
JS实现可关闭的对联广告效果代码
Sep 14 Javascript
JavaScript常用本地对象小结
Mar 28 Javascript
jQuery解决$符号命名冲突
Jun 18 Javascript
javascript中mouseenter与mouseover的异同
Jun 06 Javascript
微信小程序自定义toast实现方法详解【附demo源码下载】
Nov 28 Javascript
JS实现简单的浮动碰撞效果示例
Dec 28 Javascript
JavaScript设计模式之工厂模式简单实例教程
Jul 03 Javascript
Vue指令v-for遍历输出JavaScript数组及json对象的常见方式小结
Feb 11 Javascript
JS前端面试必备——基本排序算法原理与实现方法详解【插入/选择/归并/冒泡/快速排序】
Feb 24 Javascript
微信小程序 wx:for 与 wx:for-items 与 wx:key的正确用法
May 19 Javascript
jQGrid动态填充select下拉框的选项值(动态填充)
Nov 28 #Javascript
JS调用打印机功能简单示例
Nov 28 #Javascript
完全深入学习Bootstrap表单
Nov 28 #Javascript
EasyUI Combobox设置默认值 获取text的方法
Nov 28 #Javascript
Bootstrap选项卡动态切换效果
Nov 28 #Javascript
js简单正则验证汉字英文及下划线的方法
Nov 28 #Javascript
Bootstrap实现导航栏的2种方式
Nov 28 #Javascript
You might like
用PHP制作静态网站的模板框架
2006/10/09 PHP
两个开源的Php输出Excel文件类
2010/02/08 PHP
php中常见的sql攻击正则表达式汇总
2014/11/06 PHP
php中heredoc与nowdoc介绍
2014/12/25 PHP
ext for eclipse插件安装方法
2008/04/27 Javascript
基于jquery实现控制经纬度显示地图与卫星
2013/05/20 Javascript
原生JavaScript+LESS实现瀑布流
2014/12/12 Javascript
基于HTML+CSS,jQuery编写的简易计算器后续(添加了键盘监听)
2016/01/05 Javascript
js实现页面跳转的几种方法小结
2016/05/16 Javascript
JS复制对应id的内容到粘贴板(Ctrl+C效果)
2017/01/23 Javascript
js获取元素下的第一级子元素的方法(推荐)
2017/03/05 Javascript
JS实现带导航城市列表以及输入搜索功能
2018/01/04 Javascript
深入理解Node module模块
2018/03/26 Javascript
在vue中使用Autoprefixed的方法
2018/07/27 Javascript
微信小程序时间戳转日期的详解
2019/04/30 Javascript
Element-ui DatePicker显示周数的方法示例
2019/07/19 Javascript
关于vue项目中搜索节流的实现代码
2019/09/17 Javascript
vue - vue.config.js中devServer配置方式
2019/10/30 Javascript
Vue 通过公共字段,拼接两个对象数组的实例
2019/11/07 Javascript
SpringBoot+Vue开发之Login校验规则、实现登录和重置事件
2020/10/19 Javascript
[03:11]不朽宝藏三外观展示
2020/09/18 DOTA
深入讲解Python中面向对象编程的相关知识
2015/05/25 Python
你眼中的Python大牛 应该都有这份书单
2017/10/31 Python
Python selenium抓取微博内容的示例代码
2018/05/17 Python
python实现QQ批量登录功能
2019/06/19 Python
python自动生成model文件过程详解
2019/11/02 Python
购买200个世界上最好的内衣品牌:Bare Necessities
2017/02/11 全球购物
巴基斯坦电子产品购物网站:Home Shopping
2017/09/14 全球购物
拾金不昧的表扬信
2014/01/16 职场文书
化妆师职业生涯规划书
2014/02/16 职场文书
学校政风行风整改方案
2014/10/25 职场文书
2015年大班保育员工作总结
2015/05/18 职场文书
离职员工给领导和同事的感谢信
2015/11/03 职场文书
js中Map和Set的用法及区别实例详解
2022/02/15 Javascript
python中字符串String及其常见操作指南(方法、函数)
2022/04/06 Python
Golang日志包的使用
2022/04/20 Golang