CSS文字切换,JS实现的文字与图片定时切换效果代码

文本定时变动代码,如需引入外部Js需刷新才能执行,本文实例讲述了JS实现的文字与图片定时切换效果代码,对应行的文字会变化

你可以把它看作像写一般的CSS列表一样,只用增加两三行代码就能完成切换效果。

CSS文字切换,JS实现的文字与图片定时切换效果代码。CSS文字切换,JS实现的文字与图片定时切换效果代码。本文实例讲述了JS实现的文字与图片定时切换效果代码。分享给大家供大家参考。具体如下:

文本定时变动代码

CSS文字切换,JS实现的文字与图片定时切换效果代码。这是近来门户们都喜欢用的特效,左侧是一个大图片,右侧是对应文字,鼠标移动时,对应行的文字会变化,图片也相应的切换,如果没有鼠标动作时,它会自己播放,播放时间可调整,个人感觉挺不错的导航效果。

  • 百度,世界最大的中文搜索引擎
  • CSS文字切换,JS实现的文字与图片定时切换效果代码。CSDN,中国最聚人气的IT技术社区
  • CSS文字切换,JS实现的文字与图片定时切换效果代码。CSS文字切换,JS实现的文字与图片定时切换效果代码。脚本之家
  • CSS文字切换,JS实现的文字与图片定时切换效果代码。播放器

运行效果截图如下:

[CSS文字切换,JS实现的文字与图片定时切换效果代码。Ctrl+A 全选
注:如需引入外部Js需刷新才能执行]

图片 1

CSS文字切换,JS实现的文字与图片定时切换效果代码。您可能感兴趣的文章:

  • js+div实现文字滚动和图片切换效果代码
  • js实现图片和链接文字同步切换特效的方法
  • JS实现自动切换文字的导航效果代码
  • JS溶解形式的文字切换特效
  • js支持键盘控制的左右切换立体式图片轮播效果代码分享
  • js实现使用鼠标拖拽切换图片的方法
  • JS实现FLASH幻灯片图片切换效果的方法
  • JS+CSS实现自动改变切换方向图片幻灯切换效果的方法
  • js实现同一页面可多次调用的图片幻灯切换效果
  • JS实现的文字与图片定时切换效果代码

在线演示地址如下:

具体代码如下:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>文字与图片切换</title>
<style>
*{margin:0;padding:0;border:0;list-style:none}
.focusPic{width:500px; margin:0 auto; clear:both; text-align:center; border:1px solid #ccc;}
.focusPic .focusTitle{width:240px;float:right; font-size:14px; text-align:left;}
.focusPic .focusTitle li{height:28px; line-height:28px; cursor:pointer; font-size:12px; padding-left:10px; }
.focusPic .focusTitle li a ,.focusPic .focusTitle li a:visited { color:#000;}
.focusPic .focusTitle li a:hover {color:#bc2931;}
.focusPic .focusTitle .current a ,.focusPic .focusTitle .current a:visited { color:#bc2931;}
.focusPic .focusTitle .current a:hover {color:#bc2931;}
.focusPic #focusMenu li.current{background:#efefef;font-weight:bold;color:#bc2931;}
.focusPic #focusLeft{width:250px;overflow:hidden; float:left;background:#efefef;font-size:14px;line-height:100px;font-weight:bold;height:168px;}
.focusPic #focusLeft li{display:none;}
.focusPic #focusLeft li.current{display:block;}
</style>
</head>
<body>
<div class="focusPic">
<ul id="focusLeft">
<li class="current">VB在线出题考试系统</li>
<li>jQuery 仿iGoogle 主页模块拖动</li>
<li>jQuery UI 官方实例集</li>
<li>VB在线出题考试系统</li>
<li>小妖ASP投票调查系统 v4.0</li>
<li>jQuery 带动画的日期选择插件</li>
</ul>
<div class="focusTitle">
<ul id="focusMenu">
<li class="current"><a href="#">VB在线出题考试系统</a></li>
<li><a href="#" target="_blank">jQuery 仿iGoogle 主页模块拖动</a></li>
<li><a href="#" target="_blank">jQuery UI 官方实例集</a></li>
<li><a href="#" target="_blank">VB在线出题考试系统(MSSQL)</a></li>
<li><a href="#" target="_blank">小妖ASP投票调查系统 v4.0</a></li>
<li><a href="#" target="_blank">jQuery 带动画的日期选择插件</a></li>
</ul>
</div>
<div class="clear"></div>
</div>
<script language="javascript" type="text/javascript">
//<![CDATA[
var $ = function(id) {
 return document.getElementById(id);
};
Function.prototype.bind = function() {
 if (arguments.length < 2 && arguments[0] == null) {
  return this;
 }
 var __method = this, args = $A(arguments), object = args.shift();
 return function() {
  return __method.apply(object, args.concat($A(arguments)));
 };
};
var isArray = function(testVar) {
 return Array == testVar.constructor ? 1 : String != testVar.constructor && null != testVar.length && !testVar.alert && !testVar.nodeType ? 2 : 0;
};
var $A = function(variable) {
 switch (isArray(variable)) {
  case 1:
   return variable;
  case 2:
   var arr = [], i = -1, len = variable.length;
   while (++i < len) {
    arr[i] = variable[i];
   }
   return arr;
  default:
   return [variable];
 }
};
var addClass = function(elem, className) {
 if ((" " + elem.className + " ").indexOf(" " + className + " ") == -1) {
  if (elem.className == "") {
   elem.className = className;
  } else {
   elem.className += (" " + className);
  }
 }
};
var removeClass = function(elem, className) {
 var newClass = (" " + elem.className + " ").replace(" " + className + " ", " ");
 elem.className = newClass.substr(1, newClass.length - 2);
};
var addEvent = function(elem, eventName, handler) {
 if (elem.addEventListener) {
  elem.addEventListener(eventName, handler, false);
 } else if (elem.attachEvent) {
  elem.attachEvent("on" + eventName, handler);
 }
};
function Slide(menus, contents, css, eventName, interval) {
 var curSeq = 0, length = contents.length, timerIds = [], isStopped;
 if (menus && length != menus.length) {
  throw new Error("the amount of menus and contents is not equal");
 }
 var hide = function(seq) {
  removeClass(contents[seq], css);
  if (menus) {
   removeClass(menus[seq], css);
  }
 };
 var show = function(seq) {
  addClass(contents[seq], css);
  if (menus) {
   addClass(menus[seq], css);
  }
  curSeq = seq;
 };
 this.showNext = function() {
  var next = curSeq + 1;
  if (next >= length) {
   next = 0;
  }
  var i = length;
  while (--i >= 0) {
   if (i != next) {
    hide(i);
   } else {
    show(i);
   }
  }
 };
 this.change = function(event) {
  if (this != menus[curSeq]) {
   var i = length;
   while (--i >= 0) {
    if (menus[i] != this) {
     hide(i);
    } else {
     show(i);
    }
   }
  }
  e = window.event || event;
  e.cancelBubble = true;
 };
 this.play = function(speed) {
  isStopped = false;
  timerIds.push(setInterval(this.showNext.bind(this), speed));
 };
 this.pause = function() {
  isStopped = true;
  var i = length;
  while (--i >= 0) {
   clearInterval(timerIds[i]);
   timerIds.splice(i, 1);
  }
 };
 var i = length;
 while (--i >= 0) {
  addEvent(menus[i], eventName, this.change.bind(menus[i]));
  if (interval > 0) {
   addEvent(menus[i], "mouseover", this.pause);
   addEvent(menus[i], "mouseout", this.play.bind(this, interval));
  }
 }
 if (interval > 0) {
  this.play(interval);
 }
}
var focusImg = new Slide($("focusMenu").getElementsByTagName("li"), $("focusLeft").getElementsByTagName("li"), "current", "mouseover", 3000);
//]]>
</script>
</body>

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

您可能感兴趣的文章:

  • JavaScript实现定时隐藏与显示图片的方法
  • js换图片效果可进行定时操作
  • javascript定时变换图片实例代码
  • 最简单的js图片切换效果实现代码
  • 用html+css+js实现的一个简单的图片切换特效
  • 纯js无flash仿搜狐女人频道FLASH图片切换效果代码
  • js实现支持手机滑动切换的轮播图片效果实例
  • js实现网页随机切换背景图片的方法
  • JavaScript
    图片切换展示效果alibaba拓展版
  • 非常漂亮的JS+CSS图片幻灯切换特效
  • js动态切换图片的方法
  • jQuery图片切换插件jquery.cycle.js使用示例
  • JS图片定时翻滚效果实现方法