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


Posted in Javascript onOctober 06, 2015

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

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

运行效果截图如下:

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

在线演示地址如下:

具体代码如下:

<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 相关文章推荐
JS 树形递归实例代码
May 18 Javascript
jQuery获取地址栏参数插件(模仿C#)
Oct 26 Javascript
jquery属性过滤选择器使用示例
Jun 18 Javascript
JavaScript插件化开发教程(六)
Feb 01 Javascript
javascript随机显示背景图片的方法
Jun 18 Javascript
jQuery实现信息提示框(带有圆角框与动画)效果
Aug 07 Javascript
jquery表单验证插件formValidator使用方法
Apr 01 Javascript
jQuery实现对无序列表的排序功能(附demo源码下载)
Jun 25 Javascript
Vue制作Todo List网页
Apr 26 Javascript
Vue下滚动到页面底部无限加载数据的示例代码
Apr 22 Javascript
jQuery实现导航样式布局操作示例【可自定义样式布局】
Jul 24 jQuery
微信小程序基于movable-view实现滑动删除效果
Jan 08 Javascript
JS实现淡蓝色简洁竖向Tab点击切换效果
Oct 06 #Javascript
JS+CSS相对定位实现的下拉菜单
Oct 06 #Javascript
推荐10 个很棒的 jQuery 特效代码
Oct 04 #Javascript
javascript日期格式化方法汇总
Oct 04 #Javascript
jQuery插件Timelinr 实现时间轴特效
Oct 04 #Javascript
jquery 实现输入邮箱时自动补全下拉提示功能
Oct 04 #Javascript
使用 JavaScript 进行函数式编程 (一) 翻译
Oct 02 #Javascript
You might like
php.ini中文版
2006/10/09 PHP
php中强制下载文件的代码(解决了IE下中文文件名乱码问题)
2011/05/09 PHP
PHP实现搜索相似图片
2015/09/22 PHP
PHP常用字符串操作函数实例总结(trim、nl2br、addcslashes、uudecode、md5等)
2016/01/09 PHP
php中分页及SqlHelper类用法实例
2017/01/12 PHP
详解php实现页面静态化原理
2017/06/21 PHP
javascript中的startWith和endWith的几种实现方法
2013/05/07 Javascript
js实现在字符串中提取数字
2013/11/05 Javascript
js实现select二级联动下拉菜单
2020/04/17 Javascript
超详细的JS弹出窗口代码大全
2020/04/18 Javascript
在nginx上部署vue项目(history模式)的方法
2017/12/28 Javascript
vue 动态绑定背景图片的方法
2018/08/10 Javascript
详解适配器在JavaScript中的体现
2018/09/28 Javascript
JavaScript函数式编程(Functional Programming)纯函数用法分析
2019/05/22 Javascript
Electron + vue 打包桌面操作流程详解
2019/06/24 Javascript
《javascript设计模式》学习笔记四:Javascript面向对象程序设计链式调用实例分析
2020/04/07 Javascript
angula中使用iframe点击后不执行变更检测的问题
2020/05/10 Javascript
[00:32]2018DOTA2亚洲邀请赛Newbee出场
2018/04/03 DOTA
[01:39:04]DOTA2-DPC中国联赛 正赛 SAG vs CDEC BO3 第二场 2月1日
2021/03/11 DOTA
简要讲解Python编程中线程的创建与锁的使用
2016/02/28 Python
详解Python实现按任意键继续/退出的功能
2016/08/19 Python
python下实现二叉堆以及堆排序的示例
2017/09/29 Python
Python多进程编程常用方法解析
2020/03/26 Python
python如何使用代码运行助手
2020/07/03 Python
python 实现批量图片识别并翻译
2020/11/02 Python
Python 实现集合Set的示例
2020/12/21 Python
英国礼品和生活方式品牌:Treat Republic
2020/11/21 全球购物
酒店前台接待岗位职责
2013/12/03 职场文书
总经理驾驶员岗位职责
2013/12/04 职场文书
新闻发布会主持词
2014/03/28 职场文书
大队干部竞选演讲稿
2014/04/28 职场文书
教师求职简历自我评价
2015/03/10 职场文书
幼儿园教师节活动总结
2015/03/23 职场文书
生死抉择观后感
2015/06/09 职场文书
关于Python中*args和**kwargs的深入理解
2021/08/07 Python
宫崎骏十大动画电影,宫崎骏好看的动画电影排名
2022/03/22 日漫