一个焦点图(就是网站图片轮换的),怎么把鼠标事件由点击改为滑过。(内附原代码)

Noetice 2012-06-05 08:29:01

这个焦点图可以从这里下载源程序:
http://www.zcool.com.cn/gfx/ZMTYwMzY4.html

这是在线效果:
http://preview.zcool.com.cn/code/ggcode/000a/

当前效果是鼠标点击“1、2、3”这些按钮时图片会切换。我想改为鼠标滑过时切换图片。
求各位大侠帮忙了,本人对JS一窍不通,希望可以帮我改好。万分感激!


以下是这个焦点图的JS文件,我贴出来了-------------------------------------------------------------

//选择器
function $a(id,tag){var re=(id&&typeof id!="string")?id:document.getElementById(id);if(!tag){return re;}else{return re.getElementsByTagName(tag);}}

//焦点滚动图 点击移动
function movec()
{
var o=$a("bd1lfimg","");
var oli=$a("bd1lfimg","dl");
var oliw=oli[0].offsetWidth; //每次移动的宽度
var ow=o.offsetWidth-2;
var dnow=0; //当前位置
var olf=oliw-(ow-oliw+10)/2;
o["scrollLeft"]=olf+(dnow*oliw);
var rqbd=$a("bd1lfsj","ul")[0];
var extime;

<!--for(var i=1;i<oli.length;i++){rqbd.innerHTML+="<li>"+i+"</li>";}-->
var rq=$a("bd1lfsj","li");
for(var i=0;i<rq.length;i++){reg(i);};
oli[dnow].className=rq[dnow].className="show";
var wwww=setInterval(uu,2000);

function reg(i){rq[i].onclick=function(){oli[dnow].className=rq[dnow].className="";dnow=i;oli[dnow].className=rq[dnow].className="show";mv();}}
function mv(){clearInterval(extime);clearInterval(wwww);extime=setInterval(bc,15);wwww=setInterval(uu,8000);}
function bc()
{
var ns=((dnow*oliw+olf)-o["scrollLeft"]);
var v=ns>0?Math.ceil(ns/10):Math.floor(ns/10);
o["scrollLeft"]+=v;if(v==0){clearInterval(extime);oli[dnow].className=rq[dnow].className="show";v=null;}
}
function uu()
{
if(dnow<oli.length-2)
{
oli[dnow].className=rq[dnow].className="";
dnow++;
oli[dnow].className=rq[dnow].className="show";
}
else{oli[dnow].className=rq[dnow].className="";dnow=0;oli[dnow].className=rq[dnow].className="show";}
mv();
}
o.onmouseover=function(){clearInterval(extime);clearInterval(wwww);}
o.onmouseout=function(){extime=setInterval(bc,15);wwww=setInterval(uu,8000);}
}
...全文
257 4 打赏 收藏 转发到动态 举报
写回复
用AI写文章
4 条回复
切换为时间正序
请发表友善的回复…
发表回复
Noetice 2012-06-05
  • 打赏
  • 举报
回复
好的,谢谢各位,结贴!
panghuhu250 2012-06-05
  • 打赏
  • 举报
回复

var hoverTimer;
var waitperiod = 300;
function reg(i){rq[i].onmouseover=function() {clearTimeout(hoverTimer); hoverTimer = setTimeout(function(){oli[dnow].className=rq[dnow].className="";dnow=i;oli[dnow].className=rq[dnow].className="show";mv();}, waitperiod)}}


这样就好多了。
panghuhu250 2012-06-05
  • 打赏
  • 举报
回复
function reg(i){rq[i].onclick=function(){oli[dnow].className=rq[dnow].className="";dnow=i;oli[dnow].className=rq[dnow].className="show";mv();}}


把上面的onclick改成onmouseover。

我觉得改了以后不如原来的好,鼠标不小心一划拉,图片刷刷的闪,感觉很乱。也许应该加个timer,只有鼠标停留一段时间才起作用。
001007009 2012-06-05
  • 打赏
  • 举报
回复
function reg(i){rq[i].onmouseover
DUX主题是基于WordPress程序的主题,由themebetter团队原创开发,是目前比较火的wordpress主题,和大前端主题一样比较优秀的主题还有begin知更鸟,两者功能都很多,界面也比较好看,做一个个人博客完全够用了,今天爱游分享就是大前端5.2主题,已去除域名限制。 主题简介 支持百度熊掌号,适用于垂直站点、科技博客、个人站,扁平化设计、简洁白色、超多功能配置、会员中心、直达链接、自动缩略 DUX主题基于WordPress程序,响应式布局支持电脑、平板和手机的完美展示 布局:响应式布局,不同设备不同展示效果 小工具:特别推荐、置顶推荐、网站数据统计、读者墙、最新评论、广告、搜索、文章列表(支持分类下文章) 独立页面:会员中心(修改资料、修改密码、我的评论和我的文章、发布文章(1.3+))、登录、注册、网址导航页、读者墙、标签云、存档页、链接页 浏览器:IE8+、Chrome、Firefox、Opera、Safari、各移动端浏览器 多列:1栏或2栏自由切换 WP版本:4.0+,且支持最新版本 PHP版本:支持 5.3 至 7.2 语言:中文 DUX5.2 优化版特色 新增 自动给页面的站外链接添加 nofollow 属性和新窗口打开 功能 新增 评论可见 功能 新增 文章部分内容密码可见 功能 新增 文本编辑器下载按钮 功能 新增 一系列文本高亮提示框和彩色文本框 功能 新增 博主自用的文章内容展开收缩效果 功能 新增 文章内外链和评论者链接添加 go 跳转 功能 新增 文章评论 VIP 等级功能 新增 集成 auto-highslide 灯箱插件功能 新增 自动添加 alt 属性 功能 新增 博主自用说说 功能 新增 添加 @ 评论者 功能 新增 网站自动设置运营版权时间 功能 新增 文章评论显示评论者国家、浏览器、系统 功能 新增 复制内容弹窗版权提醒 功能 新增 评论框礼花绽放效果 功能 新增 侧边栏专题推荐小工具 功能 新增 首页热门文章 功能 新增 首页自定义文章推荐列表 功能 新增 logo 扫光效果 功能 新增 显示首页焦点标题 功能 新增 Gravatar 头像旋转 功能 新增 h1 h2 标签样式 功能 新增 侧边栏标签随机颜色 功能 新增 独立页面 HTML 地模板 功能 新增 新发布的文章添加 NEW 标式样 功能 修复 独立页左边菜单点击无背景颜色变化问题 修复 移动端标签标题错位问题 修改 相关推荐为双栏显示效果 修改 文章修改鼠标滑过背景色及添加彩色边框效果 更新记录 5.3版本更新: 新增全面兼容 PHP 7.3 新增对WordPress5.0+新版编辑器的兼容支持 新增登录注册找回密码链接的 nofollow 更新Awesome标库到最新版5.7.2,免费标都可以用 优化小工具画廊的展示 优化导航二级菜单,让展示更大气 优化网址导航页面模版细节 修复WordPress5.1后Ajax评论回复功能失效 修复几个开启debug后的错误提示 修复网址导航页面模版左侧菜单抖动问题 DUX主题5.4版本更新内容: 新增全站评论整体关闭选项,主题设置-基本中可设置 新增v2ex头像获取方式,删除多说方式,且可以在后台-设置-讨论中选择默认头像 调整底部友情链接选择只在首页显示时,不在首页分页中显示 调整产品分类的写法以避免因分类过多导致的高度不够用 调整会员中心发布文章字数判断方式,更准确 修复熊掌号推送在新版编辑器下可能无法正常推送的问题 修改会员中心发布的文章为待审状态 修复网站开启ssl后弹窗登录有可能失败的问题 修复首页最新发布置顶文章可能出现的问题 修复会员中心文章列表标题过长可能错乱的问题 6.0版本更新内容: 新增文章暗箱功能:点击弹窗放大,可手势左右滑动切换、双指操作放大缩小、双击放大、单击关闭弹窗,此功能仅在手机端有效,且仅在文章无链接时点击才会弹窗 新增archives页面模版中文章标题后 显示 副标题 调整首页轮换效率更高,手机端手势滑动更加顺畅 优化产品中心手机端左侧菜单不显示的问题 修复页面左侧菜单一键换色的时候没有换色

87,903

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧