<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>图片轮播图</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#show{
border: 1px solid olivedrab;
width: 400px;
top: 10%;
left: 40%;
position: absolute;
}
img{
margin: 0;
width: 400px;
height: 240px;
}
li{
position: relative;
left: 30%;
margin-top: 4px;
margin-bottom: 10px;
display: inline;
width: 30px;
height: auto;
background: #eee;
border: 1px solid gray;
float: left;
text-align: center;
cursor: pointer;
}
</style>
</head>
<body>
<!--图片播放区域-->
<div id="show">
<p class="now"><img title="我的图片" src="one.jpg"/></p>
<p style="display:none;"><img src="two.jpg"/></p>
<p style="display:none;"><img src="three.jpg" /></p>
<p style="display:none;"><img src="four.jpg" /></p>
<p style="display:none;"><img src="five.jpg" /></p>
<!--用户控制区域-->
<ul>
<li class="now">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
<script type="text/javascript">
//获取切换按钮
var tags = document.getElementById("show").getElementsByTagName("li");
//获取切换内容节点
var cats = document.getElementById("show").getElementsByTagName("p");
//当前显示图片的标签号
var current;
//3秒图片进行更换
var time=3000;
//初始化所有标签的样式
function disAll(){
for(var i=0;i<tags.length;i++){
tags[i].className="";
cats[i].className="";
cats[i].style.display="none";
}
}
//获取当前播放的图片
function setNow(){
for(var i=0;i<tags.length;i++){
if(tags[i].className=="now"){
current=i;
}
}
}
//设置手动切换
for(var j=0;j<tags.length;j++){
tags[j].onmouseover=function(){
clearInterval(h);
disAll();
this.className="now";
setNow();
cats[current].style.display="block";
cats[current].className="now";
}
tags[j].onmouseout = function(){
setNow();
h=setInterval("goNext()",3000);
}
}
/*
//设置自动播放
function goNext(){
setNow();
current+=1;
if(current>=parseInt(tags.length)){
current=0;
disAll();
cats[0].style.display="block";
tags[0].className="now";
cats[0].className="now";
}else{
disAll();
cats[current].style.display="block";
cats[current].className="now";
tags[current].className="now";
}
}
var h = setInterval("goNext()",time);
*/
</script>
</body>
</html>
分享到：
相关推荐
Elasticsearch各个Service作用说明看了不少Elasticsearch的源码,代码结构多且复杂,调用链巨长务必,其中各个xxxService更是
c语言中动态内存分配问题，细节性问题，代码执行流程
android studio下载
【新质生产力】新质生产力赋能智能制造数字化解决方案.pptx
基于matlab实现的用于应用布格重力异常数据反演地下异常密度体.rar
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。
无人机最强算法源码，易于部署和学习交流使用
数据库课程设计后端 使用Springboot + Mybatis + Redis + Maven 数据库课程设计实战.zip，使用到了所有的相关SQL 的操作，如增删改查等，让你可以在一个项目里面，锻炼到所有的数据库相关的知识。项目亲测可以运行，里面含有运行相关的文档，不会的可以丝我请求帮助。 数据库课程设计后端 使用Springboot + Mybatis + Redis + Maven 具体的表和相关的数据如下： 用户（电话号码，密码，身份证号，邮箱，真实姓名，用户类型，性别，地址） 乘客（用户电话号码，乘客身份证号，乘客真实姓名，乘客电话号码，乘客类型，地址） 列车信息（列车编号，车次，列车类型，列车车厢数，列车始发站，列车终点站，列车开车时间，列车到达时间，列车到达日期，列车运行时间，列车状态） 列车座位信息（列车编号，车厢号，座位类型，座位数） 列车经停信息（列车编号，车次，车站编号，车站名，到达时间，总运行时间，开车时间） 订单信息（订单编号，用户电话号码，乘客身份证号码，列车编号，出发站编号，到达站编号，车厢号，座位编号，订单创建时间，订单状态，开车时间）
咨询的分析方法gl.ppt
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。
These're the OpenMV codes written by microPython in 2019 NUEDC. 2019年电赛无人机题目（B题）OpenMV相关代码（原创）.zip
无人机最强算法源码，易于部署和学习交流使用
熊出没.zip
基于SpringBoot和Vue的家教信息平台设计与实现.zip 有完整的部署指导文档，源码也是完整的，可以直接运行，里面包含了所有的相关步骤。 本文旨在设计和实现一套基于Java技术的家教信息系统，采用Spring Boot框架构建后端服务，MySQL数据库存储数据，Vue.js作为前端框架实现用户界面。该系统旨在解决家教信息管理的问题，包括家教师资信息管理、用户信息管理以及家教入驻等功能。通过综合运用Java、Spring Boot、MySQL和Vue等技术，实现了系统的高效运行和良好的用户体验。系统提供了用户注册、登录、信息查看和编辑等功能，同时支持家教的发布和查看，用户信息的管理以及家教审核的后台管理。家长可以方便地寻找合适的家教老师，家教老师也能够更便捷地管理自己的信息和相关资料。通过本设计，展示了Java技术在现代化家教信息系统中的应用，为家教行业的信息化管理提供了一种有效的解决方案。该系统的设计与实现将为家长、家教老师和用户提供便利，促进家教行业的发展与进步。 关键词：SpringBoot; MySQL; 系统设计; 家教
无人机最强算法源码，易于部署和学习交流使用
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。
（R语言）-6-箱线图的绘制
麦肯锡-xx联通固定市场举措gl.ppt
附件是在PyCharm中配置Python环境步骤，文件绿色安全，请大家放心下载，仅供交流学习使用，无任何商业目的！