39,084
社区成员
发帖
与我相关
我的任务
分享新手白白白求（如何给首页滚动推片添加鼠标点击事件）
PS：白得不能再白的小白，首页滚动图片是有的，下面数字也是有的，目前是点击数字跳转对应图片的链接地址，我想改成鼠标点击数字，切换到对应的图片。有没有大牛帮我解决的？直接告诉我代码呗，我是真的不会！！！！
如果代码截得不完成，告诉我我再补哈~~
如果代码截得不完成，告诉我我再补哈~~
...全文
请发表友善的回复…
发表回复
LittleMan_LC 2018-05-01
- 打赏
- 举报
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>图片幻灯-直接切换</title>
<style>
*{margin:0;padding:0;}
#box{width:718px;height:339px;margin:100px auto;position:relative;}
#imgBox{width:718px;height:339px;overflow:hidden;} /*设定overflow，当图片同时显示时，裁切掉不显示*/
.hide{display:none;} /* 定制一个隐藏的Class，当元素需要隐藏时，直接给class属性赋值 */
#pageBox{height:39px;width:718px;position:absolute;left:0;top:300px;}
#mask{height:39px;background:#444;}
.alpha{filter:alpha(opacity=40);-moz-opacity:0.4;-khtml-opacity: 0.4;opacity:0.4;}
#info{position:absolute;top:0;left:0;height:39px;line-height:38px;width:420px;padding:0 15px;font-weight:bold;color:#FFF;font-size:12px;}
#page{position:absolute;top:0;right:0;padding:9px 15px 0 0;}
#page span{float:left;width:22px;height:22px;background:url(img/pageBg.gif) -22px 0px;font-size:14px;color:#FFF;font-weight:bold;margin:0 3px;text-align:center;line-height:22px;font-family:Arial;cursor:pointer;}
#page span.se{background-position:0 0;}
</style>
</head>
<body>
<div id="box"><!--整个幻灯容器，以后可直接将这块代码复制到任何能容纳它的区域-->
<div id="imgBox"><!--图片容器，将所有图片统一管理-->
<img src="img/001.jpg" />
<img src="img/002.jpg" class="hide" />
<img src="img/003.jpg" class="hide" />
<img src="img/004.jpg" class="hide" />
<img src="img/005.jpg" class="hide" />
</div>
<div id="pageBox">
<div id="mask" class="alpha"></div><!--{形成半透明效果的遮罩}-->
<p id="info"><!--文字区域-->
<span>南京造币工艺，权威国家检测！</span>
<span class="hide">中国邮政邮品设计制作中心</span>
<span class="hide">送出最美的新年礼物,2013新年自选礼品卡册</span>
<span class="hide">年会礼品采购专场，专业策划，量身定制</span>
<span class="hide">一站式礼品服务，解决企业送礼难题</span>
</p>
<p id="page">
<span class="se">1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
</p><!--页码-->
</div><!--图片信息及编号容器-->
</div>
</body>
<script>
var speed = 1000; // 切换速度
var imgList = document.getElementById("imgBox").childNodes;
imgList = filterElement(imgList); //图片集合
var infoList = document.getElementById("info").childNodes;
infoList = filterElement(infoList); // 文字集合
var pageList = document.getElementById("page").childNodes;
pageList = filterElement(pageList); // 页码集合
var sid = setInterval(move,speed);
var j = 0;
function move()
{
j++;
if(j < 4)
{
pageList[j].onmouseover();
}
else
{
j = 4;
pageList[j].onmouseover();
j = -1;
}
}
//遍历所有页码，增加over事件
for(var i=0;i<pageList.length;i++)
{
pageList[i].onmouseover = function(){
// 遍历所有页码，去掉class属性
for(var x in pageList)
{
pageList[x].className = "";
}
// 给当前选定对象增加class属性
this.className = "se";
//隐藏所有图片，显示当前的图片
for(var x in imgList)
{
imgList[x].className = "hide";
infoList[x].className = "hide";
}
imgList[this.index].className = "";
infoList[this.index].className = "";
j = this.index;
}
pageList[i].onmousemove = function(){
clearInterval(sid);
}
pageList[i].onmouseout = function(){
sid = setInterval(move,speed);
}
pageList[i].index = i;
}
//过滤非元素节点
function filterElement(list)
{
var newList = new Array();
for(var x in list)
{
if(list[x].nodeType == 1)
{
newList.push(list[x]);
}
}
return newList;
}
</script>
</html>
