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

222 阅读 0 评论 147 点赞

我是靠谱客的博主称心爆米花，这篇文章主要介绍JS实现的文字与图片定时切换效果代码，现在分享给大家，希望可以做个参考。

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

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

运行效果截图如下：

在线演示地址如下：

http://demo.uoften.com/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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
<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>