zoukankan      html  css  js  c++  java
  • JS编写背景图切换

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>背景图切换</title>
        <style type="text/css">
        #wrap{
             300px;height: 225px;
            margin: 100px auto 0px;
            position: relative;
        }
        img{
            display: block;
             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>

  • 相关阅读:
    C#实现汉字转换为拼音缩写的代码
    C# 使用xsd文件验证XML 格式是否正确
    C#用天气预报的WebServices
    c# socket通信较完善方案
    C#操作MySQL数据库-----HelloWorld
    c# 自己制作一个简单的项目倒计时器
    C# 制作外挂常用的API
    C#中如何计算时间差?
    C# 图片保存到数据库和从数据库读取图片并显示
    c#加密 可逆与不可逆MD5 加密
  • 原文地址:https://www.cnblogs.com/llz1314/p/5777567.html
Copyright © 2011-2022 走看看