详解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在IE下设置innerHTML时出现未知的运行时错误的解决方法
Jan 12 Javascript
js导出txt示例代码
Jan 14 Javascript
jQuery插件开发的五种形态小结
Mar 04 Javascript
JavaScript判断用户名和密码不能为空的实现代码
May 16 Javascript
鼠标点击input,显示瞬间的边框颜色,对之修改与隐藏实例
Dec 26 Javascript
80%应聘者都不及格的JS面试题
Mar 21 Javascript
深入理解Webpack 中路径的配置
Jun 17 Javascript
JavaScript输入框字数实时统计更新
Jun 17 Javascript
jquery实现二级导航下拉菜单效果实例
May 14 jQuery
如何用webpack4.0撸单页/多页脚手架 (jquery, react, vue, typescript)
Jun 18 jQuery
微信小程序-API接口安全详解
Jul 16 Javascript
基于 vue-skeleton-webpack-plugin 的骨架屏实战
Aug 05 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入门教程之Zend Studio设置与开发实例
2016/09/09 PHP
实现网页页面跳转的几种方法(meta标签、js实现、php实现)
2014/05/20 Javascript
JavaScript Math.floor方法(对数值向下取整)
2015/01/09 Javascript
JQuery判断checkbox是否选中及其它复选框操作方法合集
2015/06/01 Javascript
javascript实现省市区三级联动下拉框菜单
2015/11/17 Javascript
Javascript实现的SHA-256加密算法完整实例
2016/02/02 Javascript
jQuery javascript获得网页的高度与宽度的实现代码
2016/04/26 Javascript
AngularJS使用angular.bootstrap完成模块手动加载的方法分析
2017/01/19 Javascript
使用webpack搭建vue项目实现脚手架功能
2019/03/15 Javascript
vue 全局环境切换问题
2019/10/27 Javascript
Vue页面渲染中key的应用实例教程
2021/01/12 Vue.js
[02:09]EHOME夺得首届辉夜杯冠军—现场颁奖仪式
2015/12/28 DOTA
Python调用命令行进度条的方法
2015/05/05 Python
python实现微信自动回复功能
2018/04/11 Python
使用python将大量数据导出到Excel中的小技巧分享
2018/06/14 Python
对pandas的算术运算和数据对齐实例详解
2018/12/22 Python
python模块常用用法实例详解
2019/10/17 Python
python使用协程实现并发操作的方法详解
2019/12/27 Python
Python Django搭建网站流程图解
2020/06/13 Python
Python程序慢的重要原因
2020/09/04 Python
如何将Pycharm中调整字体大小的方式设置为&quot;ctrl+鼠标滚轮上下滑&quot;
2020/11/17 Python
html5 canvas移动浏览器上实现图片压缩上传
2016/03/11 HTML / CSS
internal修饰符起什么作用
2013/12/16 面试题
建筑班组长岗位职责
2014/01/02 职场文书
工作疏忽检讨书
2014/01/25 职场文书
《雷鸣电闪波尔卡》教学反思
2014/02/23 职场文书
个人合作协议书范本
2014/04/18 职场文书
党员承诺书怎么写
2014/05/20 职场文书
优秀工会工作者事迹材料
2014/06/02 职场文书
董事长助理工作职责范本
2014/07/01 职场文书
2014年9.18纪念日演讲稿
2014/09/14 职场文书
大学生年度个人总结
2015/02/15 职场文书
先进个人总结范文
2015/02/15 职场文书
道歉的话怎么说
2015/05/12 职场文书
2016年秋季趣味运动会开幕词
2016/03/04 职场文书
pytorch训练神经网络爆内存的解决方案
2021/05/22 Python