<!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. mybatis 多表查询sql

    在使用spring,spring mvc,mybatis时,mybatis链接数据库做多表查询的时候,sql语句中直接使用left join等链接字符就可以 链接多个表,参数类型是parameterT ...

  2. UnixBench算分介绍

    关于如何用UnixBench,介绍文章很多,这里就不展开了.这里重点描述下它是如何算分的. 运行参数 碰到很多客户,装好后,直接./Run,就把结果跑出来了,然后还只取最后一个分值,比谁高谁低.下面列 ...

  3. PHP ftp_delete() 函数

    定义和用法 ftp_delete() 函数删除 FTP 服务器上的一个文件. 如果成功,该函数返回 TRUE.如果失败,则返回 FALSE 和一个警告. 语法 ftp_delete(ftp_conne ...

  4. JCF——List

    ArrayList LinkedList Vector

  5. Python内置模块-time && datatime

    Python提供两种时间表示方式,一种是时间戳,从1970年1月1日 0时开始.一种是struct_time数组格式,共有9个元素. import time print(time.time()) #返 ...

  6. 画山 paint

    画山 paint 有一张大小为n*m的白纸,小R想在纸上画一片绵延的群山. 为了描述方便,我们将纸张表示在坐标系上,四个顶点的坐标分别为(0,0),(n,0),(0,m),(n,m). 小R有一只神奇 ...

  7. 2018—2019—2 20165239《网络对抗技术》Exp7 网络欺诈防范

    一.原理与实践说明 1.实践目标 本实践的目标是:理解常用网络欺诈背后的原理,以提高防范意识,并提出具体防范方法. 2.实践内容概述 简单应用SET工具建立冒名网站 (1分) ettercap DNS ...

  8. PHP中文无乱码截取

    正在上传文件反正无聊 就把php无乱码截取写出来吧` 参数说明 gbk    字符编码中,存储中文字符要2个字节 uft-8  字符编码中,存储中文字符要3个字节 0xa0  半个汉字 ord()—  ...

  9. Entity Framework 应用程序有以下优缺点

    优点: 1.跨数据库支持能力强大,只需修改配置就可以轻松实现数据库切换2.提升了开发效率,不需要在编写Sql脚本,但是有些特殊Sql脚本EF无法实现,需要我们自己编写(通过EF中的ExecuteSql ...

  10. 关于ios 的耳机线线控

    如题 线控主要就是指的用ios耳机的  中间那个键来自定义一些程序自己的事件(比如玩吃鸡的时候,作为开枪扳机) 而想要控制耳机的音量加减的事件, 有一种方法,就是监听 系统音量的变化,根据音量变化来触 ...