《javaScript100例|04》自动播放——Js幻灯片缓冲效果

目录

效果图

示例

源码地址:


效果图

 

示例


<html>
<head>
<title>自动播放——幻灯片缓冲效果</title>
<style> 
body,div,ul,li{margin:0;padding:0;}
ul{list-style-type:none;}
body{background:#000;text-align:center;font:12px/20px Arial;}
#box{position:relative;width:492px;height:172px;background:#fff;border-radius:5px;border:8px solid #fff;margin:10px auto;cursor:pointer;}
#box .list{position:relative;width:490px;height:170px;overflow:hidden;}
#box .list ul{position:absolute;top:0;left:0;}
#box .list li{width:490px;height:170px;overflow:hidden;}
#box .count{position:absolute;right:0;bottom:5px;}
#box .count li{color:#fff;float:left;width:20px;height:20px;cursor:pointer;margin-right:5px;overflow:hidden;background:#F90;opacity:0.7;filter:alpha(opacity=70);border-radius:20px;}
#box .count li.current{color:#fff;opacity:1;filter:alpha(opacity=100);font-weight:700;background:#f60;}
#tmp{width:100px;height:100px;background:red;position:absolute;}
</style>
<script type="text/javascript"> 
window.onload = function ()
{var oBox = document.getElementById("box");var oList = oBox.getElementsByTagName("ul")[0];var aImg = oBox.getElementsByTagName("img");var timer = playTimer = null;var index = i = 0;var bOrder = true;var aTmp = [];//生成数字按钮for (i = 0; i < aImg.length; i++){aTmp.push("<li>" + (i + 1) + "</li>")}//插入元素var oCount = document.createElement("ul");oCount.className = "count"oCount.innerHTML = aTmp.join("");oBox.appendChild(oCount);//初始化状态var aBtn = oBox.getElementsByTagName("ul")[1].getElementsByTagName("li");aBtn[index].className = "current";//按钮点击切换for (i = 0; i < aBtn.length; i++){aBtn[i].index = i;aBtn[i].onclick = function (){index = this.index;for (i = 0; i < aBtn.length; i++) aBtn[i].className = "";this.className = "current";			startMove(-(this.index * aImg[0].offsetHeight))		}}//鼠标移入展示区停止自动播放oBox.onmouseover = function (){clearInterval(playTimer)};//鼠标离开展示区开始自动播放oBox.onmouseout = function (){autoPlay()};//页面加载即调用自动播放oBox.onmouseout();//自动播放函数function autoPlay(){playTimer = setInterval(function (){bOrder ? index++ : index--;			index == aBtn.length - 1 && (bOrder = false);index == 0 && (bOrder = true);aBtn[index].onclick();startMove(-(index * aImg[0].offsetHeight))}, 3000)}function startMove(iTarget){clearInterval(timer);timer = setInterval(function (){doMove(iTarget)}, 30)	}function doMove (iTarget){var iSpeed = (iTarget - oList.offsetTop) / 10;iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);		oList.offsetTop == iTarget ? clearInterval(timer) : oList.style.top = oList.offsetTop + iSpeed + "px"}
};
</script>
</head>
<body>
<div id="box"><div class="list"><ul><li><img src="wall5.jpg" width="490" height="170" /></li><li><img src="wall6.jpg" width="490" height="170" /></li><li><img src="wall7.jpg" width="490" height="170" /></li></ul></div>
</div>
</body>
</html>

 

源码地址:

自动播放——Js幻灯片缓冲效果.rar-互联网文档类资源-CSDN下载icon-default.png?t=LA46https://download.csdn.net/download/weixin_41937552/37380676

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/357154.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

PHP+jquery 树状菜单

本项目开发过程中涉及树状菜单&#xff0c;于是做如下分享菜单实现 不足之处请大牛指点并见谅&#xff08;如图&#xff09; 1&#xff1a;数据表涉及字段 id int(10) unsigned NOT NULL AUTO_INCREMENT COMMENT 系统菜单ID, pid int(10) DEFAULT NULL COMMENT 父级ID, name va…

vue计算属性computed与监听属性watch的基本使用

目录 Vue.js 计算属性 Vue.js 监听属性 Vue.js 计算属性 计算属性关键词: computed。 计算属性在处理一些复杂逻辑时是很有用的。 反转字符串的示例 <!DOCTYPE html> <html> <he

vue样式绑定与事件处理器的基本使用

目录 Vue.js 样式绑定 Vue.js 事件处理器 事件修饰符 Vue.js 样式绑定

Finally 与 return

网上有很多人探讨Java中异常捕获机制try...catch...finally块中的finally语句是不是一定会被执行&#xff1f;很多人都说不是&#xff0c;当然他们的回答是正确的&#xff0c;经过我试验&#xff0c;至少有两种情况下finally语句是不会被执行的&#xff1a; &#xff08;1&…

vue表单的基本使用

Vue.js 表单 介绍 一下Vue.js 表单上的应用。你可以用 v-model 指令在表单控件元素上创建双向数据绑定。 v-model 会根据控件类型自动选取正确的方法来更新元素。 input 和 textarea 元素中使用 v-model 实现双向数据绑定: <!DOCTYPE html> <html> <head…

fold函数_Java中使用Map and Fold进行函数式编程

fold函数在函数式编程中&#xff0c;Map和Fold是两个非常有用的运算符&#xff0c;它们属于每种函数式语言。 如果Map和Fold运算符是如此强大且必不可少&#xff0c;那么您如何解释说即使Java编程语言缺少这两个运算符&#xff0c;我们也可以使用Java来完成工作&#xff1f; 事…

NVIC优先级分组

挂起&#xff0c;解挂&#xff0c;使能&#xff0c;失能 转载于:https://www.cnblogs.com/alantechnique/p/5598374.html

【Egret】Wing3发布移动APP功能,打包APK流程以及会遇到的问题

流程&#xff1a;1.安装好wing 3&#xff0c;然后 插件——Egret项目工具——发布移动APP——Build android native project 2.配置发布环境&#xff1a; Android 1.egret engine 点击下载2.android sdk mac版下载 windows版下载3.java sdk mac版下载 windows版…

有效运维的 on-call 机制

[编者按]本文作者为云告警平台OneAlert负责人&#xff0c;著《云计算与OpenStack》&#xff0c;在IT运营管理、云计算方面从业10多年。 正文 互联网技术的发展&#xff0c;离不开运维支撑工作&#xff0c;没有零bug的程序&#xff0c;没有不出问题的系统&#xff0c;问题故障不…

团队项目:界面设计

游戏内关卡为2D横版界面&#xff0c;背景为楼群贴图&#xff0c;整体色调以灰色为主&#xff0c;与摩托车手的主题相配。游戏中配有音效及背景音乐&#xff0c;背景音乐为我组成员自行创作录制完成。界面展示如下&#xff1a; 图1 游戏中设计图 图中显示的摩托车手即为玩家操控…

Hystrix简介

在过去的几天里&#xff0c;我一直在探索Netflix Hystrix库&#xff0c;并欣赏了这个出色的库所提供的功能。 引用Hystrix网站上的内容&#xff1a; Hystrix是一个延迟和容错库&#xff0c;旨在隔离对远程系统&#xff0c;服务和第三方库的访问点&#xff0c;停止级联故障&am…

MP3音乐播放器搜索引擎-鼠标拖动窗口

定义鼠标的按压&#xff0c;移动&#xff0c;施放事件 &#xff08;1&#xff09;鼠标的按压事件 globalpos是全局坐标&#xff0c;即鼠标相对于桌面屏幕左上角的坐标我们通过this->frameGeometry().topLeft();可以获得当前窗口的左上角的x左边或y坐标 在移动事件中我们可以…

SpringMVC学习--文件上传

简介文件上传是web开发中常见的需求之一&#xff0c;springMVC将文件上传进行了集成&#xff0c;可以方便快捷的进行开发。 springmvc中对多部件类型解析在 页面form中提交enctype"multipart/form-data"的数据时&#xff0c;需要springmvc对multipart类型的数据进行解…

VS code常用的快捷键

在前端的开发过程中&#xff0c;如果有一个比较好的开发工具&#xff0c;配合一些常用的快捷键&#xff0c;开发效率将大大提升&#xff0c;正所谓工具善其事必先利其器。前端推荐使用编辑器VS code,用过HB-X&#xff0c;ST3,Webstorm等编译器之后就会发现&#xff0c;前端编辑…

平台日志架构说明log4j漏洞问题解析

Log4j是Apache的一个开源项目&#xff0c;通过使用Log4j&#xff0c;我们可以控制日志信息输送的目的地是控制台、文件、GUI组件&#xff0c;甚至是套接口服务器、NT的事件记录器、UNIX Syslog守护进程等&#xff1b;我们也可以控制每一条日志的输出格式&#xff1b;通过定义每…

2016/06/22 中色启动筹码分析作业

2016/06/22 中色启动筹码分析作业——待核实 201转载于:https://www.cnblogs.com/carl2380/p/5608596.html

浏览器各个属性的作用

作为前端程序员不可避免的会和浏览器打交道&#xff0c;所以要对浏览器的各个属性的作用进行了解&#xff0c;方便开发及调试&#xff0c;这里以谷歌浏览器为例进行简单的介绍。一是巩固对浏览器属性的认识&#xff0c;二是方便大家的学习。首先打开谷歌浏览器按F12查看控制台属…

Moment.js日期处理库的使用

Moment.jsMoment.js是一个轻量级的JavaScript时间库&#xff0c;它方便了日常开发中对时间的操作&#xff0c;提高了开发效率。这个在一些金融保险公司会经常用到&#xff0c;比如一下时间的格式化处理&#xff0c;时间的选择等等。这个比较好的地方是可以格式化时间&#xff0…

转: 微博的多机房部署的实践(from infoq)

转: http://www.infoq.com/cn/articles/weibo-multi-idc-architecture 在国内网络环境下&#xff0c;单机房的可靠性无法满足大型互联网服务的要求&#xff0c;如机房掉电&#xff0c;光缆被挖的情况也发生过。微信就曾发生大面积故障&#xff0c;包括微信信息无法发出、无法刷…

知道这些性能优化手段,工资起码提升一倍

1.什么是性能?性能指标有哪些&#xff1f;计算机的性能&#xff0c;其实和我们干体力劳动很像&#xff0c;好比是我们要搬东西。对于计算机的性能&#xff0c;我们需要有个标准来衡量。这个标准中主要有两个指标。第一个是响应时间&#xff08;Response time&#xff09;或者叫…