欢迎来到 黑吧安全网 聚焦网络安全前沿资讯,精华内容,交流技术心得!

JS文字和图片的定时切换效果代码分享

来源:本站整理 作者:佚名 时间:2015-10-26 TAG: 我要投稿

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

具体代码如下:
 http-equiv="Content-Type" content="text/html; charset=gb2312" />
文字与图片切换
*{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;}
 class="focusPic">
 id="focusLeft">
 class="current">VB在线出题考试系统
jQuery 仿iGoogle 主页模块拖动
jQuery UI 官方实例集
VB在线出题考试系统
小妖ASP投票调查系统 v4.0
jQuery 带动画的日期选择插件
 class="focusTitle">
 id="focusMenu">
 class="current"> href="#">VB在线出题考试系统
 href="#" target="_blank">jQuery 仿iGoogle 主页模块拖动
 href="#" target="_blank">jQuery UI 官方实例集
 href="#" target="_blank">VB在线出题考试系统(MSSQL)
 href="#" target="_blank">小妖ASP投票调查系统 v4.0
 href="#" target="_blank">jQuery 带动画的日期选择插件
 class="clear">
 language="javascript" type="text/javascript">
//
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);
 }

[1] [2]  下一页

【声明】:黑吧安全网(http://www.myhack58.com)登载此文出于传递更多信息之目的,并不代表本站赞同其观点和对其真实性负责,仅适于网络安全技术爱好者学习研究使用,学习中请遵循国家相关法律法规。如有问题请联系我们,联系邮箱admin@myhack58.com,我们会在最短的时间内进行处理。
  • 最新更新
    • 相关阅读
      • 本类热门
        • 最近下载