详解js图片轮播效果实现原理


Posted in Javascript onDecember 17, 2015

本文实例讲述了js图片轮播效果实现原理,分享给大家供大家参考,具体内容如下

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 
<html>
 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<script type="text/javascript">
 var timeID;
 var image;
 var current = 0;
 var images = new Array(5);
 function init(){
 for (var i=1;i<=5;i++){
 images[i] = new Image(450,550);
 images[i].src = "pictures/"+i+".jpg";
 }
 image = document.images[0];
 }
 function setSrc(i){
 current = i;
 //设置图片src的属性,实现图片的切换
 image.src = images[i].src;
 }
 function pre(){
 if (current <= 0){
 alert('已经是第一张了');
 }else{
 current--;
 setSrc(current);
 }
 }
 function next(){
 if (current >= 5){
 alert('已经是最后一张了');
 }else{
 current++;
 setSrc(current);
 }
 }
 function play(){
 if (current >= 5){
 current = 0;
 }
 setSrc(++current);
 }
</script>
<body onload="init()">
<input type="button" value="第一张" onclick="setSrc(1)">
<input type="button" value="上一张" onclick="pre()">
<input type="button" value="下一张" onclick="next()">
<input type="button" value="最后一张" onclick="setSrc(5)">
<input type="button" value="幻灯播放" onclick="timeID=setInterval('play()',500)">
<input type="button" value="停止播放" onclick="clearInterval(timeID)">
<div style="border:1px solid blue;width:450px; height:550px;" id="myPic">
 <img src="pictures/1.jpg" />
</div>
</body>
</html>

原理在这呐

首先init()函数用于初始化images数组和image的值,本例中主要是利用setSrc()设置图片的src属性值,这样就达到了图片的切换,图片的轮播是使用定时器来时显的!setInterval('play()',500)的意思是每0.5s调用一次play()函数!

精彩专题分享:jQuery图片轮播 JavaScript图片轮播 Bootstrap图片轮播

以上就是js图片轮播效果代码,以及实现js图片轮播效果的原理简介,希望能够帮助大家,真正的做到学以致用。

Javascript 相关文章推荐
键盘KeyCode值列表汇总
Nov 26 Javascript
javascript 广告移动特效的实现代码
Jun 25 Javascript
JavaScript实现邮箱地址自动匹配功能代码
Nov 28 Javascript
JS实现提交表单前的数字及邮箱校检功能
Nov 13 Javascript
使用mpvue搭建一个初始小程序及项目配置方法
Dec 03 Javascript
webpack4实现不同的导出类型
Apr 09 Javascript
Vue-input框checkbox强制刷新问题
Apr 18 Javascript
jquery操作checkbox的常用方法总结【附测试源码下载】
Jun 10 jQuery
微信小程序实现点击图片放大预览
Oct 21 Javascript
jQuery实现简易聊天框
Feb 08 jQuery
在vue中实现禁止屏幕滚动,禁止屏幕滑动
Jul 22 Javascript
JavaScript获取时区实现过程解析
Sep 24 Javascript
js和jquery分别验证单选框、复选框、下拉框
Dec 17 #Javascript
jQuery+CSS实现滑动的标签分栏切换效果
Dec 17 #Javascript
JS禁用页面上所有控件的实现方法(附demo源码下载)
Dec 17 #Javascript
jQuery选择器用法实例详解
Dec 17 #Javascript
深入分析jQuery的ready函数是如何工作的(工作原理)
Dec 17 #Javascript
js倒计时简单实现方法
Dec 17 #Javascript
高效的jquery数字滚动特效
Dec 17 #Javascript
You might like
phpmyadmin安装时提示:Warning: require_once(./libraries/common.inc.php)错误解决办法
2011/08/18 PHP
调用js时ie6和ie7,ff的区别
2009/08/19 Javascript
myeclipse安装jQuery插件的方法
2011/03/29 Javascript
Prototype的Class.create函数解析
2011/09/22 Javascript
Ext GridPanel加载完数据后进行操作示例代码
2014/06/17 Javascript
javascript实现下班倒计时效果的方法(可桌面通知)
2015/07/10 Javascript
JavaScript的React Web库的理念剖析及基础上手指南
2016/05/10 Javascript
浅谈js对象的创建和对6种继承模式的理解和遐想
2016/10/16 Javascript
jQuery实现链接的title快速出现的方法
2017/02/20 Javascript
Javascript中字符串相关常用的使用方法总结
2017/03/13 Javascript
layui表格checkbox选择全选样式及功能的实例
2018/03/07 Javascript
js逆向解密之网络爬虫
2019/05/30 Javascript
利用JS代码自动删除稿件的普通弹幕功能
2019/09/20 Javascript
[42:23]完美世界DOTA2联赛PWL S3 Forest vs Rebirth 第二场 12.10
2020/12/13 DOTA
python获取从命令行输入数字的方法
2015/04/29 Python
PyQt4实时显示文本内容GUI的示例
2019/06/14 Python
Python字符串和正则表达式中的反斜杠('\')问题详解
2019/09/03 Python
vue学习笔记之动态组件和v-once指令简单示例
2020/02/29 Python
Python pip安装模块提示错误解决方案
2020/05/22 Python
Python如何优雅删除字符列表空字符及None元素
2020/06/25 Python
HTML5 拖放功能实现代码
2016/07/14 HTML / CSS
美国羊皮公司:Overland
2018/01/15 全球购物
英国专业美容产品在线:Mylee(从指甲到脱毛)
2020/07/06 全球购物
CK澳大利亚官网:Calvin Klein澳大利亚
2020/12/12 全球购物
韩语专业本科生求职信
2013/10/01 职场文书
2014年社区植树节活动方案
2014/02/28 职场文书
师德师风个人反思
2014/04/28 职场文书
三八妇女节演讲稿
2014/05/27 职场文书
2014广电局实施党的群众路线教育实践活动方案思想汇报
2014/09/22 职场文书
小学少先队辅导员述职报告
2015/01/10 职场文书
入党介绍人意见怎么写
2015/06/03 职场文书
银行资信证明
2015/06/17 职场文书
公司酒会致辞
2015/07/30 职场文书
nginx常用命令放入shell脚本详解
2021/03/31 Servers
2021-4-5课程——SQL Server查询【3】
2021/04/05 SQL Server
tree shaking对打包体积优化及作用
2022/07/07 Java/Android