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左右切换图片(仿新浪,网易,百度等切换图片)
首先我们还是看一些示例:(网易,新浪,百度) 显示效果都不错,可是手感就不一样了,百度最棒,网易还行,新浪就操作很不好,这里我说的是滑动切换图片.自己可以测试一下.不得不说牛叉的公司确实有哦牛叉的道理 ...
随机推荐
- python学习笔记-生成随机数
更多大数据分析.建模等内容请关注公众号<bigdatamodeling> 在实现算法时经常会用到随机数,有时会忘记各种随机数的生成方法,这里对Python中的随机数生成方法进行汇总,以供以 ...
- wxxcx_learn
32个字符组成的一组随即字符串 function getRandChar($length){ $str = null; $strPol = "ABCDEFGHIJKLMNOPQRSTUVWX ...
- JS基础-事件队列
为什么JavaScript是单线程? JavaScript语言的一大特点就是单线程,也就是说,同一个时间只能做一件事.那么,为什么JavaScript不能有多个线程呢?这样能提高效率啊. JavaSc ...
- 【hibernate】映射可嵌入式组件
[hibernate]映射可嵌入式组件 转载:https://www.cnblogs.com/yangchongxing/p/10376452.html 可嵌入 Address 类,没有对应的数据表 ...
- 201871010119-帖佼佼《面向对象程序设计(java)》第二周学习总结
项目 内容 这个作业属于哪个课程 <任课教师博客主页链接> https://www.cnblogs.com/nwnu-daizh/ 这个作业的要求在哪里 <作业链接地址> ...
- Java堆的结构是什么样子的?什么是堆中的永久代(Perm Gen space)?
JVM的堆是运行时数据区,所有类的实例和数组都是在堆上分配内存.它在JVM启动的时候被创建.对象所占的堆内存是由自动内存管理系统也就是垃圾收集器回收. 堆内存是由存活和死亡的对象组成的.存活的对象是应 ...
- python故障排除
在初学 Python 时,想要弄懂 Python 的错误信息的含义可能有点复杂.这里列出了常见的的一些让程序 crash 的运行时错误. 1)忘记在 if , elif , else , for , ...
- DS-5新加交叉编译工具
Adding New Compiler Toolchains to DS-5 In this tutorial, you will learn how to add new compiler tool ...
- 京东云携手HashiCorp,宣布推出Terraform Provider
2019年4月23日消息,京东云携手云基础设施自动化软件的领导者HashiCorp,宣布推出Terraform Provider for JD Cloud,这意味着用户能够在京东云上轻松使用简单模板语 ...
- python多线程编程-queue模块和生产者-消费者问题
摘录python核心编程 本例中演示生产者-消费者模型:商品或服务的生产者生产商品,然后将其放到类似队列的数据结构中.生产商品中的时间是不确定的,同样消费者消费商品的时间也是不确定的. 使用queue ...