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左右切换图片(仿新浪,网易,百度等切换图片)
首先我们还是看一些示例:(网易,新浪,百度) 显示效果都不错,可是手感就不一样了,百度最棒,网易还行,新浪就操作很不好,这里我说的是滑动切换图片.自己可以测试一下.不得不说牛叉的公司确实有哦牛叉的道理 ...
随机推荐
- intellij idea使用tomcat maven plugin
环境 java 1.8.0_111 tomcat tomcat-8.5.11 maven 3.2.5 intellij idea 14.0.3 命令行使用 建maven工程 mvn archetype ...
- 【JS】369- 20个常用的JavaScript字符串方法
点击上方"前端自习课"关注,学习起来~ 作者:前端小智 https://segmentfault.com/a/1190000020204425 本文主要介绍一些最常用的JS字符串函 ...
- kafka生产消息,streaming消费
package com.bd.useranalysis.spark.streaming.kafka2es; import com.alibaba.fastjson.JSON; import com.b ...
- 一篇文章带你解读Redis分布式锁的发展史和正确实现方式
前言 近两年来微服务变得越来越热门,越来越多的应用部署在分布式环境中,在分布式环境中,数据一致性是一直以来需要关注并且去解决的问题,分布式锁也就成为了一种广泛使用的技术,常用的分布式实现方式为Redi ...
- 你不知道的JavaScript(上)this和对象原型(四)原型
五章 原型 1.[[ Prototype ]] JavaScript 中的对象有一个特殊的 [[Prototype]] 内置属性,其实就是对于其他对象的引用.几乎所有的对象在创建时 [[Prototy ...
- spf13-vim 显示neocomplete requires ...th Lua support
安装spf13-vim的时候下载了许多插件,neocomplete应该是比较重要的一个,毕竟自动补全.但是在使用时却一直有:neocomplete requires ...th Lua support ...
- spring cloud详解
1.Spring boot与Spring cloud 之间的关系 Spring boot 是 Spring 的一套快速配置脚手架,可以基于spring boot 快速开发单个微服务 Spring ...
- 多线程之美5一 AbstractQueuedSynchronizer源码分析<一>
AQS的源码分析 目录结构 1.什么是CAS ? 2.同步器类结构 3.CLH同步队列 4.AQS中静态内部类Node 5.方法分析 5.1.acquire(int arg ) 5.2.rel ...
- SpringMVC深入浅出(一)
1.Springmvc是什么 是一个表现层框架,用于接受请求及参数,响应请求回显数据. 2.SpringMVC处理流程 SpringMVC流程 1. 用户发送请求至前端控制器DispatcherSe ...
- 1w+的心路历程
鬼知道我是如何坚持下来的,如果非要找个理由,那或许是所谓的热爱. 公众号转眼间写了三年.写的内容围绕着安卓技术,源码剖析,生活感悟,职场人生. 很庆幸的是,得到大家的支持,每一条留言都会是一次交流,看 ...