<!--切换图片-->
<img src="img/9.gif" alt="" id="img">
<button onclick="prev();"> < </button>
<button onclick="next();"> > </button>
<script>
// 获取到 img
var oImg = document.getElementById("img");
// 上一个
var num =9;
function prev() {
num -= 1;
if (num === -1){
num = 9;
}
oImg.src = 'img/'+num+'.gif';
}
// 下一个
function next() {
num += 1;
if (num === 10){
num =0;
}
oImg.src = 'img/'+num+'.gif';
}
</script>

在使用图片时,图片的命名用数字表达,这样简单明了,方便js的运行。

javascript---简介的切换图片效果。的更多相关文章

  1. javascript设计模式实践之职责链--具有百叶窗切换图片效果的JQuery插件(三)

    在上一篇<javascript设计模式实践之模板方法--具有百叶窗切换图片效果的JQuery插件(二)>里,通过采用模板方法模式完成了切换效果对象的构建编写. 接下来就是完成各效果对象的调 ...

  2. javascript设计模式实践之模板方法--具有百叶窗切换图片效果的JQuery插件(二)

    在上一篇<javascript设计模式实践之迭代器--具有百叶窗切换图片效果的JQuery插件(一)>里,通过采用迭代器模式完成了各初始化函数的定义和调用. 接下来就要完成各个切换效果的编 ...

  3. javascript设计模式实践之迭代器--具有百叶窗切换图片效果的JQuery插件(一)

    类似于幻灯片的切换效果,有时需要在网页中完成一些图片的自动切换效果,比如广告,宣传,产品介绍之类的,那么单纯的切就没意思了,需要在切换的时候通过一些效果使得切换生动些. 比较常用之一的就是窗帘切换了. ...

  4. 用CALayer实现淡入淡出的切换图片效果

    由于直接更改layer的contents显示的隐式动画切换的时候的动画持续时间没办法控制, 切换效果不尽人意,所以这里配合了CABasicAnimation实现淡入淡出的切换效果, 另外还可以使用组合 ...

  5. JS实现动态瀑布流及放大切换图片效果(js案例)

    整理了一下当时学js写的一些案例,再次体验了一把用原生JS实现动态瀑布流效果的乐趣,现在把它整理出来,需要的小伙伴可以参考一下. 该案例主要是用HTML+CSS控制样式,通过JS实现全局瀑布流以及点击 ...

  6. 一起学HTML基础-利用CSS和JavaScript制作一个切换图片的网页

    由于个人原因,不详细写步骤 思路: 一.布局 二.制作图片区和按钮区的div及颜色.边框.背景属性等 三.用PS将四张图片剪切到同一个尺寸,重叠放置在图片切换区,透明度设置为0 四.点击对应按钮时,将 ...

  7. HTML-利用CSS和JavaScript制作一个切换图片的网页

    由于个人原因,不详细写步骤 思路: 一.布局 二.制作图片区和按钮区的div及颜色.边框.背景属性等 三.用PS将四张图片剪切到同一个尺寸,重叠放置在图片切换区,透明度设置为0 四.点击对应按钮时,将 ...

  8. Winform PPT切换图片效果

    using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...

  9. android listview的HeadView左右切换图片(仿新浪,网易,百度等切换图片)

    首先我们还是看一些示例:(网易,新浪,百度) 显示效果都不错,可是手感就不一样了,百度最棒,网易还行,新浪就操作很不好,这里我说的是滑动切换图片.自己可以测试一下.不得不说牛叉的公司确实有哦牛叉的道理 ...

随机推荐

  1. 打样ov9650,无一幸免,失败告终,之调试记录

    新打样的ov9650,焊接了4块,其中只有2块有反应,另外两块无反应,于是使用热风台助焊,调试 助焊无效,怀疑焊盘有问题,于是拆掉 有问题的图像不正常 已看图像,只知道缺位,于是使用示波器检查,发现d ...

  2. 【Git】Windows 配置 SSH-Key

    查看本地公钥是否存在 执行以下语句来判断是否已经存在本地公钥 cat ~/.ssh/id_rsa.pub 如果出现如下截图,则本地公钥不存在,继续按步骤进行. 如果看到一长串以 ssh-rsa 或 s ...

  3. CSS——overflow的参数以及使用

    学习网站:https://developer.mozilla.org/zh-CN/docs/Web/CSS/overflow

  4. AES-加密解密工具类

    注意:AES加密算法对于不同系统之间的tokens可能会不同,需要在相同的系统间使用 如果设置为private,在其它类调用AES访问不了这个tokens常量,需要自主定义一个tokens或者在配置文 ...

  5. android studio 项目生成的apk变小的原因

    问题:感觉直接在apk文件夹下面拷出来的apk不能安装使用,而且apk比较小,可能就是这个问题引起的 Android Studio版本升级到2.3后,增加了instant run功能,对项目的buil ...

  6. poj 1511 Invitation Cards (最短路)

    Invitation Cards Time Limit: 8000MS   Memory Limit: 262144K Total Submissions: 33435   Accepted: 111 ...

  7. HttpRunner学习11--指定用例运行次数

    前言 在HttpRunner中,一般情况下,我们写的用例脚本都是每次运行一次,如果我们想要指定用例运行的次数,可以通过 times 关键字来实现. 测试场景 在这里,我们以访问 TesterHome ...

  8. CSS flex 布局快速入门

    以前已经学过flex了,一直没做笔记,现在做下笔记再回忆下. 首先,flex布局的迷之属性们,如果一知半解,机械记忆的话,那不到半个月基本忘光光.先感受一下这12个flex布局属性,是不是很“迷”人. ...

  9. 前后端分离crud(跨域问题)讲解

    1 前后端分离 1.1 后端 ssm+maven 多模块 swagger 文档描述(代码拷贝过来,就可以生成了,https://www.cnblogs.com/wings-xh/p/11991511. ...

  10. 微信小程序—支付宝小程序与微信小程序的不同点对比

    支付宝小程序语法 http://caibaojian.com/aliapp-wxapp.html https://www.cnblogs.com/bgwhite/p/9447639.html http ...