当前位置: 首页 > 编程笔记 >

Jquery实现动态切换图片的方法

易英奕
2023-03-14
本文向大家介绍Jquery实现动态切换图片的方法,包括了Jquery实现动态切换图片的方法的使用技巧和注意事项,需要的朋友参考一下

本文实例讲述了Jquery实现动态切换图片的方法。分享给大家供大家参考。具体实现方法如下:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<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="jquery-1.6.2.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>

希望本文所述对大家的jQuery程序设计有所帮助。

 类似资料:
  • 本文向大家介绍js动态切换图片的方法,包括了js动态切换图片的方法的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了js动态切换图片的方法。分享给大家供大家参考。具体实现方法如下: index.css文件如下: index.html如下: 希望本文所述对大家的javascript程序设计有所帮助。

  • 本文向大家介绍jquery+css实现动感的图片切换效果,包括了jquery+css实现动感的图片切换效果的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了jquery+css实现动感的图片切换效果代码。分享给大家供大家参考。具体如下: 运行效果截图如下: 具体代码如下: 基本思路:定义一个数组存放需要展示的图片,接着当单击图片时删除zoomIn类,添加fadeOutRight类,实现实图右

  • 本文向大家介绍jQuery实现菜单式图片滑动切换,包括了jQuery实现菜单式图片滑动切换的使用技巧和注意事项,需要的朋友参考一下 jQuery菜单式图片滑动切换是一款天猫官方网站的鼠标滑过图片切换导航菜单特效。 演示图: 以上就是本文的全部内容了,希望大家能够喜欢。

  • 本文向大家介绍JQuery实现简单的图片滑动切换特效,包括了JQuery实现简单的图片滑动切换特效的使用技巧和注意事项,需要的朋友参考一下 JQuery实现简单的图片滑动切换特效 jQuery图片从下往上滚动效果是一款jquery animate方法制作的图片从下往上滚动效果。 上演示图

  • 本文向大家介绍jQuery+css实现的切换图片功能代码,包括了jQuery+css实现的切换图片功能代码的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了jQuery+css实现的切换图片功能代码。分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: 更多关于jQuery特效相关内容感兴趣的读者可查看本站专题:《jQuery常见经典特效汇总》及《jQuery动画与特效用法总

  • 本文向大家介绍Winform下实现图片切换特效的方法,包括了Winform下实现图片切换特效的方法的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了Winform下实现图片切换特效的方法,是应用程序开发中非常实用的一个功能。分享给大家供大家参考之用。具体方法如下: 本实例源自网络,功能较为齐全、丰富!主要功能代码如下: 另外还有一种调用API实现的特效: 希望本文所述实例对大家C#程序设计有