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 相关文章推荐
将string解析为json的几种方式小结
Nov 11 Javascript
25个好玩的JavaScript小游戏分享
Apr 22 Javascript
jquery进行数组遍历如何跳出当前的each循环
Jun 05 Javascript
jquery转盘抽奖功能实现
Nov 13 Javascript
jquery mobile界面数据刷新的实现方法
May 28 Javascript
JavaScript函数绑定用法实例分析
Nov 14 Javascript
JavaScript实现为事件句柄绑定监听函数的方法分析
Nov 14 Javascript
详解ES6 系列之异步处理实战
Oct 26 Javascript
checkbox在vue中的用法小结
Nov 13 Javascript
jQuery实现上下滚动公告栏详细代码
Nov 21 jQuery
亲自动手实现vue日历控件
Jun 26 Javascript
layui前端时间戳转化实例
Nov 15 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防CC攻击实现代码
2011/12/29 PHP
PHP实现CSV文件的导入和导出类
2015/03/24 PHP
PHP自定义函数判断是否为Get、Post及Ajax提交的方法
2017/07/27 PHP
php 处理png图片白色背景色改为透明色的实例代码
2018/12/10 PHP
PHP pthreads v3下的Volatile简介与使用方法示例
2020/02/21 PHP
把textarea中字符串里含有的回车换行替换成&amp;lt;br&amp;gt;的javascript代码
2007/04/20 Javascript
jquery蒙版控件实现代码
2010/12/08 Javascript
解析ScrollPic在ie8下只滚动一遍,然后变为空白 ie6,ie7,chrome,firefox正常
2013/06/26 Javascript
JS高级调试技巧:捕获和分析 JavaScript Error详解
2014/03/16 Javascript
浅析javascript中的DOM
2015/03/01 Javascript
浅谈JavaScript正则表达式分组匹配
2015/04/10 Javascript
简单实现js选项卡切换效果
2016/02/03 Javascript
jQuery ajax调用后台aspx后台文件的两种常见方法(不是ashx)
2016/06/28 Javascript
AngularJS 实现弹性盒子布局的方法
2016/08/30 Javascript
微信小程序 五星评价功能的实现
2017/03/09 Javascript
详解ES6语法之可迭代协议和迭代器协议
2018/01/13 Javascript
通过js动态创建标签,并设置属性方法
2018/02/24 Javascript
Vue下滚动到页面底部无限加载数据的示例代码
2018/04/22 Javascript
JavaScript实现百度搜索框效果
2020/03/26 Javascript
如何用webpack4带你实现一个vue的打包的项目
2018/06/20 Javascript
element ui table(表格)实现点击一行展开功能
2018/12/04 Javascript
[00:23]DOTA2群星共贺开放测试 25日无码时代来袭
2013/09/23 DOTA
python多线程socket编程之多客户端接入
2017/09/12 Python
python中的协程深入理解
2019/06/10 Python
使用pyinstaller打包PyQt4程序遇到的问题及解决方法
2019/06/24 Python
pycharm 安装JPype的教程
2019/08/08 Python
Moss Bros官网:英国排名第一的西装店
2020/02/26 全球购物
JAVA高级程序员面试题
2013/09/06 面试题
销售员自我评价怎么写
2013/09/19 职场文书
中学生期末评语
2014/02/03 职场文书
办公室文员自荐书
2014/02/03 职场文书
经营目标管理责任书
2014/07/25 职场文书
预备党员期盼十八届四中全会召开思想汇报
2014/10/17 职场文书
公司员工手册范本
2015/05/14 职场文书
2015年文秘个人工作总结
2015/10/14 职场文书
MySQL学习之基础命令实操总结
2022/03/19 MySQL