<!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. Qt 环境下MAPX组件的编程

    使用mapx打包文件可以方便的迅速开发,今天介绍一种不使用打包文件,直接使用mapx组件的编程方法. 就像之前介绍flash控件编程的方法,首先建立一个qt demo.基于那个的窗口都可以. 本den ...

  2. python 面试必读

    总结了10道题的考试侧重点,供参考: 1.How are arguments passed – by reference of by value? 考的是语法,基本功,虽说python程序员可以不用关 ...

  3. AndroidStudio中activity实现去掉标题栏

    1.在代码中实现 this.requestWindowFeature(Window.FEATURE_NO_TITLE) 这段代码需要放在setContentView()前面 2.设置在Manifest ...

  4. centos 7 挂载大硬盘

    对硬盘sdb进行分区 parted -a optimal /dev/sdb 使用GPT格式 mklabel gpt 建立一个主分区 mkpart primary - 显示分区信息 print 退出 q ...

  5. 解决NetBeans编辑器中文乱码问题

    在JDK→JRE→lib目录下找到fontconfig.properties.src文件,打开,找到# Component Font Mappings,表示字体映射,可以看到下面列出了几种字体映射集合 ...

  6. js工厂方式和构造函数

    工厂方式 //工厂方式 : 封装函数 function createPerson(name){ //1.原料 var obj = new Object(); //2.加工 obj.name = nam ...

  7. 转 Jmeter之Bean shell使用(二)

    上一篇Jmeter之Bean shell使用(一)简单介绍了下Jmeter中的Bean shell,本文是对上文的一个补充,主要总结下常用的几种场景和方法,相信这些基本可以涵盖大部分的需求.本节内容如 ...

  8. Build OpenCV text(OCR) module on windows

    Background. AOI software needs to use the OCR feature to recognize the texts on the chips. Because o ...

  9. hbase hmaster故障分析及解决方案：Timedout 300000ms waiting for namespace table to be assigned

    最近生产环境hbase集群出现停掉集群之后hmaster无法启动现象,master日志报异常:Timedout 300000ms waiting for namespace table to be a ...

  10. Spark+Hadoop问题小结

    1.spark执行./start-all.sh报"WARN Utils: Service 'sparkWorker' could not bind on port 0. Attempting ...