简单实现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 相关文章推荐
20款效果非常棒的 jQuery 插件小结分享
Nov 18 Javascript
js判断上传文件的类型和大小示例代码
Oct 18 Javascript
基于jquery插件制作左右按钮与标题文字图片切换效果
Nov 07 Javascript
功能强大的Bootstrap效果展示(二)
Aug 03 Javascript
bootstrap datetimepicker日期插件使用方法
Jan 13 Javascript
Angular指令之restict匹配模式的详解
Jul 27 Javascript
d3.js实现自定义多y轴折线图的示例代码
May 30 Javascript
在vue项目中,将juery设置为全局变量的方法
Sep 25 Javascript
vue过滤器用法实例分析
Mar 15 Javascript
elementUI Tree 树形控件的官方使用文档
Apr 25 Javascript
jQuery实现手风琴效果(蒙版)
Jan 11 jQuery
nuxt.js添加环境变量,区分项目打包环境操作
Nov 06 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合并数组array_merge函数运算符加号与的区别
2008/10/31 PHP
PHP设计模式之责任链模式的深入解析
2013/06/13 PHP
Laravel构建即时应用的一种实现方法详解
2017/08/31 PHP
php生成毫秒时间戳的实例讲解
2017/09/22 PHP
php实现对文件压缩简单的方法
2019/09/29 PHP
基于Jquery的文字自动截取(提供源代码)
2011/08/09 Javascript
js变换显示图片的实例
2013/04/16 Javascript
jquery实现简单的全选和反选功能
2016/01/02 Javascript
微信小程序 教程之wxapp视图容器 swiper
2016/10/19 Javascript
微信小程序WebSocket实现聊天对话功能
2018/07/06 Javascript
详解在React中跨组件分发状态的三种方法
2018/08/09 Javascript
js实现同一个页面,多个enter事件绑定的示例
2018/10/10 Javascript
浅析Proxy可以优化vue的数据监听机制问题及实现思路
2018/11/29 Javascript
vue文件运行的方法教学
2019/02/12 Javascript
Vue.js中该如何自己维护路由跳转记录
2019/05/19 Javascript
vue设置一开始进入的页面教程
2019/10/28 Javascript
[15:15]教你分分钟做大人:狙击手
2014/10/30 DOTA
详解使用Python处理文件目录的相关方法
2015/10/16 Python
使用PyInstaller将Python程序文件转换为可执行程序文件
2016/07/08 Python
python对json的相关操作实例详解
2017/01/04 Python
python取代netcat过程分析
2018/02/10 Python
python中PS 图像调整算法原理之亮度调整
2019/06/28 Python
Python爬虫库requests获取响应内容、响应状态码、响应头
2020/01/25 Python
将SVG图引入到HTML页面的实现
2019/09/20 HTML / CSS
Juice Beauty官网:有机美容产品,护肤与化妆品
2020/06/13 全球购物
网络专业学生个人的自我评价
2013/12/16 职场文书
高中生的自我鉴定范文
2014/01/24 职场文书
工会主席事迹材料
2014/06/03 职场文书
2014年连锁店圣诞节活动方案
2014/12/09 职场文书
2015学校年度工作总结
2015/05/11 职场文书
学校教学工作总结2015
2015/05/19 职场文书
遇事可以测出您的见识与格局
2019/09/16 职场文书
python not运算符的实例用法
2021/06/30 Python
MySQL窗口函数的具体使用
2021/11/17 MySQL
python多线程方法详解
2022/01/18 Python
apache虚拟主机配置的三种方式(小结)
2022/07/23 Servers