Jquery 动态切换图片

最新推荐文章于 2022-05-08 11:09:14 发布
最新推荐文章于 2022-05-08 11:09:14 发布
阅读量2.3k 收藏
点赞数
分类专栏： Jquery_基础
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/limlimlim/article/details/9211041
版权
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        #tbl{border-collapse:collapse;border-top:1px solid red;border-left:1px solid red;margin:auto;}            
        #tbl td{border-collapse:collapse;border-bottom:1px solid red;border-right:1px solid red;} 
        #main{margin:0px auto;border:1px solid yellow;}
    </style>    
    <script src="../js/jquery-1.5.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        var $imgs;
        var $tds;
        $(function () {
            $tds = $("#tbl td");
            $tds.click(function () {
                //说明:
                //$("img", $(this))表示当前td下的img元素
                //$("img", $(this).siblings("td"))  表示当前td的所有兄弟元素(并且要求是td)下的img元素
                $("img", $(this)).attr("src", "../images/select.JPG");
                $("img", $(this).siblings("td")).attr("src", "../images/noselect.JPG");
            });
        }
        );
    </script>
</head>
<body>
    <div id="main">
        <table id="tbl">
            <tbody>
                <tr>
                    <td><img src="../images/noselect.JPG" /></td>
                    <td><img src="../images/noselect.JPG" /></td>
                    <td><img src="../images/noselect.JPG" /></td>
                    <td><img src="../images/noselect.JPG" /></td>
                    <td><img src="../images/noselect.JPG" /></td>
                </tr>
            </tbody>
        </table>
    </div>    
</body>
</html>
永远爱好写程序
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jquery动态更换图片
sir_hanhanhan的博客
10-07 1449
对于html和jquery中动态更换图片以及同时更换图片颜色 在js文件中： $(function() { $(".color_change>ul>li>img").click(function() { var a = $(this).attr("src"); //找到文字 获取 后续根据颜色切换 var color = $(this).attr("alt"); /*alert(color);*/ //split 分割字符串
Jquery实现动态切换图片的方法
10-24
主要介绍了Jquery实现动态切换图片的方法,涉及jQuery页面元素操作及链式操作的相关技巧,需要的朋友可以参考下
HTML中动态图片切换JQuery实现
javababy1
11-14 308
相信很多同学都注意到了，各大新闻或者娱乐网站都含有动态图片切换，那个漂亮的感觉让刚刚学习html的人，都非常好奇和心动。那下面就让我们看一下到底如何实现动态图片切换呢？看一下百度贴吧的效果图吧~ // JavaScript Document var t = count = n = 0; $(function(){ $(".big_img a:not(:first)").hide...
用jQuery实现切换动态图片
weixin_30762087的博客
08-20 213
1、实现动态图片的切换只需要改变目标图片的路径 转载于:https://www.cnblogs.com/remain/p/9506764.html
JQuery实现图片的动态切换
ZXLS-ZMR的专栏
06-05 827
好久没写博客了，一直搞web前端。在搞项目的时候使用了大量的JQuery。现在购物网站，使用JQuery来显示图片的轮换很常见。这个经常用来推销广告。 这个实现很简单。主要是把css调好，用JQuery中animate来是实现自定义动画就可以了。以下代码仅供参考。 注意：需要下载JQuery.js导入到项目中。 *,body{ margin: 0px;
jquery动态切换背景图片的简单实现方法
10-22
主要介绍了jquery动态切换背景图片的简单实现方法,涉及jQuery自定义函数结合时间函数动态变换背景图片的相关技巧,需要的朋友可以参考下
Jquery 点击切换图片
08-09
在“Jquery 点击切换图片”这个示例中，我们主要探讨如何使用 jQuery 来实现在用户点击按钮时动态更换图片。这个Demo非常适合初学者学习，因为它展示了jQuery基础功能的实际应用。 首先，我们需要在HTML中设置好...
jQuery图片切换效果特效代码
03-20
以上代码实现了自动和手动切换图片的功能。`%`运算符确保了索引始终在图片数组的范围内。 在实际项目中，CSS文件（如`css/style.css`）用于定义样式，如图片容器的尺寸、位置、过渡效果等。JavaScript文件（如`js/...
jquery图片切换实例分析
10-24
jQuery图片切换通常用于创建动态且吸引人的用户界面，如轮播图或幻灯片展示。在提供的实例中，我们看到一个简单的图片切换功能，通过点击或自动定时切换显示多张图片。以下是对实例代码的解析： 1. **HTML结构**： ...
jQuery实现图片切换
11-19
jQuery实现图片切换
jquery实现图片自动切换
11-12
这是用jquery实现的图片自动切换效果，包括用鼠标划过时图片切换，自动切换等效果的实现。
JQuery多张图片切换
03-24
这是一个用JQuery做的一组图片同时滑动的简单程序。（注：里面的copy.js与js.js的内容一样，请无视。只作为备份。）
jquery多张叠加图片上下切换代码
04-07
jquery多张叠加图片上下切换代码，点击上一张或者下一张按钮可以切换显示叠在一起的图片。
简单的jquery四张图片轮播滚动切换效果代码
11-17
简单的jquery四张图片轮播滚动切换效果代码
jQuery1.3源码
php|nginx|python|vue|redis|linux
02-16 1445
/*! * jQuery JavaScript Library v1.3 * http://jquery.com/ * * Copyright (c) 2009 John Resig * Dual licensed under the MIT and GPL licenses. * http://docs.jquery.com/License * * Date: 2009-01-13 12:50:
【原创】jquery实现动态多组图片切换
weixin_30576827的博客
10-09 183
直接上jquery代码： <body> <div id="pics0"> <img src="upload_files/Img320833552.jpg" /> <img src="upload_files/Img320833554.jpg" /> <img src="upload_file...
jQuery进行图片切换
weixin_44886806的博客
05-08 4008
图片切换用JavaScript来写的话代码稍微有点多，如果用jQuery的话就简单的多了。 首先先写好HTML和css的代码： HTML： <div id="box"> <img src="../0bed5d59f12720752019fc2b8ad48993.jpg" alt=""> <img src="../1c34660a6917f03b1249f8a1923d36ef.jpg" alt=""> <img src="../83f4b8d
JQUERY实现图片切换
fangzh110的专栏
01-12 3904
<br /><!--<br /> Create By Lyc-2010-06-07<br /> text()方法是取得所有匹配元素的内容<br /> 图片切换<br /> filter()则是筛选div的class为play_list的元素,是对自身集合元素筛选。<br /> fadeOut(speed,[Callback])通过不透明的变化来实现所有匹配的淡出效果:<br /> fadeIn(speed,[Callback])通过不透明的变化来实现所有匹配的淡入效果<br /> hover(over,ou
jquery动态切换图片地址
最新发布
05-13
你可以通过 jQuery 的 `attr()` 方法来动态切换图片地址。 例如，你有一个图片标签，它的 id 是 `myImage`，初始的图片地址是 `image1.jpg`： ```html ``` 你可以通过以下代码来切换图片地址： ```javascript $...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值