信鸽网

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

  作者：bea

本文实例讲述了JS实现的文字与图片定时切换效果代码。分享给大家供大家参考。具体如下： 这是近来门户们都喜欢用的特效，左侧是一个大图片，右侧是对应文字，鼠标移动时，对应行的文字会变化，图片也相应的切换，如果没有鼠标动作时，它会自己播放，播放时间可调整，个人感觉挺不错的导航效果。 运行效果截图如下： 在线演示地址如下： http://demo./js/2015/js-txt-pic-time-cha-tab-codes/ 具体代码如下： <head><me

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


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


运行效果截图如下：



在线演示地址如下：


http://demo./js/2015/js-txt-pic-time-cha-tab-codes/


具体代码如下：




<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程序设计有所帮助。




有用  |  无用

猜你喜欢

您可能感兴趣的文章: