JS实现的文字与图片定时切换效果代码
更新时间：2015年10月06日 11:04:03 作者：企鹅
这篇文章主要介绍了JS实现的文字与图片定时切换效果代码,可实现定时切换及鼠标点击切换两种效果,涉及JavaScript鼠标事件控制页面样式的相关技巧,需要的朋友可以参考下
本文实例讲述了JS实现的文字与图片定时切换效果代码。分享给大家供大家参考。具体如下：
这是近来门户们都喜欢用的特效，左侧是一个大图片，右侧是对应文字，鼠标移动时，对应行的文字会变化，图片也相应的切换，如果没有鼠标动作时，它会自己播放，播放时间可调整，个人感觉挺不错的导航效果。
运行效果截图如下：
在线演示地址如下：
http://demo.jb51.net/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程序设计有所帮助。
相关文章
JavaScript中的finally()方法和Filter()方法详解
finally是 JavaScript 构造中使用的方法try-catch,Filter() 是 JavaScript 中的一种方法,可以通过处理数组轻松提供过滤后的输出数据,本文就给大家详细的介绍一下JavaScript中的finally()方法和Filter()方法,需要的朋友可以参考下2023-08-08
in.js 一个轻量级的JavaScript颗粒化模块加载和依赖关系管理解决方案
近一年来，国内外都十分热衷于异步加载的研究，为了加快页面的载入速度，无阻塞加载Javascript的方法和框架成为了前端开发的焦点和亮点之一。2011-07-07
这篇文章主要为大家详细介绍了原生JS实现轮播图效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-10-10
众所周知，在webpack中使用模块热替换(HMR)，能够使得应用在运行时，本文就介绍一下如何实现HMR，感兴趣的可以了解一下2021-07-07
这篇文章主要介绍了js异或运算符^小技巧，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-04-04
这篇文章主要介绍了javascript中setInterval的用法的相关资料,需要的朋友可以参考下2015-07-07
这篇文章主要介绍了通过js随机函数Math.random实现乱序,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-05-05
这篇文章主要介绍了JS获得图片alt信息的方法,涉及javascript获取图片元素及对应alt属性的技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-04-04
这篇文章主要介绍了JS三级可折叠菜单实现方法,以实例形式分析了asp.net结合JavaScript实现三级折叠菜单的相关技巧,涉及JavaScript节点操作实现方法,需要的朋友可以参考下2016-02-02
使用JavaScript开发的时候,很多人多多少少都会被this的指向问题搞蒙圈,下面这篇文章主要给大家介绍了关于JavaScript中this例题实战的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-06-06
最新评论