`

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>");

 

效果图:

 

  • 大小: 69.4 KB
2
1
分享到:
评论

相关推荐

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

    本文实例讲述了JS实现的手机端精简幻灯片效果。分享给大家供大家参考,具体如下: var curIndex = 0; var timeInterval = 4000; var arr = new Array(); arr[0] = "fukeb.jpg"; arr[1] = "baopi.jpg"; arr[2] = ...

    最精简的代码实现首页幻灯片

    首先,引入jQuery库,然后编写JavaScript代码来控制幻灯片的显示与隐藏。以下是一个简单的实现: ```javascript $(document).ready(function() { var slideIndex = 0; showSlides(); function showSlides() { ...

    HTML5幻灯片

    这种幻灯片通常具备精简的设计和吸引人的动画效果,能够适应各种屏幕尺寸,包括手机和平板电脑,实现响应式布局。"滑动连播"是指幻灯片会自动或手动进行连续播放,为用户带来流畅的浏览体验。 在HTML5幻灯片的设计...

    JQ幻灯片,多图切换

    5. **scroll.js**:这是实现幻灯片功能的JavaScript文件。其中包含了幻灯片的逻辑,如定时切换图片、响应用户点击事件、处理过渡动画等。通过对这个文件的阅读和理解,你可以学习到如何使用jQuery来创建动态效果。 ...

    移动优先的纯javascript幻灯片插件

    它优化了触摸事件处理,使用户能够在手机和平板上轻松滑动浏览幻灯片。 **工作原理** Wallop的工作机制是通过添加和移除HTML元素上的特定class来控制幻灯片的显示和隐藏。这种基于class的切换方式使得开发者可以...

    基于jquery的摄影艺术类宽屏焦点图幻灯片(代码精简版).zip

    JS文件则是主要的逻辑代码,处理幻灯片的动画和交互。 为了深入理解这个组件的工作原理,你需要打开这个文件进行查看和学习。通过分析代码,你可以学习到如何使用jQuery来操作DOM、如何设置定时器实现自动播放、...

    仿支付宝首页幻灯片导航

    5. **响应式设计**:考虑到支付宝的多平台特性,幻灯片导航应具备响应式设计,能够在不同设备(如手机、平板、桌面电脑)上正常显示和操作。 制作这样的幻灯片导航通常需要HTML、CSS和JavaScript技术。HTML用于构建...

    jquery带插件简洁版幻灯片效果

    1. **jQuery库**:这是实现幻灯片效果的基础,可能包括一个精简版的jQuery.js文件,以减少页面加载时间。 2. **幻灯片插件**:一个单独的JavaScript文件,包含了实现幻灯片效果的代码,可能命名为slide-plugin.js或...

    jQuery和css3简单实用的背景幻灯片插件

    标题中的“jQuery和css3简单实用的背景幻灯片插件”指的是一个结合了JavaScript库jQuery与CSS3技术的滑动展示效果插件,通常用于网站的首页或产品展示区域,以动态方式显示多张图片或内容。这种插件能够吸引用户注意...

    一款代码量少变化多样的jQuery图片幻灯片.zip

    【标题】:“一款代码量少变化多样的jQuery图片幻灯片” 这个标题表明我们讨论的是一款基于jQuery的图片幻灯片插件。jQuery是一个广泛使用的JavaScript库,它简化了HTML文档遍历、事件处理、动画制作和Ajax交互。在...

    Android DevCamp幻灯片分享:凡客移动应用之Android + HTML5技术运用 | 凡客 汪健飞 徐金山

    - **本地图片存储优化**:精简资源包内的图片数量,优化内存回收机制,采用字节数组方式存储图片。 - **网络图片适配请求**:根据设备屏幕分辨率调整请求图片的大小和质量,提高加载效率和用户体验。 3. **数据...

    灰色幻灯互联网软件企业html5模板-灰色 幻灯 互联网 简单 简洁 软件 企业 设计 案例 官网 html5.rar

    HTML5的元素和JavaScript库(如Bootstrap的carousel组件)可以实现动态幻灯片效果,展示企业的关键信息或最新项目。这种交互式设计不仅增加了用户体验,还能让网页更具吸引力。同时,模板可能还包含了响应式设计,...

    黑色个性动画导航博客css3模板_黑色博客个人整站菜单html5css3幻灯.rar

    JavaScript库`jquery.min.js`是jQuery的精简版,它是广泛使用的JavaScript库,可以简化DOM操作、事件处理和动画效果。在这个模板中,jQuery可能被用来驱动幻灯片功能和其他交互元素。 至于"html 毕业论文"标签,这...

    devfest-sp-agenda:议程,幻灯片格式的 DEvFest SP 2014 活动时间表

    "devfest-sp-agenda" 文件是这次活动的议程,以幻灯片的形式呈现,为参与者提供了详细的时间表和会议内容。这份议程不仅列出了各个演讲的主题,还可能包括演讲者信息、演讲时间以及会议室安排等关键信息。 作为标签...

    light-angularjs:我的幻灯片“Lightweight AngularJS”的Light AngularJS实现

    AngularJS,作为一个强大的前端JavaScript框架,被广泛用于构建复杂的单页应用(SPA)。然而,其本身的重量和复杂性有时可能会成为开发小型或轻量级项目的负担。为了解决这个问题,开发者们提出了“轻量级AngularJS...

    figma-to-google-slides:将Figma框架转换为Google Slides演示文稿:lollipop:

    Figma转Google幻灯片 转换帧到谷歌的幻灯片演示文稿,作为展示 :film_projector_selector: 幻灯片的顺序由Figma中的框架层次结构决定,从顶部到底部,但在缩小版本中则相反。 由制造 安装(精简版) 导入! :...

    阿赛企业网站系统 v14A(精简版:不含会员社区功能).zip

    整站幻灯片为旧版的加强版支持所有常规浏览器,并已测试通过,纯js css完成,支持一个页面调用多个幻灯片; 系统使用三色调配原则,大家可以按颜色喜欢在后台直接调试喜欢的色彩风格; 为增强网站数据库安全性,...

    大图幻灯粉红色bootstrap4引导页模板

    在Bootstrap 4中,幻灯片组件是通过 Carousel 插件实现的,它允许用户轻松地创建滑动图片展示,支持自动播放、触屏滑动等功能。在这个模板中,大图幻灯片很可能是页面的焦点,展示高清的视觉内容,以增强用户体验并...

    马克斯电影程序V4.5修改版

    1、前台内置JS,后台有相应JS管理,幻灯片管理等等。 2、改进土豆播放器。 3、加入单集自定义功能,以后采集完后直接添加,不用分段。 4、首页精简,加快访问速度,改为XP蓝风格。 5、后台广告及模板管理仅限于修改...

Global site tag (gtag.js) - Google Analytics