详解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 相关文章推荐
javascript 函数式编程
Aug 16 Javascript
jquery 日期分离成年月日的代码
May 14 Javascript
js获取时间(本周、本季度、本月..)
Nov 22 Javascript
javascript基于DOM实现省市级联下拉框的方法
May 14 Javascript
jquery仅用6行代码实现滑动门效果
Sep 07 Javascript
把普通对象转换成json格式的对象的简单实例
Jul 04 Javascript
基于jQuery.validate及Bootstrap的tooltip开发气泡样式的表单校验组件思路详解
Jul 18 Javascript
jquery datatable服务端分页
Aug 31 Javascript
vuejs2.0子组件改变父组件的数据实例
May 10 Javascript
Bootstrap Table使用整理(四)之工具栏
Jun 09 Javascript
JavaScript实现三级联动菜单效果
Aug 16 Javascript
简单两步使用node发送qq邮件的方法
Mar 01 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 MemCached高级缓存配置图文教程
2010/08/05 PHP
PHP手机号码归属地查询代码(API接口/mysql)
2012/09/04 PHP
php在线解压ZIP文件的方法
2014/12/30 PHP
php resizeimage 部分jpg文件 生成缩略图失败的原因分析及解决办法
2016/03/23 PHP
php代码调试利器firephp安装与使用方法分析
2018/08/21 PHP
ajax的hide隐藏问题解决方法
2012/12/11 Javascript
JS实现随机数生成算法示例代码
2013/08/08 Javascript
JS给超链接加确认对话框的方法
2015/02/24 Javascript
Jquery日期选择datepicker插件用法实例分析
2015/06/08 Javascript
JavaScript实现把数字转换成中文
2015/06/29 Javascript
JavaScript代码性能优化总结篇
2016/05/15 Javascript
Bootstrap源码解读标签、徽章、缩略图和警示框(8)
2016/12/26 Javascript
详解使用Vue Router导航钩子与Vuex来实现后退状态保存
2017/09/11 Javascript
对vue中methods互相调用的方法详解
2018/08/30 Javascript
vue 监听某个div垂直滚动条下拉到底部的方法
2018/09/15 Javascript
vue 之 css module的使用方法
2018/12/04 Javascript
解决Vue-Router升级导致的Uncaught (in promise)问题
2020/08/07 Javascript
[16:43]Heroes19_剃刀(完美)
2014/10/31 DOTA
Python中List.count()方法的使用教程
2015/05/20 Python
python实现mysql的单引号字符串过滤方法
2015/11/14 Python
Python二叉树的定义及常用遍历算法分析
2017/11/24 Python
使用Python实现跳一跳自动跳跃功能
2019/07/10 Python
python进度条显示之tqmd模块
2020/08/22 Python
美国女士泳装店:Swimsuits For All
2017/03/02 全球购物
eDreams巴西:廉价机票,酒店优惠和度假套餐
2017/04/14 全球购物
是否有自动比较结构的方法
2015/06/03 面试题
文员个人求职自荐信
2013/09/21 职场文书
绩效考核实施方案
2014/03/18 职场文书
大型活动组织方案
2014/05/10 职场文书
2015年体育教学工作总结
2015/05/20 职场文书
2016党员发展对象培训心得体会
2016/01/08 职场文书
用人单位的规章制度,怎样制定才是有效的?
2019/07/09 职场文书
python函数指定默认值的实例讲解
2021/03/29 Python
浅谈tf.train.Saver()与tf.train.import_meta_graph的要点
2021/05/26 Python
详细聊聊vue中组件的props属性
2021/11/02 Vue.js
FFmpeg视频处理入门教程(新手必看)
2022/01/22 杂记