<!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. js 循环json

    var json= { "Type": "Coding", "Height":100 }; for (var key in json) { ...

  2. PHP ftp_cdup() 函数

    定义和用法 ftp_cdup() 函数把当前目录改变为 FTP 服务器上的父目录. 如果成功,该函数返回 TRUE.如果失败,则返回 FALSE. 语法 ftp_cdup(ftp_connection ...

  3. 浏览器表单默认记忆功能input的 autocomplete="off"属性

    一般情况下浏览器会有自动记录密码等的功能,但是有时候我们不需要这样的功能,下面有两种情况下关闭记忆功能有效: 1:在form中,如果有input[type=password],autocomplete ...

  4. NX二次开发-基于NX开发向导模板的NX对Excel读写操作(OLE方式(COM组件))

    在看这个博客前,请读者先去完整看完:NX二次开发-基于MFC界面的NX对Excel读写操作(OLE方式(COM组件))https://ufun-nxopen.blog.csdn.net/article ...

  5. Android_开发片段（Part 2）

    1.List和Map知识: 1)如何定义 List<Map<String,Object>> list=new ArrayList<Map<String,Object ...

  6. 四：RF框架appium工具之xpath定位

    XPATH定位方法具体的学会,还是在今年1月份,以前运用的都不熟练. 这个定位神器是一定要掌握的,不然有你抓狂的时候. 第一要掌握它的书写格式,这个好上手. 第二要掌握它的具体用法.这个就要多练习了, ...

  7. CSS：CSS 表格

    ylbtech-CSS:CSS 表格 1.返回顶部 1. CSS 表格 使用 CSS 可以使 HTML 表格更美观. Company Contact Country Alfreds Futterkis ...

  8. maven学习整理-基础知识

    1.maven认识 maven是一种自动化的构建工具,它主要解决的问题有: ①项目中的划分规则:原先我们用package或文件夹的形式来划分不同模块,导致在一个项目中存在大量的文件夹和包代码显得庞大: ...

  9. 3.4 redux 异步

    在大多数的前端业务场景中,需要和后端产生异步交互,在本节中,将详细讲解 redux 中的异步方案以及一些异步第三方组件,内容有: redux 异步流 redux-thunk redux-promise ...

  10. Bochs调试VirtualBox生成的VDI映像

    将VDI映像转换成Bochs支持的img映像 1: vboxmanage clonehd source.vdi destination.img --format RAW 在bochsrc.txt中引用 ...