Text and picture timing switching effect code implemented by JS-JS Tutorial-php.cn

Text and picture timing switching effect code implemented by JS

PHPz

Release： 2018-09-28 17:27:30

forward

1888 people have browsed it

This article mainly introduces the text and image timing switching effect code implemented by JS, which can achieve two effects: timing switching and mouse click switching. It involves related techniques for JavaScript mouse events to control page styles. Friends in need can refer to it. The details are as follows:

This is a special effect that portals like to use recently. There is a large picture on the left and the corresponding text on the right. When the mouse moves, the text in the corresponding line will change and the picture will switch accordingly. If there is no mouse movement, it will play by itself, and the playback time can be adjusted. I personally feel that the navigation effect is quite good.

A screenshot of the running effect is as follows:

The online demo address is as follows:

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

The specific codes are as follows:

<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>
<p 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>
<p 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>
</p>
<p class="clear"></p>
</p>
<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>

Copy after login

The above is the entire content of this chapter, more related For tutorials, please visit JavaScript Video Tutorial!