详解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 相关文章推荐
jQuery boxy弹出层插件中文演示及使用讲解
Feb 24 Javascript
js 遍历对象的属性的代码
Dec 29 Javascript
只需一行代码,轻松实现一个在线编辑器
Nov 12 Javascript
window.location.href IE下跳转失效的解决方法
Mar 27 Javascript
jquery简单的弹出层浮动层代码
Apr 27 Javascript
JQuery ztree带筛选、异步加载实例讲解
Feb 25 Javascript
Vuex2.0+Vue2.0构建备忘录应用实践
Nov 30 Javascript
基于jQuery实现弹幕APP
Feb 10 Javascript
js移动端事件基础及常用事件库详解
Aug 15 Javascript
node.js中axios使用心得总结
Nov 29 Javascript
小程序Request的另类用法详解
Aug 09 Javascript
JavaScript实现页面高亮操作提示和蒙板
Jan 04 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
PHP 中dirname(_file_)讲解
2007/03/18 PHP
探讨php中遍历二维数组的几种方法详解
2013/06/08 PHP
php实现转换html格式为文本格式的方法
2016/05/16 PHP
PHP+ajax实现二级联动菜单功能示例
2018/08/10 PHP
PHP实现的日历功能示例
2018/09/01 PHP
Prototype使用指南之range.js
2007/01/10 Javascript
Javascript &amp; DHTML 实例编程(教程)DOM基础和基本API
2007/06/02 Javascript
JavaScript弹簧振子超简洁版 完全符合能量守恒,胡克定理
2009/10/25 Javascript
js中将HTMLCollection/NodeList/伪数组转换成数组的代码
2011/07/31 Javascript
php 中序列化和json使用介绍
2013/07/08 Javascript
jQuery之过滤元素操作小结
2013/11/30 Javascript
解析Javascript小括号“()”的多义性
2013/12/03 Javascript
通过复制Table生成word和excel的javascript代码
2014/01/20 Javascript
js中日期的加减法
2015/05/06 Javascript
javascript实现右侧弹出“分享到”窗口效果
2016/02/01 Javascript
浅谈js中StringBuffer类的实现方法及使用
2016/09/02 Javascript
Nodejs+express+ejs简单使用实例代码
2017/09/18 NodeJs
纯html+css+javascript实现楼层跳跃式的页面布局(实例代码)
2017/10/25 Javascript
node中间层实现文件上传功能
2018/06/11 Javascript
详解vue项目接入微信JSSDK的坑
2018/12/14 Javascript
详解VUE Element-UI多级菜单动态渲染的组件
2019/04/25 Javascript
javascript实现简单留言板案例
2021/02/09 Javascript
windows 下python+numpy安装实用教程
2017/12/23 Python
Python 实现网页自动截图的示例讲解
2018/05/17 Python
python2 中 unicode 和 str 之间的转换及与python3 str 的区别
2019/07/25 Python
python爬虫中多线程的使用详解
2019/09/23 Python
python网络爬虫 CrawlSpider使用详解
2019/09/27 Python
Python使用pickle进行序列化和反序列化的示例代码
2020/09/22 Python
美国校服网上商店:French Toast
2019/10/08 全球购物
.net C#面试题
2012/08/28 面试题
主要的Ajax框架都有什么
2013/11/14 面试题
村干部四风问题整改措施
2014/09/30 职场文书
毕业生评语大全
2015/01/04 职场文书
音乐教师求职信范文
2015/03/20 职场文书
《从现在开始》教学反思
2016/02/16 职场文书
使用CSS定位HTML元素的实现方法
2022/07/07 HTML / CSS