<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>背景图切换</title>
    <style type="text/css">
    #wrap{
        width: 300px;height: 225px;
        margin: 100px auto 0px;
        position: relative;
    }
    img{
        display: block;
        width: 300px;
        height: 100%;
    }
    span{
        font-size: 30px;
    }
    #last{
        position: absolute;
        right: 40px;bottom: 5px;
    }
    #next{
        position: absolute;
        right: 5px;bottom: 5px;
    }
    </style>
</head>
<body>
    <div id="wrap">
        <img src="img/4.jpg">
        <span id="last"><</span>        
        <span id="next">></span>
    </div>
    <script type="text/javascript">
    //获取元素
    var img = document.getElementsByTagName('img')[0];
    var btn1 = document.getElementById('last');
    var btn2 = document.getElementById('next');
    //图片数组
    var images = ['img/4.jpg','img/5.jpeg','img/6.jpg','img/9.jpg'];
    //添加事件
    //定义变量用来记录当前下标
    var index= 0;
    btn1.onclick = function (){
        index++;
        if (index > 3) {
            index = 0;
        }
        //修改图片路径
        img.src = images[index];
    }
    btn2.onclick = function (){
        index--;
        if (index < 0) {
            index = 3;
        }
        //修改图片路径
        img.src = images[index];
    }

</script>
</body>
</html>

JS编写背景图切换的更多相关文章

  1. JS实现背景图按时切换或者每次更新

    首先要有一个添加背景图片的div <div  id="myDiv"></div> css样式中添加背景tu图 body{height:100%;} #myD ...

  2. hammer.js实现背景图手势缩放调整位置

    <!DOCTYPE html> <html> <head> <script> function getxy(e){ var a=new Array() ...

  3. JS——百度背景图

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. 利用css3的多背景图属性实现幻灯片切换效果

    css3里关于背景的属性增加了可以添加多背景图的特性,例如: .box{background: url(img/1.png),url(img/2.png),url(img/3.png);} 这段css ...

  5. 整理今天js留下的作业（点击换图片换首页背景图）

    <div class="buttons"> <button id="katong">卡通</button>    <b ...

  6. texturepacker打包图片，场景切换时背景图有黑边

    在使用TexturePacker打包图片之后,背景图在场景切换(有切换动画)时,明显能看到有黑边,在百度之后解决了. 知乎上边有网友贴出了两种解决方法,我抄过来如下: 第一种: 修改 ccConfig ...

  7. 分享一个快速设置背景的js 自动获取背景图的长宽

    我来分享一个快速设置背景的js (需要jq支持!) 快速切图铺页面用---就是不需要手动输入背景图的长宽 自动获取背景图的长宽 : <div class="wrap"> ...

  8. 一款jQuery特效编写的大度宽屏焦点图切换特效

    一款jQuery编写的大度宽屏焦点图切换特效 焦点图显示区域有固定的宽度,当前显示宽度之外是一个半透明层显示的其它的焦点图片, 最好的是,此特效兼容IE6以及其它浏览器. 适用浏览器:IE6.IE7. ...

  9. js 动态生成背景图 GeoPattern

    以前有个想法,能不能用JS动态创建CANVAS绘制图案当网页背景,在网络发现有现成的别人已经实现的:GeoPattern 代码如下: <!DOCTYPE html> <html> ...

随机推荐

  1. 浅谈数位DP

    在了解数位dp之前,先来看一个问题: 例1.求a~b中不包含49的数的个数. 0 < a.b < 2*10^9 注意到n的数据范围非常大,暴力求解是不可能的,考虑dp,如果直接记录下数字, ...

  2. C#中操作Word（1）—— word对象模型介绍

    一.开发环境布置 C#中添加对Word的支持,只需添加对Microsoft.Office.Interop.Word的命名空间,如下图所示,右键点击“引用”,在弹出的“添加引用”对话框中选中COM标签页 ...

  3. （转）TortoiseGit(乌龟git)保存用户名密码的方法

    返回博客列表 转 TortoiseGit(乌龟git)保存用户名密码的方法 元谷 发布时间: 2014/05/03 23:07 阅读: 20529 收藏: 21 点赞: 12 评论: 3 window ...

  4. flex-布局，轻松制作移动端网页

    Flex 布局教程 网页布局(layout)是CSS的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不 ...

  5. js原型基础

    js中的原型链是实现继承等面向对象的一种方式,而我这里不详细展开,仅仅是画了一张原型部分结构图,主要说明: 1._proto_和prototype之间的关系 2.原型链的起点是Object.proto ...

  6. Caused by: java.lang.NoSuchMethodError: javax.persistence.spi.PersistenceUnitInfo.getValidationMode

    进行 spring mvc jpa整合时.Junit方法测试时. 异常: org.springframework.beans.factory.BeanCreationException: Error ...

  7. powerdesigner逆向工程，从数据库导出PDM

    本文工具: powerdesigner 15, 数据源oracle 11g 第一步如图,新建一个模型 第二步:选中当前模型 testdb.  然后在菜单栏database->update mod ...

  8. CSV文件的规范

    CSV文件,全程Comma-separated values,就是逗号分隔的数据文件.常用于数据集成的数据交换部分标准部分. 最近看到一个项目组在讨论接口文件CSV的规范,真是替他们着急.讨论点: 文 ...

  9. 运行R 报错R cannot R_TempDir， 继而发现/dev/mapper/VG00-LV01 磁盘空间已满

    今天在运行R脚本的时候报了个错:Fatal error: cannot create 'R_TempDir'.排除了是自己写的代码的问题,想着应该是某个没见过的原因,google之,发现网上的说法是/ ...

  10. android 下载文件，file的读写应用

    先看代码: public class MainActivity extends AppCompatActivity { String TAG = MainActivity.class.getCanon ...