js简单图片切换
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/> <title> </title> </head>
<style>
#zp img{
margin:0 auto;
}
</style>
<body>
<div id="zp">
<img src="iamges/46.png" width="300" height="200" id="img1"/>
</div> <input type="button" value="上一张" onclick="sz()"/> <input type="button" value="下一张" onclick="xz()"/>
</body> <script type="text/javascript">
var picArr=new Array("iamges/46.png","iamges/47.png","iamges/48.png","iamges/49.png","iamges/50.png"); var xp=0; function sz(){ xp++;
if(xp==picArr.length){
xp=0;
}
document.getElementById("img1").src=picArr[xp];
} function xz(){
xp--;
if(xp<0){
xp=picArr.length-1;
}
document.getElementById("img1").src=picArr[xp];
}
</script>
</html>
效果图
js简单图片切换的更多相关文章
- js简单 图片版时钟,带翻转效果
js简单 图片版时钟,带翻转效果 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"& ...
- 前端设计——js实现图片切换的淡入淡出
1.网页结构如图所示 2.页面布局设计细节 ①分块:一个小方块是一个div. ②无序列表一般是竖直排放的,可以通过float让其水平排放.float:left; ③三个小方块是浮动上去的,所以要用到p ...
- JS制作图片切换
<!DOCTYPE html> <html> <head> <title>纯JS制作简单的图片切换</title> <meta cha ...
- CSS学习------之简单图片切换
最近一直在重温纯CSS,学习的时候真的才发现,css真的博大精深啊! 所以趁着学习的劲头,谢了个最简单的CSS图片切换! 先整理下思路: 首先我希望图片居中间,两边有个切换按钮,点击按钮的时候,可以实 ...
- jquery实现图片切换和js实现图片切换
jquery实现图片切换: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http ...
- JS美女图片切换带视觉差
使用JS实现,多张图片动态切换查看效果:http://hovertree.com/texiao/js/21/ 效果图: 转自:http://hovertree.com/h/bjaf/iamhxcyk. ...
- js手风琴图片切换实现原理及函数分析
关键词: js手风琴 js百叶窗 js百页窗 实现原理解读 使用两层for循环实现, 第一层有三个功能,分别给第个li: 添加索引 预设位置 添加事件 第二层有两个功能,整理图片位置: 鼠标的li,以 ...
- js 插入图片切换,innerHTML
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content=&q ...
- javascript马赛克遮罩图片切换效果:XMosaic.js(转)
新鲜出炉的javascript图片切换特效,实现的是马赛克遮罩切换.在flash里,好实现遮罩动画很简单,不过JS实现起来就有些困难了. XMosaic.js,与XScroll.js和XScroll2 ...
随机推荐
- VersionInformation.dwPlatformId == 2
Result:=OSVI.dwPlatformId; { 返回值: 为0表示为win3x系统; 为1表示为win9x系统; 为2表示为winNT; 为3表示为win2000系统; }
- java笔试手写算法面试题大全含答案
1.统计一篇英文文章单词个数.public class WordCounting {public static void main(String[] args) {try(FileReader fr ...
- java中String类的面试题大全含答案
1.下面程序的运行结果是()(选择一项)String str1="hello";String str2=new String("hello");System.o ...
- Java数据库事务四大特性以及隔离级别
四大特性ACID 原子性(Atomicity) 原子性是指事务包含的所有操作要么全部成功,要么全部失败回滚.失败回滚的操作事务,将不能对数据库有任何影响 一致性(Consistency) 一致性是指事 ...
- css自适应问题
1. 图片自适应 <img src="app-logo.png" srcset="app-logo.png 175w,app-logo-double.png 365 ...
- leetcood学习笔记-9
题目描述 方法一:转换为字符串 class Solution: def isPalindrome(self, x: int) -> bool: if x<0: return False e ...
- go静态类型
go静态类型 静态类型语言意味着变量必须指定一个类型,例如整型.字符串.布尔型和数组等.可以在声明变量时指定变量类型.大多数情况下,让编译器自动去推断变量类型(我们将看到一些简单的例子). 关于静态类 ...
- 芜湖市2018市队选拔Day2T1
好激动啊,Day2竟然AK了! Day2T1养宠物 Descriptionbadgers是可爱的动物,Smart想拥有一些.宠物店提供N个badgers,编号为1..N,Smart都很喜欢,所以他想拥 ...
- leyou_04_使用vue.js搭建页面—使用ajax完成品牌的查询
1.使用vue.js搭建页面 1.1使用的模板插件Vuetify 中文UI组件官网:https://vuetifyjs.com/zh-Hans/getting-started/quick-start ...
- windows10安装sqlmap与简单配置
一.获取sqlmap压缩包: 注意:安装sqlmap之前,先确认已有python2.x环境 获取sqlmap压缩包并解压 下载地址:http://sqlmap.org/ 二.将解压缩的文件放在pyth ...