<!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. SpingMVC ModelAndView, Model,Control以及参数传递

    1.web.xml 配置: <servlet> <servlet-name>dispatcher</servlet-name> <servlet-class& ...

  2. hashmap两种遍历方法

    第一种:使用entryset来进行遍历 Map map=new HashMap(); Iterator iter=map.entrySet().iterator(); while(iter.hasNe ...

  3. 二模12day1解题报告

    T1.笨笨与电影票(ticket) 有n个1和m个0,求每个数前1的个数都大于等于0的个数的排列数. 非常坑的一道题,推导过程很烦.首先求出所有排列数是 C(n+m,m),然后算不合法的个数. 假设存 ...

  4. Python交互式编程导论----事件驱动编程

    传统的编程是如下线性模式的: 开始--->代码块A--->代码块B--->代码块C--->代码块D--->......--->结束 每一个代码块里是完成各种各样事情 ...

  5. [python]获取文件夹下所有文件名

    #---picknames.py---import os filenames = os.listdir(os.getcwd()) for name in filenames: print(name)

  6. wc命令

    wc命令的功能为统计指定文件中的字节数.字数.行数, 并将统计结果显示输出. 语法:wc [选项] 文件- 说明:该命令统计给定文件中的字节数.字数.行数.如果没有给出文件名,则从标准输入读取.wc同 ...

  7. Macbook下virtualenv无法使用解决办法

    Mac下删除自己安装的Python 删除Python框架sudo rm -rf /Library/Frameworks/Python.framework/Versions 删除Python程序sudo ...

  8. 8、SQL Server 表分区

    什么是表分区?表分区其实就是将一个大表分成若干个小表.表分区可以从物理上将一个大表分成几个小表,但是逻辑上还是一个表.所以当执行插入.更新等操作的时候,不需要我们去判断应该插入或更新到哪个表中.只需要 ...

  9. Java的基本程序设计结构（上）

    在Java中,每一个变量属于一种类型(type).在声明变量时,变量所属的类型位于变量名之前. 例如: double salary; int vacationDays; long earthPopul ...

  10. php 判断文件/目录是否存的方法

    涉及函数 is_file(), is_dir() , file_exists() is_file() 判断文件是否存在 is_dir() 判断目录是否存在 file_exists() 既可用于判断文件 ...