<!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. php命名空间和autoload

    参考: 1.http://www.cnblogs.com/thinksasa/p/3423480.html  PHP的命名空间 2.http://blog.jjonline.cn/phptech/15 ...

  2. tcp协议头窗口，滑动窗口，流控制，拥塞控制关系

    参考文章 TCP 的那些事儿(下) http://coolshell.cn/articles/11609.html tcp/ip详解--拥塞控制 & 慢启动 快恢复 拥塞避免 http://b ...

  3. ajax和json对象

    二维数组 首先是输出json字符串的php文件 header("Content-type: text/html; charset=utf-8"); //json设置utf-8 $a ...

  4. 巧用vsprintf将浮点数等转化字符串

    直接上代码 #include <stdarg.h> ]; int vspf(char *fmt, ...) { va_list argptr; int cnt; va_start(argp ...

  5. Get Intensity along a line based on OpenCV

    The interpolate function is used to get intensity of a point which is not on exactly a pixel. The co ...

  6. My97DatePicker 日期控制，开始时间不能>结束时间，结束时间不能<开始时间

    <li>日期: <input type="text" style="margin-top: 5px;" value="${begin ...

  7. [MAC]2015款MACBOOK使用BOOTCAMP安装WIN8.1+多分区

    注意事项: 2013年以前,带光驱的,请使用WinClone安装WIN7或WIN8,或可使用BOOTCAMP制作WINDOWS安装光盘 13-14年,不带光驱的,也能使用WinClone安装WIN7和 ...

  8. 简单的VC++ ADO帮助类

    首先看头文件 #pragma once #import "c:\Program Files\Common Files\System\ado\msado15.dll" no_name ...

  9. {Latex}{Tabular}文本超出表格自动换行

    用p或者m可以控制每列的宽度(需载入array宏包). 要整个表格相对于页面居中,用chngpage宏包的adjustwidth,如下: \documentclass[oneside]{article ...

  10. javascript冒泡算法

    var arr = [10, 10, 3, 2, 5 , 4, 8, 3]; function reSort(arr) { var temp = 0; var len = arr.length; fo ...