jsvascript篮球梦
首先让我们先欣赏一下效果图:
html文本：
<div class="box">
<img id="imgshow" src="lanqiu/1.jpg" alt="">
<input type="button" value="下一张" id="btnNext">
第<span id="zeyu">1</span>张
<input type="button" value="上一张" id="btnLaxt">
</div>css样式：
body{
margin:0;
background:url(zeyu.jpg);
background-size: 100%;
}
.box{
width:320px;
height:520px;
margin:100px auto;
}
img{
width:320px;
height:480px;
}
input{
width:100px;
height: 40px;
margin-left:20px;
}
span{
color: #f00;
font-size: 25px;
}
JS:
var index=1;
document.getElementById("btnNext").onclick=function(){
if(index<19){
index++;
}
document.getElementById("zeyu").innerHTML=index;
document.getElementById("imgshow").src="lanqiu/"+index+".jpg";
}
document.getElementById("btnLaxt").onclick=function(){
if(index>1){
index--;
}
document.getElementById("zeyu").innerHTML=index;
document.getElementById("imgshow").src="lanqiu/"+index+".jpg";
}
源码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>篮球图集</title>
<style>
body{
margin:0;
background:url(zeyu.jpg);
background-size: 100%;
}
.box{
width:320px;
height:520px;
margin:100px auto;
}
img{
width:320px;
height:480px;
}
input{
width:100px;
height: 40px;
margin-left:20px;
}
span{
color: #f00;
font-size: 25px;
}
</style>
</head>
<body>
<div class="box">
<img id="imgshow" src="lanqiu/1.jpg" alt="">
<input type="button" value="下一张" id="btnNext">
第<span id="zeyu">1</span>张
<input type="button" value="上一张" id="btnLaxt">
</div>
<script>
var index=1;
document.getElementById("btnNext").onclick=function(){
if(index<19){
index++;
}
document.getElementById("zeyu").innerHTML=index;
document.getElementById("imgshow").src="lanqiu/"+index+".jpg";
}
document.getElementById("btnLaxt").onclick=function(){
if(index>1){
index--;
}
document.getElementById("zeyu").innerHTML=index;
document.getElementById("imgshow").src="lanqiu/"+index+".jpg";
}
</script>
</body>
</html>
持续更新，欢迎大家指教！
jsvascript篮球梦的更多相关文章
- HDU--杭电--4504--威威猫系列故事——篮球梦--DP
威威猫系列故事——篮球梦 Time Limit: 300/100 MS (Java/Others) Memory Limit: 65535/32768 K (Java/Others) Total ...
- HDUOJ----4504 威威猫系列故事——篮球梦
威威猫系列故事——篮球梦 Time Limit: 300/100 MS (Java/Others) Memory Limit: 65535/32768 K (Java/Others)Total ...
- HDU 4504 威威猫系列故事——篮球梦（dp）
http://acm.hdu.edu.cn/showproblem.php?pid=4504 题目大意: 中文都看得懂.不过我是看hint才正确理解什么意思的.开始的时候理解错了. 解题思路: 给定时 ...
- 【HDOJ】4504 威威猫系列故事——篮球梦
水题. #include <cstdio> #include <cstdlib> #include <cstring> #define MAXN 25 ]; voi ...
- hdu 4504 威威猫系列故事——篮球梦_简单dp
题目链接 题意:你现在分数为a,对方分数为b,你比赛还有n分钟,每次进攻需要15分钟,现在你先进攻,每次进攻可以得1或2或3,对方每次进攻得一分,问超过对方分数有多少种打法 思路:因为情况太多要用__ ...
- 2013腾讯编程马拉松初赛第〇场（HDU 4504）威威猫系列故事——篮球梦
http://acm.hdu.edu.cn/showproblem.php?pid=4504 题目大意: 篮球赛假如我们现在已经知道当前比分 A:B,A代表我方的比分,B代表对方的比分,现在比赛还剩下 ...
- NSIS
NSIS 是“Nullsoft 脚本安装系统”(Nullsoft Scriptable Installation System) 的缩写,它是一个免费的 Win32 安装.卸载系统,采用了简洁高效的脚 ...
- hdu4504java
import java.util.*; class Main{ public static void main(String[] args) { Scanner cin=new Scanner( ...
- ZT I Believe I Can Fly(我相信我能飞）
I Believe I Can Fly(我相信我能飞) 歌手:R. Kelly(罗 凯利) 歌词部分 I used to think that I could not go on 我原以为我无法坚持下 ...
随机推荐
- 5)关于CSS和js静态文件引入路径
(1)参考资料 thinkphp5手册 视图--->输出替换 (2)方法(1)在我们的application中,找到config.php,在里面输入这样的配置: <?php ...
- kubernetes flannel 网卡绑定错误，故障排查
kubernetes 新加了个node,状态Ready,但调度过去的任务,都执行异常 查看异常节点日志 `Error adding net work: open run/flannel/subnet. ...
- dubbo服务调用
1.Dubbo的缺省(默认)协议:采用单一长连接和NIO异步通讯. 2. 3.调用关系说明 0. 服务容器负责启动,加载,运行服务提供者. 1. 服务提供者在启动时,向注册中心注册自己提供的服务. ...
- Anaconda 安装、TensorFlow 安装、pytorch 安装
问题 1 假设已经安装完Anaconda Navigator,按照 网址:https://www.zhihu.com/question/55577586 的教程操作,设置镜像源地址,安装. 问题 2: ...
- Angular开发者指南（五）服务
服务 AngularJS服务是使用依赖注入(DI)连接在一起的可替代对象. 可以使用服务在整个应用程式中整理和分享程式码. AngularJS服务有: 延迟初始化 - AngularJS只在应用程序组 ...
- java中的锁——列队同步器
队列同步器 队列同步器(AbstractQueuedSynchronizer)为实现依赖于先进先出 (FIFO) 等待队列的阻塞锁和相关同步器(信号量.事件,等等)提供一个框架.此类的设计目标是成为依 ...
- FFT(快速傅里叶变换) 模板
洛谷 P3803 [模板]多项式乘法(FFT)传送门 存个板子,完全弄懂之后找机会再写个详解. #include<cstdio> #include<cmath> struct ...
- CentOS 5.5 --学习（1）
一.解决浏览器乱码问题: 用yum 安装 yum -y install fonts-chinese yum -y install fonts-ISO8859-2-75dpiCentOS系统 ...
- 吴裕雄--天生自然Android开发学习：1.2.2 使用Android Studio开发Android APP
1.下载Android Studio 官网下载:Android Studio for Window ... :http://developer.android.com/sdk/installing/s ...
- JavaScript学习总结（六）数据类型和JSON格式
转自:http://segmentfault.com/a/1190000000668072 什么是JSON JSON:JavaScript 对象表示法(JavaScript Object Notati ...