JS实现的手机端精简幻灯片效果


Posted in Javascript onSeptember 05, 2016

本文实例讲述了JS实现的手机端精简幻灯片效果。分享给大家供大家参考,具体如下:

var curIndex = 0;
var timeInterval = 4000;
var arr = new Array();
arr[0] = "fukeb.jpg";
arr[1] = "baopi.jpg";
arr[2] = "renliub.jpg";
setInterval(changeImg, timeInterval);
function changeImg() {
  var obj = document.getElementById("showpic");
  if (curIndex == arr.length - 1) {
    curIndex = 0;
  } else {
    curIndex += 1;
  }
  obj.src = "/templets/v1/images/" + arr[curIndex];
}
document.writeln("<div style=\"width:300px;margin:10px auto 0 auto;overflow:hidden;\"><a href=\"/zixun/?f=top_ad\" target=\"_blank\"><img src=\"/templets/v1/images/fukeb.jpg\" id=\"showpic\" /></a></div>");

效果图:

JS实现的手机端精简幻灯片效果

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
setTimeout和setInterval的浏览器兼容性分析
Feb 27 Javascript
如何让页面在打开时自动刷新一次让图片全部显示
Dec 17 Javascript
jquery select 设置默认选中的示例代码
Feb 07 Javascript
javascript模拟php函数in_array
Apr 27 Javascript
js控制div弹出层实现方法
May 11 Javascript
详解JavaScript编程中的数组结构
Oct 24 Javascript
原生js实现数字字母混合验证码的简单实例
Dec 10 Javascript
原生js实现简单的Ripple按钮实例代码
Mar 24 Javascript
Bootstrap treeview实现动态加载数据并添加快捷搜索功能
Jan 07 Javascript
layer更改皮肤的实现方法
Sep 11 Javascript
在vant中使用时间选择器和popup弹出层的操作
Nov 04 Javascript
vue实现两个区域滚动条同步滚动
Dec 13 Vue.js
jQuery实现页面下拉100像素出现悬浮窗口的方法
Sep 05 #Javascript
Vuejs第九篇之组件作用域及props数据传递实例详解
Sep 05 #Javascript
AngularJS实现标签页的两种方式
Sep 05 #Javascript
Vuejs第八篇之Vuejs组件的定义实例解析
Sep 05 #Javascript
详细谈谈AngularJS的子级作用域问题
Sep 05 #Javascript
Vuejs第七篇之Vuejs过渡动画案例全面解析
Sep 05 #Javascript
JS简单获取客户端IP地址的方法【调用搜狐接口】
Sep 05 #Javascript
You might like
为php4加入动态flash文件的生成的支持
2006/10/09 PHP
一个简单计数器的源代码
2006/10/09 PHP
PHP高级对象构建 多个构造函数的使用
2012/02/05 PHP
解析PHP中常见的mongodb查询操作
2013/06/20 PHP
javascript之通用简单的table选项卡实现(二)
2010/05/09 Javascript
JavaScript 设计模式 安全沙箱模式
2010/09/24 Javascript
JavaScript快速检测浏览器对CSS3特性的支持情况
2012/09/26 Javascript
JS正则表达式验证数字代码
2014/01/28 Javascript
javascript实现仿IE顶部的可关闭警告条
2015/05/05 Javascript
Bootstrap 3 按钮标签实例代码
2017/02/21 Javascript
原生JS实现循环Nodelist Dom列表的4种方式示例
2018/02/11 Javascript
JavaScript中常见内置函数用法示例
2018/05/14 Javascript
如何用RxJS实现Redux Form
2018/12/29 Javascript
vscode下vue项目中eslint的使用方法
2019/01/13 Javascript
vue实践---vue不依赖外部资源实现简单多语操作
2020/09/21 Javascript
[05:20]卡尔工作室_DOTA2新手教学_DOTA2超强新手功能
2013/04/22 DOTA
[03:28]2014DOTA2国际邀请赛 走近EG战队天才中单Arteezy
2014/07/12 DOTA
[01:15:45]DOTA2上海特级锦标赛B组小组赛#1 Alliance VS Spirit第一局
2016/02/26 DOTA
[02:16]深扒TI7聊天轮盘语音出处2
2017/05/11 DOTA
python实现的简单FTP上传下载文件实例
2015/06/30 Python
详解python eval函数的妙用
2017/11/16 Python
用什么库写 Python 命令行程序(示例代码详解)
2020/02/20 Python
CSS3线性渐变简单实现以及该属性在浏览器中的不同
2012/12/12 HTML / CSS
《威尼斯的小艇》教学反思
2014/02/17 职场文书
幼儿园母亲节活动方案
2014/03/10 职场文书
食品安全承诺书
2014/05/22 职场文书
学习实践科学发展观心得体会
2014/09/10 职场文书
学习党的群众路线剖析材料
2014/10/09 职场文书
师德师风个人整改措施
2014/10/27 职场文书
2014年教师德育工作总结
2014/11/10 职场文书
2015年见习期工作总结
2014/12/12 职场文书
指导教师推荐意见
2015/06/05 职场文书
干货:如何写好观后感 !
2019/05/21 职场文书
2019如何书写演讲稿?
2019/07/01 职场文书
CSS预处理框架——Stylus
2021/04/21 HTML / CSS
pytorch分类模型绘制混淆矩阵以及可视化详解
2022/04/07 Python