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的页面划词搜索JS
Sep 14 Javascript
window.print打印指定div实例代码
Dec 13 Javascript
JS实现根据出生年月计算年龄
Jan 10 Javascript
JSON格式化输出
Nov 10 Javascript
jQuery结合CSS制作漂亮的select下拉菜单
May 03 Javascript
jQuery实现的图文高亮滚动切换特效实例
Aug 10 Javascript
jQuery.ajax向后台传递数组问题的解决方法
May 12 jQuery
深入探究AngularJs之$scope对象(作用域)
Jul 20 Javascript
Vue.js项目中管理每个页面的头部标签的两种方法
Jun 25 Javascript
JS实现li标签的删除
Apr 12 Javascript
微信内置开发 iOS修改键盘换行为搜索的解决方案
Nov 06 Javascript
vue+vant实现购物车全选和反选功能
Nov 17 Vue.js
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
解析CI即CodeIgniter框架在Nginx下的重写规则
2013/06/03 PHP
destoon整合UCenter图文教程
2014/06/21 PHP
ThinkPHP中公共函数路径和配置项路径的映射分析
2014/11/22 PHP
php按单词截取字符串的方法
2015/04/07 PHP
Yii2框架实现登录、退出及自动登录功能的方法详解
2017/10/24 PHP
PHP-FPM和Nginx的通信机制详解
2019/02/01 PHP
Yii2框架控制器、路由、Url生成操作示例
2019/05/27 PHP
Javascript异步表单提交,图片上传,兼容异步模拟ajax技术
2010/05/10 Javascript
fancybox1.3.1 基于Jquery的插件在IE中图片显示问题
2010/10/01 Javascript
仅IE不支持setTimeout/setInterval函数的第三个以上参数
2011/05/25 Javascript
理解jQuery stop()方法
2014/11/21 Javascript
jQuery遍历json中多个map的方法
2015/02/12 Javascript
javascript解析xml实现省市县三级联动的方法
2015/07/25 Javascript
深入解读JavaScript中的Iterator和for-of循环
2015/07/28 Javascript
JavaScript数组对象赋值用法实例
2015/08/04 Javascript
分分钟玩转Vue.js组件
2016/10/25 Javascript
原生JS实现自定义滚动条效果
2020/10/27 Javascript
Vue实现active点击切换方法
2018/03/16 Javascript
微信小程序实现之手势锁功能实例代码
2018/07/19 Javascript
深入解析ES6中的promise
2018/11/08 Javascript
微信小程序实现张图片合成为一张并下载
2019/07/16 Javascript
[02:54]DOTA2英雄基础教程 撼地者
2014/01/14 DOTA
python爬虫使用cookie登录详解
2017/12/27 Python
Python中文件的写入读取以及附加文字方法
2019/01/23 Python
HTML5 Canvas draw方法制作动画效果示例
2013/07/11 HTML / CSS
ESDlife健康生活易:身体检查预订、搜寻及比较
2019/05/10 全球购物
Maisons du Monde德国:法国家具和装饰的市场领导者
2019/07/26 全球购物
什么是继承
2013/12/07 面试题
给排水工程师岗位职责
2013/11/21 职场文书
医学检验专业个人求职信范文
2013/12/04 职场文书
公司爱心捐款倡议书
2014/05/14 职场文书
餐饮服务食品安全承诺书
2015/04/29 职场文书
离职证明格式样本
2015/06/12 职场文书
详解GaussDB for MySQL性能优化
2021/05/18 MySQL
详解Oracle数据库中自带的所有表结构(sql代码)
2021/11/20 Oracle
Python可变与不可变数据和深拷贝与浅拷贝
2022/04/06 Python