javascript---简介的切换图片效果。
<!--切换图片-->
<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---简介的切换图片效果。的更多相关文章
- javascript设计模式实践之职责链--具有百叶窗切换图片效果的JQuery插件(三)
在上一篇<javascript设计模式实践之模板方法--具有百叶窗切换图片效果的JQuery插件(二)>里,通过采用模板方法模式完成了切换效果对象的构建编写. 接下来就是完成各效果对象的调 ...
- javascript设计模式实践之模板方法--具有百叶窗切换图片效果的JQuery插件(二)
在上一篇<javascript设计模式实践之迭代器--具有百叶窗切换图片效果的JQuery插件(一)>里,通过采用迭代器模式完成了各初始化函数的定义和调用. 接下来就要完成各个切换效果的编 ...
- javascript设计模式实践之迭代器--具有百叶窗切换图片效果的JQuery插件(一)
类似于幻灯片的切换效果,有时需要在网页中完成一些图片的自动切换效果,比如广告,宣传,产品介绍之类的,那么单纯的切就没意思了,需要在切换的时候通过一些效果使得切换生动些. 比较常用之一的就是窗帘切换了. ...
- 用CALayer实现淡入淡出的切换图片效果
由于直接更改layer的contents显示的隐式动画切换的时候的动画持续时间没办法控制, 切换效果不尽人意,所以这里配合了CABasicAnimation实现淡入淡出的切换效果, 另外还可以使用组合 ...
- JS实现动态瀑布流及放大切换图片效果(js案例)
整理了一下当时学js写的一些案例,再次体验了一把用原生JS实现动态瀑布流效果的乐趣,现在把它整理出来,需要的小伙伴可以参考一下. 该案例主要是用HTML+CSS控制样式,通过JS实现全局瀑布流以及点击 ...
- 一起学HTML基础-利用CSS和JavaScript制作一个切换图片的网页
由于个人原因,不详细写步骤 思路: 一.布局 二.制作图片区和按钮区的div及颜色.边框.背景属性等 三.用PS将四张图片剪切到同一个尺寸,重叠放置在图片切换区,透明度设置为0 四.点击对应按钮时,将 ...
- HTML-利用CSS和JavaScript制作一个切换图片的网页
由于个人原因,不详细写步骤 思路: 一.布局 二.制作图片区和按钮区的div及颜色.边框.背景属性等 三.用PS将四张图片剪切到同一个尺寸,重叠放置在图片切换区,透明度设置为0 四.点击对应按钮时,将 ...
- Winform PPT切换图片效果
using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...
- android listview的HeadView左右切换图片(仿新浪,网易,百度等切换图片)
首先我们还是看一些示例:(网易,新浪,百度) 显示效果都不错,可是手感就不一样了,百度最棒,网易还行,新浪就操作很不好,这里我说的是滑动切换图片.自己可以测试一下.不得不说牛叉的公司确实有哦牛叉的道理 ...
随机推荐
- Demo00
Demo00 std::transform在指定的范围内应用于给定的操作,并将结果存储在指定的另一个范围内.要使用std::transform函数需要包含头文件. 以下是std::transform的 ...
- 适用于带fifo接口的存储器和显示器测试模块封装 挑战cb
cb说完美是没有极限的,对此我表示赞同,自从用了cb的板子,玩开cmos,fpga,sdram,vga等. 不断涌现的是,双端口sdram,四端口sdram,各式各样的封装,但是大同小异,但总是有些不 ...
- css3(2)
旋转: 2D:transform: rotate()——进行旋转,括号内部写旋转角度,默认顺时针旋转.允许负值,元素将进行逆时针旋转, translate()——从当前位置进行移动,括号内为x,y值. ...
- Java获取配置文件中的属性
获取配置文件的属性值 example 目标配置文件jdbc.properties,现想要在java类里面调用opcl的url jdbc.url=jdbc:mysql://localhost:3306/ ...
- cookie与session django中间件
目录 一.什么是cookie 二.django中操作cookie 2.1 如何操作cookie 2.2 操作cookie 三.什么是session 四.django中操作session 4.1 创建c ...
- 《Dotnet9》建站-本站Logo设计之路
时间如流水,只能流去不流回! 点赞再看,养成习惯,这是您给我创作的动力! 本文 Dotnet9 https://dotnet9.com 已收录,站长乐于分享dotnet相关技术,比如Winform.W ...
- go 1.13编译遇到xxx/go.mod malformed record data 问题
背景: 公司在做自己的发布平台,需要自动化编译go 工程,大部分开发使用的都是go 1.12 版本 由于go mod的机制,有很多包需要代理才能进行下载,而自动化编译频繁的进行代理切换就很麻烦. 所以 ...
- 日志介绍与rsyslogd服务管理与配置
一.日志简介 1.日志相关服务介绍 在 CentOS 6.x 中日志服务使用 rsyslogd 服务,rsyslogd 具有以下特点: 基于 TCP 网络协议传输日志信息 更安全的网络传输方式 有日志 ...
- MongoDB(五):更新文档、删除文档
1. 更新文档 MongoDB的uptade()和save()方法用于将集合中的文档更新.update()方法更新现有文档中的值,而save()方法是传递文档数据替换现有文档.从3.2版本开始,Mon ...
- .Net中WebService的Demo示例
一.创建一个Web服务 1.新建一个项目WebserverDemo 2.在项目处添加新建项,添加一个web服务 3.编辑TestServer.asmx文件 3.1 TestServer.asmx默认的 ...