详解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.ui.draggable中文文档
Nov 24 Javascript
javascript 强制刷新页面的实现代码
Dec 13 Javascript
jQuery 源码分析笔记(2) 变量列表
May 28 Javascript
使用JavaScript构建JSON格式字符串实现步骤
Mar 22 Javascript
基于jquery中children()与find()的区别介绍
Apr 26 Javascript
javascript通过navigator.userAgent识别各种浏览器
Oct 25 Javascript
jQuery中:checkbox选择器用法实例
Jan 03 Javascript
jQuery常用的一些技巧汇总
Mar 26 Javascript
JavaScript是如何实现继承的(六种方式)
Mar 31 Javascript
浅析Vue 防抖与节流的使用
Nov 14 Javascript
在vue中通过render函数给子组件设置ref操作
Nov 17 Vue.js
前端学习——JavaScript原生实现购物车案例
Mar 31 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
关于session在PHP5的配置文件中的详细设置参数说明
2011/04/20 PHP
php正则匹配文章中的远程图片地址并下载图片至本地
2015/09/29 PHP
php微信公众号开发之关键词回复
2018/10/20 PHP
JS的IE和Firefox兼容性集锦
2006/12/11 Javascript
向fckeditor编辑器插入指定代码的方法
2007/05/25 Javascript
javascript中的绑定与解绑函数应用示例
2013/06/24 Javascript
将Datatable转化成json发送前台实现思路
2013/09/06 Javascript
JQuery给元素绑定click事件多次执行的解决方法
2014/05/29 Javascript
jQuery实现滚动切换的tab选项卡效果代码
2015/08/26 Javascript
javascript自动切换焦点控制效果完整实例
2016/02/02 Javascript
微信小程序 视图层(xx.xml)和逻辑层(xx.js)详细介绍
2016/10/13 Javascript
js实现各种复制到剪贴板的方法(分享)
2016/10/27 Javascript
jQuery插件fullPage.js实现全屏滚动效果
2016/12/02 Javascript
详解百度百科目录导航树小插件
2017/01/08 Javascript
Vue动态实现评分效果
2017/05/24 Javascript
JavaScript定时器setTimeout()和setInterval()详解
2017/08/18 Javascript
使用vue的v-for生成table并给table加上序号的实例代码
2017/10/27 Javascript
js导出Excel表格超出26位英文字符的解决方法ES6
2017/11/15 Javascript
浅谈Vuejs中nextTick()异步更新队列源码解析
2017/12/31 Javascript
mpvue中配置vuex并持久化到本地Storage图文教程解析
2018/03/15 Javascript
Python heapq使用详解及实例代码
2017/01/25 Python
利用python写个下载teahour音频的小脚本
2017/05/08 Python
Python读取文件内容的三种常用方式及效率比较
2017/10/07 Python
python 剪切移动文件的实现代码
2018/08/02 Python
Python装饰器限制函数运行时间超时则退出执行
2019/04/09 Python
Python类中方法getitem和getattr详解
2019/08/30 Python
python库matplotlib绘制坐标图
2019/10/18 Python
python使用gdal对shp读取,新建和更新的实例
2020/03/10 Python
法国美发器材和产品购物网站:Beauty Coiffure
2016/12/05 全球购物
Stutterheim瑞典:瑞典高级外套时装品牌
2019/06/24 全球购物
担保书怎么写
2014/04/01 职场文书
房屋公证委托书
2014/04/03 职场文书
2014年小学数学教师工作总结
2014/12/03 职场文书
2015年城乡环境综合治理工作总结
2015/07/24 职场文书
MySQL去除重叠时间求时间差和的实现
2021/08/23 MySQL
【DOTA2】总决赛血虐~ XTREME GAMING vs MAGMA - OGA DOTA PIT 2022 CN
2022/04/02 DOTA