详解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 相关文章推荐
用js调用迅雷下载代码的二种方法
Apr 15 Javascript
jQuery:delegate中select()不起作用的解决方法(实例讲解)
Jan 26 Javascript
jQuery中bind与live的用法及区别小结
Jan 27 Javascript
javascript中setTimeout的问题解决方法
May 08 Javascript
jquery实现翻动fadeIn显示的方法
Mar 05 Javascript
Jquery常用的方法汇总
Sep 01 Javascript
JavaScript实现搜索框的自动完成功能(一)
Feb 25 Javascript
JavaScript使用forEach()与jQuery使用each遍历数组时return false 的区别
Aug 26 Javascript
JS判断数组那点事
Oct 10 Javascript
vue实现仿淘宝结账页面实例代码
Nov 08 Javascript
vue动态循环出的多个select出现过的变为disabled(实例代码)
Nov 10 Javascript
JavaScript构造函数原理及实现流程解析
Nov 19 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
PHP4实际应用经验篇(4)
2006/10/09 PHP
加速XP搜索功能堪比vista
2007/03/22 PHP
PHP迅雷、快车、旋风下载专用链转换代码
2010/06/15 PHP
php实现mysql数据库操作类分享
2014/02/14 PHP
PHP7之Mongodb API使用详解
2015/12/26 PHP
PHP实现的Redis多库选择功能单例类
2017/07/27 PHP
Javascript中获取出错代码所在文件及行数的代码
2010/09/23 Javascript
jQuery实现鼠标划过添加和删除class的方法
2015/06/26 Javascript
jQuery Ajax File Upload实例源码
2016/12/12 Javascript
荐书|您有一份JavaScript书单待签收
2017/07/21 Javascript
详解让sublime text3支持Vue语法高亮显示的示例
2017/09/29 Javascript
jquery select插件异步实时搜索实例代码
2017/10/20 jQuery
React Native实现地址挑选器功能
2017/10/24 Javascript
JavaScript学习笔记之数组基本操作示例
2019/01/09 Javascript
解决layer弹出层自适应页面大小的问题
2019/09/16 Javascript
node实现mock-plugin中间件的方法
2019/12/25 Javascript
JavaScript将数组转换为链表的方法
2020/02/16 Javascript
Python urllib模块urlopen()与urlretrieve()详解
2013/11/01 Python
Python基于pygame实现的font游戏字体(附源码)
2015/11/11 Python
Python开发如何在ubuntu 15.10 上配置vim
2016/01/25 Python
实例讲解Python编程中@property装饰器的用法
2016/06/20 Python
Python编程实现及时获取新邮件的方法示例
2017/08/10 Python
python版本的仿windows计划任务工具
2018/04/30 Python
Python-Seaborn热图绘制的实现方法
2019/07/15 Python
keras导入weights方式
2020/06/12 Python
python 解决selenium 中的 .clear()方法失效问题
2020/09/01 Python
Python爬虫之Selenium实现键盘事件
2020/12/04 Python
极简的HTML5模版
2015/07/09 HTML / CSS
Ever New加拿大官网:彰显女性美
2018/10/05 全球购物
荷兰领先的百货商店:De Bijenkorf
2018/10/17 全球购物
关工委先进个人事迹材料
2014/05/23 职场文书
银行领导班子四风对照检查材料
2014/09/27 职场文书
圣贤教育改变命运观后感
2015/06/16 职场文书
CSS基础详解
2021/10/16 HTML / CSS
Java线程的6种状态与生命周期
2022/05/11 Java/Android
IDEA中sout快捷键无效问题的解决方法
2022/07/23 Java/Android