简单实现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 相关文章推荐
jscript之Open an Excel Spreadsheet
Jun 13 Javascript
fckeditor 获取文本框值的实现代码
Feb 09 Javascript
Asp.net下利用Jquery Ajax实现用户注册检测(验证用户名是否存)
Sep 12 Javascript
jQuery 追加元素的方法如append、prepend、before
Jan 16 Javascript
js实现非常简单的焦点图切换特效实例
May 07 Javascript
Ext JS框架中日期函数的用法及日期选择控件的实现
May 21 Javascript
原生js实现查询天气小应用
Dec 09 Javascript
用jQuery实现可输入多选下拉组合框实例代码
Jan 18 Javascript
深入理解Node.js中通用基础设计模式
Sep 19 Javascript
让Vue也可以使用Redux的方法
May 23 Javascript
基于node.js实现爬虫的讲解
Feb 18 Javascript
JavaScript函数Call、Apply原理实例解析
Feb 17 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实现当前页面点击下载文件的简单方法
2016/09/22 PHP
深入解析Laravel5.5中的包自动发现Package Auto Discovery
2017/09/13 PHP
用PHP做了一个领取优惠券活动的示例代码
2019/07/05 PHP
Laravel5.1框架路由分组用法实例分析
2020/01/04 PHP
JavaScript OOP类与继承
2009/11/15 Javascript
javascript模拟post提交隐藏地址栏的参数
2014/09/03 Javascript
jQuery实现不断闪烁文字的方法
2015/05/15 Javascript
详解JavaScript中的异常处理方法
2015/06/16 Javascript
javascript实现自动输出文本(打字特效)
2015/08/27 Javascript
jQuery插件EasyUI校验规则 validatebox验证框
2015/11/29 Javascript
JS 实现随机验证码功能
2017/02/15 Javascript
node文件上传功能简易实现代码
2017/06/16 Javascript
详解如何将 Vue-cli 改造成支持多页面的 history 模式
2017/11/20 Javascript
详解Vue-cli webpack移动端自动化构建rem问题
2018/04/07 Javascript
Vue EventBus自定义组件事件传递
2018/06/25 Javascript
AngularJS实现动态切换样式的方法分析
2018/06/26 Javascript
vue父组件触发事件改变子组件的值的方法实例详解
2019/05/07 Javascript
JavaScript实现轮播图效果代码实例
2019/09/28 Javascript
[06:44]2014DOTA2国际邀请赛-钥匙体育馆开战 开幕式振奋人心
2014/07/19 DOTA
Python用threading实现多线程详解
2017/02/03 Python
Python sqlite3事务处理方法实例分析
2017/06/19 Python
django自带的server 让外网主机访问方法
2018/05/14 Python
python 根据时间来生成唯一的字符串方法
2019/01/14 Python
Python如何访问字符串中的值
2020/02/09 Python
python中turtle库的简单使用教程
2020/11/11 Python
做一个能自适应高度的textarea的示例代码
2019/09/06 HTML / CSS
上海某公司.net方向笔试题
2014/09/14 面试题
应聘医药销售自荐书范文
2014/02/08 职场文书
行政助理的岗位职责
2014/02/18 职场文书
教研活动总结
2014/04/28 职场文书
营销部内勤岗位职责
2014/04/30 职场文书
2014年毕业演讲稿范文
2014/05/13 职场文书
高中学生会竞选演讲稿
2014/08/25 职场文书
领导干部群众路线剖析材料
2014/10/09 职场文书
关于React Native使用axios进行网络请求的方法
2021/08/02 Javascript
SQL Server 忘记密码以及重新添加新账号
2022/04/26 SQL Server