JS选项卡动态替换banner图片路径的方法

本文实例讲述了JS选项卡动态替换banner图片路径的方法。分享给大家供大家参考。具体分析如下：

这里演示一个选项卡演示如何动态替换图片的方法，用一个JS函数实现的定义鼠标滑过替换图片的路径。

参数说明如下：

obj 当前触发事件的对象
hc 当前选中元素的类名
content 选择需要替换路径的图片
url 为图片的路径

代码如下：

<!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>选项卡动态替换banner图片路径</title>
<script src="js/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
 hoverFn($("ul li"),"hover_css",$("p img"),"big");//调用函数
 /*
  定义鼠标滑过替换图片路径的
 函数 2012.8.24
  作者 zoowar
  参数说明
  obj 当前触发事件的对象
  hc 当前选中元素的类名
  content 选择需要替换路径的图片
  url 为图片的路径
 */
 function hoverFn(obj,hc,content,url){
 obj.hover(function(){
  var h_css=hc;
  $(this).addClass(h_css).siblings().removeClass(h_css);
  var imgUrl=$(this).attr(url);
  content.attr("src",imgUrl);
  });
 }
})
</script>
<style type="text/css">
div{
width:1024px;height:768px;margin:0 auto;
}
ul{
width:1024px;height:40px;margin:0;padding:0;
}
ul li{
width:254px;line-height:40px;
border-bottom:solid 2px #FB066F;text-align:center;
list-style-type:none;float:left;margin-right:2px;
background:#fff;
}
ul li.hover_css{
border-bottom:solid 2px #06F;background:#f0f0f0;
}
p{
margin:0;padding:0;text-align:center;padding-top:20px;
}
</style>
</head>
<body>
<div>
<ul>
<li class="hover_css" big="images/wall_s1.jpg">风景</li>
<li big="images/wall_s2.jpg">美女</li>
<li big="images/wall_s3.jpg">帅锅</li>
<li big="images/wall_s4.jpg">恶搞</li>
</ul>
<p>
<img src="images/wall_s1.jpg" />
</p>
</div>
</body>
</html>

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

赞 (0)

相关推荐

  • 原生javascript移动端滑动banner效果

    本文实例为大家分享了移动端滑动banner效果的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,

  • javascript 上下banner替换具体实现

    复制代码 代码如下: <!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="

  • js实现三张图（文）片一起切换的banner焦点图

    js实现三张图（文）片一起切换的banner焦点图

    本文实例讲述了js实现三张图(文)片一起切换的banner焦点图.分享给大家供大家参考.具体如下: 这是一款基于javascript实现的三张图(文)片一起切换的banner焦点图,带有左右箭头,同一个焦点图,三个位置的图片可以同时实现切换,图片中间可以穿插文字说明. 运行效果图:-------------------查看效果 下载源码------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的js实现三张图(文)片一起切换的banner焦点图代

  • JS实现带关闭功能的阿里妈妈网站顶部滑出banner工具条代码

    JS实现带关闭功能的阿里妈妈网站顶部滑出banner工具条代码

    本文实例讲述了JS实现带关闭功能的阿里妈妈网站顶部滑出banner工具条代码.分享给大家供大家参考.具体如下: 这是一款阿里妈妈网站顶部banner代码,采用滑出的方式,一个经典的工具条代码,可以当作菜单来用,同时还有完善的功能,可以适时关闭工具条,整体效果设计美观,简洁漂亮. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-top-float-banner-alimama-style-codes/ 具体代码如下: <!DOCTYPE ht

  • JS 实现banner图片轮播效果(鼠标事件)

    JS 实现banner图片轮播效果(鼠标事件)

    一.要实现的效果 1.点击左右可切换图片 2.点击小圆点 可切换图片 二.效果图 三.代码 1.css <style type="text/css"> body,img,span,ul,li{margin: 0;padding: 0;} #div1{width: 600px;height: 350px;margin: 150px auto;border: 10px solid #eee;position: relative;} img{width: 600px;height

  • JS选项卡动态替换banner图片路径的方法

    本文实例讲述了JS选项卡动态替换banner图片路径的方法.分享给大家供大家参考.具体分析如下: 这里演示一个选项卡演示如何动态替换图片的方法,用一个JS函数实现的定义鼠标滑过替换图片的路径. 参数说明如下: obj 当前触发事件的对象 hc 当前选中元素的类名 content 选择需要替换路径的图片 url 为图片的路径 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http

  • 动态加载图片路径 保持JavaScript控件的相对独立性

    动态加载图片路径 保持JavaScript控件的相对独立性

    当时考虑有三种方法: 1.直接把路径写在js文件里,但如果引用页面路径层级改变就没辙了. 2.写个class,放在主题包里的css文件或者单独创建一个css文件给日期控件专用.但是控件中的其他元素并没有使用class的需要,单独建立相应css文档似乎小题大做. 3.把以上两个方法排除后,自然要采用动态加载图片路径的方法咯. 关键代码如下: 复制代码 代码如下: //创建一个全局变量保存路径 var imgRootUrl = ""; //获取图片路径所在目录 var strPath=wi

  • vue中如何动态绑定图片,vue中通过data返回图片路径的方法

    vue中如何动态绑定图片,vue中通过data返回图片路径的方法

    在项目中遇到需要动态加载图片路径,图片路径并非是从后台获取过来的数据. 因此在data中必须用require加载,否则会当成字符串来处理. HTML如下: JS如下: 以上这篇vue中如何动态绑定图片,vue中通过data返回图片路径的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们. 您可能感兴趣的文章: Vue.js中的图片引用路径的方式 基于vue 动态加载图片src的解决方法 vue cli使用绝对路径引用图片问题的解决

  • 原生JS实现动态添加新元素、删除元素方法

    1. 添加新元素 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>动态添加新元素</title> </head> <body> <ul class="example"> <li class="child">Coffee</li> <li c

  • JS实现添加,替换,删除节点元素的方法

    本文实例讲述了JS实现添加,替换,删除节点元素的方法.分享给大家供大家参考,具体如下: 一直以来,对于节点操作比较纠结,特别是插入到某某节点之后.居然没有这个方法,以前的我写的方法有问题,是把新节点插入到旧节点的里面去了,还是该用insertBefore方法可以实现 下面是方法: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose

  • JS中动态创建元素的三种方法总结(推荐)

    JS中动态创建元素的三种方法总结(推荐)

    1.动态创建元素一 document.write() 例如向页面中输出一个 li 标签 <pre class="html" name="code"><span style="font-size:12px;"><script> document.write("<li>123</li>"); </script></span> body标签中就会插入

  • JS实现动态生成html table表格的方法分析

    本文实例讲述了JS实现动态生成html table表格的方法.分享给大家供大家参考,具体如下: 刚在论坛上面逛的时候看到有人问html表格怎么动态生成,我回了一下发现有好多小伙伴追问- - 看来还是有很多人不会的啊,于是决定写个博来解救万千小伙伴于水火之中(mdzz) 首先我们要在html里面有如下代码: <table> <tbody id="tbody1"> </tbody> </table> 如果想在table里面加其他的可以随便加(

  • FCKeditor编辑器添加图片上传功能及图片路径问题解决方法

    FCKeditor编辑器添加图片上传功能及图片路径问题解决方法

    现在很多CMS系统因为安全原因会把后台编辑器里的上传功能给去除,但这样一来对实际使用过程造成了很多麻烦,今天我们以ASPCMS系统的FCKeditor编辑器为例,说明一下如何增加图片上传功能. 1． 打开网站后台编辑器里的admin/editor/fckconfig.js这个文件 找到FCKConfig.ImageUpload = false 这句,把false改成true就行啦. FCKConfig.ImageBrowser = false ; 这里也同样把false改成true 2． 看一下

  • 使用JS来动态操作css的几种方法

    使用JS来动态操作css的几种方法

    JavaScript 可以说是交互之王,它作为脚本语言加上许多 Web Api 进一步扩展了它的特性集,更加丰富界面交互的可操作性.这类 API 的例子包括WebGL API.Canvas API.DOM API,还有一组不太为人所知的 CSS API. 由于JSX和无数JS框架的出现,使通过JS API与DOM交互的想法真正流行起来,但是在 CSS 中使用类似技术似乎并没有很多. 当然,存在像CSS-in-JS这类解决方案,但是最流行的解决方案还是基于转译(transpilation),无需额

  • 基于vue 动态加载图片src的解决方法

    基于vue 动态加载图片src的解决方法

    好久没更博了,最近也不知道在忙啥,反正就是感觉挺忙的,在群里看到陆陆续续有刚入vue小伙伴问vue动态加载图片总是404的状况,这篇就简单的说明为什么会出现以及解决办法有哪些. 首先先说明下vue-cli的assets和static的两个文件的区别,因为这对你理解后面的解决办法会有所帮助 assets:在项目编译的过程中会被webpack处理解析为模块依赖,只支持相对路径的形式,如< img src="./logo.png">和background:url(./logo.p

随机推荐