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 相关文章推荐
Jquery 高亮显示文本中重要的关键字
Dec 24 Javascript
如何用ajax来创建一个XMLHttpRequest对象
Dec 10 Javascript
JavaScript的常见兼容问题及相关解决方法(chrome/IE/firefox)
Dec 31 Javascript
jQuery EasyUI tree 使用拖拽时遇到的错误小结
Oct 10 Javascript
80%应聘者都不及格的JS面试题
Mar 21 Javascript
JS实现模糊查询带下拉匹配效果
Jun 21 Javascript
浅谈angularJS2中的界面跳转方法
Aug 31 Javascript
layui表格设计以及数据初始化详解
Oct 26 Javascript
JavaScript中的this原理及6种常见使用场景详解
Feb 14 Javascript
JavaScript, select标签元素左右移动功能实现
May 14 Javascript
解决vue刷新页面以后丢失store的数据问题
Aug 11 Javascript
JavaScript实现点击切换功能
Jan 27 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站内搜索并高亮显示关键字的实现代码
2011/12/29 PHP
深入HTTP响应状态码速查表的详解
2013/06/07 PHP
PHP Echo字符串的连接格式
2016/03/07 PHP
ECSHOP完美解决Deprecated: preg_replace()报错的问题
2016/05/17 PHP
PHP实现的操作数组类库定义与用法示例
2019/05/24 PHP
PHP判断函数是否被定义的方法
2019/06/21 PHP
用 JavaScript 迁移目录
2006/12/18 Javascript
两种简单实现菜单高亮显示的JS类代码
2010/06/27 Javascript
JavaScript版TAB选项卡效果实例
2013/08/16 Javascript
js 剪切板应用clipboardData详细解析
2013/12/17 Javascript
jquery实现非叠加式的搜索框提示效果
2014/01/07 Javascript
JS往数组中添加项性能分析
2015/02/25 Javascript
javaScript中Math()函数注意事项
2015/06/18 Javascript
js中unicode转码方法详解
2015/10/09 Javascript
利用AngularJs实现京东首页轮播图效果
2016/09/08 Javascript
vue日期组件 支持vue1.0和2.0
2017/01/09 Javascript
详解Vue微信公众号开发踩坑全记录
2017/08/21 Javascript
vue cli 3.0 使用全过程解析
2018/06/14 Javascript
vue-router动态设置页面title的实例讲解
2018/08/30 Javascript
这15个Vue指令,让你的项目开发爽到爆
2019/10/11 Javascript
基于vue项目设置resolves.alias: '@'路径并适配webstorm
2020/12/02 Vue.js
[01:04]不如跳舞!DOTA2新英雄玛尔斯的欢乐日常
2019/03/11 DOTA
Python cookbook(数据结构与算法)让字典保持有序的方法
2018/02/18 Python
Python DataFrame 设置输出不显示index(索引)值的方法
2018/06/07 Python
浅析python中的迭代与迭代对象
2018/10/08 Python
Python基于opencv调用摄像头获取个人图片的实现方法
2019/02/21 Python
Python使用paramiko操作linux的方法讲解
2019/02/25 Python
Python tkinter界面实现历史天气查询的示例代码
2020/08/23 Python
美国女性服饰销售网站:Nasty Gal(坏女孩)
2016/07/26 全球购物
美津浓巴西官方网站:Mizuno巴西
2019/07/24 全球购物
学校介绍信范文
2014/01/14 职场文书
胡桃夹子观后感
2015/06/11 职场文书
新学期家长寄语2016
2015/12/03 职场文书
2019各种承诺书范文
2019/06/24 职场文书
为什么MySQL8新特性会修改自增主键属性
2022/04/18 MySQL
Android自定义双向滑动控件
2022/04/19 Java/Android