<!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. 单例设计模式全局缓存accessToken

    使用微信JS-SDK开发的小伙伴们,看文档经常会看到这样一句话:(下面是微信开发文档的一部分原话截图) 这句话就是:开发者必须在自己的服务全局缓存access_token,jsapi_ticket 下 ...

  2. mvc图片上传到服务器

    链接:http://www.lanhusoft.com/Article/406.html

  3. 用php怎么改文件名

    php手册:bool rename ( string oldname, string newname [, resource context] )尝试把 oldname 重命名为 newname. 如 ...

  4. PHP操作MongoDB学习笔记

    <?php/*** PHP操作MongoDB学习笔记*///*************************//**   连接MongoDB数据库  **////*************** ...

  5. js错误：TypeError $(...) is null

    转载自:http://www.phpernote.com/jquery/851.html:

  6. 时间服务器：NTP 服务器

    15.1 关于时区与网络校时的通讯协议   使得每一部主机的时间同步化.   DHCP 客户端/服务器端所需要的租约时间限制. 网络侦测时所需要注意的时间点.刚刚谈到的登录文件分析功能.具有相关性的主 ...

  7. 关于 Dev中的GridControl 中 GridView 的 PopulateColumns() 方法

    最近使用Dev控件,Gridview绑定数据源后不能显示数据,于是在网上查询,说是使用PopulateColumns()方法,可以显示数据.试了一下,管用. 于是在所有更新数据源数据后,都用上了这句话 ...

  8. 安装Eclipse及相关Plugin

    Eclipse: 此处选用基于Eclipse的开发工具:STS 官方网站:https://spring.io/tools/sts Plugins: Open Explorer文件浏览插件it open ...

  9. PHP抓取及分析网页的方法详解

    本文实例讲述了PHP抓取及分析网页的方法.分享给大家供大家参考,具体如下: 抓取和分析一个文件是非常简单的事.这个教程将通过一个例子带领你一步一步地去实现它.让我们开始吧! 首先,我首必须决定我们将抓 ...

  10. 通用Hibernate DAO类(包括分页)

    package com.jronline.dao; import java.sql.ResultSet; import java.sql.SQLException; import java.sql.S ...