首先让我们先欣赏一下效果图:

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篮球梦的更多相关文章

  1. HDU--杭电--4504--威威猫系列故事——篮球梦--DP

    威威猫系列故事——篮球梦 Time Limit: 300/100 MS (Java/Others)    Memory Limit: 65535/32768 K (Java/Others) Total ...

  2. HDUOJ----4504 威威猫系列故事——篮球梦

    威威猫系列故事——篮球梦 Time Limit: 300/100 MS (Java/Others)    Memory Limit: 65535/32768 K (Java/Others)Total ...

  3. HDU 4504 威威猫系列故事——篮球梦(dp)

    http://acm.hdu.edu.cn/showproblem.php?pid=4504 题目大意: 中文都看得懂.不过我是看hint才正确理解什么意思的.开始的时候理解错了. 解题思路: 给定时 ...

  4. 【HDOJ】4504 威威猫系列故事——篮球梦

    水题. #include <cstdio> #include <cstdlib> #include <cstring> #define MAXN 25 ]; voi ...

  5. hdu 4504 威威猫系列故事——篮球梦_简单dp

    题目链接 题意:你现在分数为a,对方分数为b,你比赛还有n分钟,每次进攻需要15分钟,现在你先进攻,每次进攻可以得1或2或3,对方每次进攻得一分,问超过对方分数有多少种打法 思路:因为情况太多要用__ ...

  6. 2013腾讯编程马拉松初赛第〇场(HDU 4504)威威猫系列故事——篮球梦

    http://acm.hdu.edu.cn/showproblem.php?pid=4504 题目大意: 篮球赛假如我们现在已经知道当前比分 A:B,A代表我方的比分,B代表对方的比分,现在比赛还剩下 ...

  7. NSIS

    NSIS 是“Nullsoft 脚本安装系统”(Nullsoft Scriptable Installation System) 的缩写,它是一个免费的 Win32 安装.卸载系统,采用了简洁高效的脚 ...

  8. hdu4504java

    import java.util.*;  class   Main{ public static void main(String[] args) { Scanner cin=new Scanner( ...

  9. ZT I Believe I Can Fly(我相信我能飞)

    I Believe I Can Fly(我相信我能飞) 歌手:R. Kelly(罗 凯利) 歌词部分 I used to think that I could not go on 我原以为我无法坚持下 ...

随机推荐

  1. Spring技术内幕

    一.Spring设计目的     通过Spring容器管理JavaBean使原来对象→对象的关系转变为对象→容器→对象的关系,从而实现对象的解耦合和面向接口开发,充分支持OO思想.   二.Sprin ...

  2. JAVA并发思维导图

    原博客:https://blog.csdn.net/oqkdws/article/details/82145389

  3. [LC] 255. Verify Preorder Sequence in Binary Search Tree

    Given an array of numbers, verify whether it is the correct preorder traversal sequence of a binary ...

  4. hdu 6035 Colorful Tree(虚树)

    考虑到树上操作:首先题目要我们求每条路径上出现不同颜色的数量,并把所有加起来得到答案:我们知道俩俩点之间会形成一条路径,所以我们可以知道每个样例的总的路径的数目为:n*(n-1)/2: 这样单单的求, ...

  5. <USACO09DEC>视频游戏的麻烦Video Game Troublesの思路

    emm今天模拟赛的题.神奇地A了 #include<cstdio> #include<cstring> #include<iostream> #include< ...

  6. 2019牛客多校(第十场)F Popping Balloons —— 线段树+枚举

    https://ac.nowcoder.com/acm/contest/890/F 题意:二维平面中有n个气球,你可以横着社三法子弹,竖着射三发子弹,且横着子弹的关系是y,y+r,y+2*r,竖着是x ...

  7. MS激活

    亲测可用 国内博客  https://msguides.com/ 他是翻译的这个哥们的网页: https://msguides.com/

  8. 解决scoped 下confirm 样式问题

  9. 吴裕雄--天生自然 R语言开发学习:图形初阶(续二)

    # ----------------------------------------------------# # R in Action (2nd ed): Chapter 3 # # Gettin ...

  10. jstl之核心标签

    JSP 标准标签库(JSTL) JSP标准标签库(JSTL)是一个JSP标签集合,它封装了JSP应用的通用核心功能. JSTL支持通用的.结构化的任务,比如迭代,条件判断,XML文档操作,国际化标签, ...