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左右切换图片(仿新浪,网易,百度等切换图片)
首先我们还是看一些示例:(网易,新浪,百度) 显示效果都不错,可是手感就不一样了,百度最棒,网易还行,新浪就操作很不好,这里我说的是滑动切换图片.自己可以测试一下.不得不说牛叉的公司确实有哦牛叉的道理 ...
随机推荐
- 基于centos7.3 redhat7.3安装LAMP(php7.0 php7.1)生产环境实践
- ARTS-S python抽象方法抽象类
# coding: utf-8 from abc import ABC, abstractmethod class AbstractClassExample(ABC): def __init__(se ...
- .net core 在服务端限制文件下载速度(传输速度)
public IActionResult GetFile() { MyFileStream readStream = new MyFileStream(@"XXX/A.XX", F ...
- socket AcceptAsync方法的使用
AcceptAsync与Accept很大的不一样 Accept是一个同步 阻塞的已经封装好底层的方法 AcceptAsync是一个异步 非阻塞未封装的底层连接入口,需要手动填入连接代码用于优化sock ...
- 正则去掉html标签之间的空格、换行符、tab符,但是保留html标签内部的属性空格
今天遇到一个比较少见的去空格: 正则去掉html标签之间的空格.换行符.tab符,但是保留html标签内部的属性空格 JS 举例: "<a href='baidu.com' name= ...
- Day 08 作业
有如下值集合 [11, 22, 33, 44, 55, 66, 77, 88, 99, 90...],将所有大于 66 的值保存至字典的第一个key中,将小于 66 的值保存至第二个key的值中 ...
- 《Android项目实战--手机安全卫士》读后感
上学期在学校图书馆看到此书,觉得比较贴近实践,于是寒假研究了一番,也算是体会了一把社会培训机构的模式. 由于时间关系,最后两章还没弄完,但感觉每章节的流程相似,加之马上要回学校了,所以打算在家的最后一 ...
- 吃透Python上下文管理器
什么是上下文管理器? 我们常见的with open操作文件,就是一个上下文管理器.如: with open(file, 'rb') as f: text = f.read() 那上下文管理器具体的定义 ...
- vue中子组件直接修改父组件prop属性bug
在有些时候,子组件直接修改父组件传来的 prop 对象的属性会出现不同步的问题. 比如,父组件传过来的一个对象 checkBoxObj: checkBoxObj:{ checked: false } ...
- OpenWrite一款博客可一文多发的实用工具
前言 许多网友想看一文多发的OpenWrite,今天,它来了!别问落地价,因为内测无价! 这款实用工具,可支持十大博客平台一键发布,是博主们的发文神器 你看它多种平台.一键管理.后台界面优雅.还有签到 ...