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

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

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

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/js-txt-pic-time-cha-tab-codes/

具体代码如下：

*{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;}





VB在线出题考试系统
jQuery 仿iGoogle 主页模块拖动
jQuery UI 官方实例集
VB在线出题考试系统
小妖ASP投票调查系统 v4.0
jQuery 带动画的日期选择插件



VB在线出题考试系统
jQuery 仿iGoogle 主页模块拖动
jQuery UI 官方实例集
VB在线出题考试系统（MSSQL）
小妖ASP投票调查系统 v4.0
jQuery 带动画的日期选择插件

希望本文所述对大家的Javascript程序设计有所帮助。