`

jquery div 切换背景

 
阅读更多

<script language="JavaScript">
        var index = 0;
        var images = ["${ctx}/resources/images/dj10.jpg", "${ctx}/resources/images/delete.gif"];
      /*  $(document).ready(function () {
            $("#btn_img").click(
                    function () {
                        switch_background();
                    }
            );

        });*/
        $(function(){
            $("#btn_img").click(
                    function () {
                        switch_background();
                    }
            );
        });
        function switch_background() {
            if (index == images.length - 1) {
                index = 0;
            } else {
                index++;
            }
            document.getElementById("btn_img").style.backgroundImage = "url(" + images[index] + ")";
        }
    </script>
</head>
<body>
<div id="btn_img" style="width: 50px;height: 10px; background-image: url(${ctx}/resources/images/dj10.jpg)"></div>
</body>
</html>

分享到:
评论

相关推荐

    jQuery单击div更改背景颜色

    jQuery单击div更改背景颜色

    JavaScript_JQuery_CSS_CSS_DIV漂亮的实例123个

    4. jquery+div实现同时滑动切换的图文展示特效插件下载 5. jquery+div带动画按钮图片手动与自动切换的特效代码 6. jquery一页多用的飞飞图片幻灯插件演示 7. jquery仿flash产品图片多角度展示特效代码 8. ...

    非常漂亮的100个 jquery前端案例,包含幻灯片切换、图片缩放、相册、放大镜、图片拖着滚动等.zip

    jQuery动态切换网页背景的大块图片的导航栏代码 jquery图文排行混合互相切换效果(仿Vancl效果) jQuery图片AnimatedPortfolioGallery jQuery图片AnimatedTextIconMenu jQuery图片BubblerifficImageGallery jQuery图片...

    利用jquery实现的网页背景切换

    能实现背景渐变,效果与lofter相同,能调整切换时间和速度效果

    JavaScript_JQuery_CSS_DIV漂亮的实例

    4. jquery+div实现同时滑动切换的图文展示特效插件下载 5. jquery+div带动画按钮图片手动与自动切换的特效代码 6. jquery一页多用的飞飞图片幻灯插件演示 7. jquery仿flash产品图片多角度展示特效代码 8. jquery...

    100多个JQuery效果示例(实例)div+css+javascrpit

    4. jquery+div实现同时滑动切换的图文展示特效插件下载 5. jquery+div带动画按钮图片手动与自动切换的特效代码 6. jquery一页多用的飞飞图片幻灯插件演示 7. jquery仿flash产品图片多角度展示特效代码 8. jquery...

    JQuery&CSS;&CSS;+DIV实例大全.rar

    4.jquery+div实现同时滑动切换的图文展示特效插件下载 5.jquery+div带动画按钮图片手动与自动切换的特效代码 6.jquery一页多用的飞飞图片幻灯插件演示 7.jquery仿flash产品图片多角度展示特效代码 8.jquery...

    jquery 动态示例

    4. jquery+div实现同时滑动切换的图文展示特效插件下载 5. jquery+div带动画按钮图片手动与自动切换的特效代码 6. jquery一页多用的飞飞图片幻灯插件演示 7. jquery仿flash产品图片多角度展示特效代码 8. jquery...

    标题有打字效果jQuery焦点图.zip

    标题有打字效果jQuery焦点图是一款横向图片焦点图滚动效果,兼容主流浏览器。

    jQuery关于导航条背景切换效果实现示例

    效果如下: 代码如下: &lt;DOCTYPE&gt; &lt;... &lt;head&gt; [removed][removed] &lt;meta charset=”UTF-8″&gt; &lt;style&gt; .nav{height:40px; width: 100%;background: #E6E6E6;} .nav ul li{float: left;...

    超实用的jQuery代码段

    超实用的jQuery代码段精选近350个jQuery代码段,涵盖页面开发中绝大多数要点、技巧与方法,堪称史上最实用的jQuery代码参考书,可以视为网页设计与网站建设人员的好帮手。《超实用的jQuery代码段》的代码跨平台、跨...

    jQuery详细教程

    下面的例子把所有 p 元素的背景颜色更改为红色: 实例 $("p").css("background-color","red"); 更多的选择器实例 语法 描述 $(this) 当前 HTML 元素 $("p") 所有 &lt;p&gt; 元素 $("p.intro") 所有 class="intro" 的 &lt;p&gt; ...

    jQuery 锚点链接平滑移动切换显示代码.rar

    基于jQuery的锚链接平滑移动效果,点击一个链接,会看到一个层在平滑的移动,每点击一次更换一次背景。延伸一点来说,不知大家是否能联想到多张图片轮流切换的效果没?把每个Div层内旋转一张图片,是不是就轻易实现 ...

    【推荐】高清jquery视频教程下载

    jquery缩写 4:基本选择器1 5:基本选择器2 6:基本选择器3 7:基本选择器4 8:层次选择器1 9:层次选择器2 10:层次选择器3 11:层次选择器4 12:过滤选择器1 13:过滤选择器2 14:过滤选择器3 15:过滤选择器4 16:过滤选择器5 ...

    jQuery完全实例.rar

    设置页面背景色。 jQuery 代码: $(document.body).css( "background", "black" ); -------------------------------------------------------------------------------- 隐藏一个表单中所有元素。 jQuery ...

    jQuery爱心拉近拉远动画图片背景特效.zip

    超简单的背景动画文件,代码就一句,JoynBackground(您需要的效果,速度);只需把图片放在下边的Div中,就可按照您向要的方式展示您的图片。效果包含拉近,拉远,切换……

    jQuery爱心拉近拉远动画图片背景特效

    超简单的背景动画文件,代码就一句,JoynBackground(您需要的效果,速度);只需把图片放在下边的Div中,就可按照您向要的方式展示您的图片。效果包含拉近,拉远,切换……

    JQuery toggle使用分析

    今天重点一个toggle(fn,fn,….)函数,主要是用来切换某个事件的轮换操作。 比如:对一个按钮的点击事件和一个DIV的背景,点击一次按钮,将DIV的背景显示为蓝色,点击第二次的时候要将DIV的 背景色改为黑色。 我们定义...

    jQuery代码实现图片墙自动+手动淡入淡出切换效果

    在网页上经常可以看到有背景图片可以自动淡入淡入切换的效果,非常漂亮,实用性也非常高。今天小编抽个时间给大家分享基于jquery代码实现图片墙自动+手动淡入淡出切换效果,一起学习吧! 先给大家展示效果图,如果...

    jquery+css实现Tab栏切换的代码实例

    前几天面试碰到现场给写一个Tab栏切换的功能,思想基本上懂,但是好久没写过,一时要全部实现效果还真有点难。回来后,再把思路理一理,写一个,基础还是很重要的。 最终要实现的效果图如下: (1)点击tab栏显示...

Global site tag (gtag.js) - Google Analytics