<!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简单图片切换的更多相关文章

  1. js简单 图片版时钟，带翻转效果

    js简单 图片版时钟,带翻转效果 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"& ...

  2. 前端设计——js实现图片切换的淡入淡出

    1.网页结构如图所示 2.页面布局设计细节 ①分块:一个小方块是一个div. ②无序列表一般是竖直排放的,可以通过float让其水平排放.float:left; ③三个小方块是浮动上去的,所以要用到p ...

  3. JS制作图片切换

    <!DOCTYPE html> <html> <head> <title>纯JS制作简单的图片切换</title> <meta cha ...

  4. CSS学习------之简单图片切换

    最近一直在重温纯CSS,学习的时候真的才发现,css真的博大精深啊! 所以趁着学习的劲头,谢了个最简单的CSS图片切换! 先整理下思路: 首先我希望图片居中间,两边有个切换按钮,点击按钮的时候,可以实 ...

  5. jquery实现图片切换和js实现图片切换

    jquery实现图片切换: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http ...

  6. JS美女图片切换带视觉差

    使用JS实现,多张图片动态切换查看效果:http://hovertree.com/texiao/js/21/ 效果图: 转自:http://hovertree.com/h/bjaf/iamhxcyk. ...

  7. js手风琴图片切换实现原理及函数分析

    关键词: js手风琴 js百叶窗 js百页窗 实现原理解读 使用两层for循环实现, 第一层有三个功能,分别给第个li: 添加索引 预设位置 添加事件 第二层有两个功能,整理图片位置: 鼠标的li,以 ...

  8. js 插入图片切换，innerHTML

    <!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content=&q ...

  9. javascript马赛克遮罩图片切换效果:XMosaic.js(转)

    新鲜出炉的javascript图片切换特效,实现的是马赛克遮罩切换.在flash里,好实现遮罩动画很简单,不过JS实现起来就有些困难了. XMosaic.js,与XScroll.js和XScroll2 ...

随机推荐

  1. C# System.Windows.Forms.Panel

    UserControl 定义的界面 输出到panel 实现界面切换

  2. 简单记录下Jmeter通过CSV保存测试数据，测试用例，及将测试结果导出到Excel里

    1.CSV保存测试数据,并上传到CSV Data Set Config,设置相关属性 2.CSV保存测试用例,并上传到CSV Data Set Config,设置相关属性 3.设置一个http请求,设 ...

  3. js 实时计算文本框字数限制

    $.fn.myTarea = function(){ return this.each(function(){ $(this).bind('input propertychange', functio ...

  4. Elasticsearch之index_closed_exception

    索引的打开与关闭 关闭索引 POST /index_name/_close 尝试插入数据 PUT /shakespeare/_doc/ { "title":"kibana ...

  5. BZOJ 2005: [Noi2010]能量采集(容斥+数论)

    传送门 解题思路 首先题目要求的其实就是\(\sum\limits_{i=1}^n \sum\limits_{j=1}^m [(gcd(i,j)-1)*2+1)]\),然后变形可得\(-n*m+2\s ...

  6. ACdream 1157 （cdq分治）

    题目链接 Segments Time Limit: 4000/2000MS (Java/Others)Memory Limit: 20000/10000KB (Java/Others) Problem ...

  7. 巧用Wget快速建立文件下载中心

    Wget基本用法:1) 从网上下载单个文件 wget http://www.freehao123.com/file.iso 2) 下载一个文件,但以不同的名字存为本地文件 wget –output-d ...

  8. Mentor_丝印检查——手工绘制丝印线条（标注）到丝印位号距离的检查

    http://www.eda365.com/thread-193942-1-1.html 在此之前丝印的检查基本是停留在丝印与阻焊的距离检查,而器件丝印框和手工绘制的线条与器件位号的检查都不到位,据我 ...

  9. 【二叉树】二叉树常用算法的C++实现

    常见算法有: 1.求二叉树的最大深度 2.求二叉树的最小深度 3.二叉树的层次遍历 4.二叉树的前序遍历 5.二叉树的中序遍历 6.二叉树的后序遍历 7.求二叉树的节点个数 8.求二叉树的叶节点个数 ...

  10. 虚拟机安装VMware Tools， 安装gcc编译器

    一.虚拟机安装VMware Tools 1.虚拟机=>安装VMware Tools 2.打开文件,将下载的压缩包VMwareTools-10.3.10-12406962.tar.gz移动到指定安 ...