注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

K8拉登哥哥's Blog

K8搞基大队[K8team] 信息安全 网络安全 0day漏洞 渗透测试 黑客

 
 
 

日志

 
 

[原创]K8焦点图JS特效代码 几行就搞定 兼容IE6 7 8 9 10 FF等浏览器  

2011-11-24 17:49:54|  分类: JS代码 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

效果图如下:
[原创]K8焦点图JS特效 就几行代码搞定 兼容IE6 7 8 9 10 FF等浏览器 - QQ吻 - K8拉登哥哥s Blog
 
[原创]K8焦点图JS特效 就几行代码搞定 兼容IE6 7 8 9 10 FF等浏览器 - QQ吻 - K8拉登哥哥s Blog
 
<!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>K8焦点图JS特效 BY 拉登哥哥 QQ:236246705 or QQ:396890445</title>
<script src="http://qqhack8.blog.163.com/blog/JS/K8_ADplayer.js"></script>
<link href="http://qqhack8.blog.163.com/blog/css/K8_ADplayer.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="K8_ADplayer">
<ul id="img">
<li id="ADimg1" class="up"><img src="http://qqhack8.blog.163.com/blog/images\1.jpg" /></li>
<li id="ADimg2"><img src="http://qqhack8.blog.163.com/blog/images\2.jpg" /></li>
<li id="ADimg3"><img src="http://qqhack8.blog.163.com/blog/images\3.jpg" /></li>
<li id="ADimg4"><img src="http://qqhack8.blog.163.com/blog/images\4.jpg" /></li>
<li id="ADimg5"><img src="http://qqhack8.blog.163.com/blog/images\5.jpg" /></li>
</ul>
<ul id="playnum">
<li id="K8_ADBtn1" class="up" onmousemove="javascript:playImg(1);">1</li>
<li id="K8_ADBtn2" onmousemove="javascript:playImg(2);">2</li>
<li id="K8_ADBtn3" onmousemove="javascript:playImg(3);">3</li>
<li id="K8_ADBtn4" onmousemove="javascript:playImg(4);">4</li>
<li id="K8_ADBtn5" onmousemove="javascript:playImg(5);">5</li>
</ul>
</div>
</body>
</html>


function playImg(num)
{
var ts=document.getElementById("img").getElementsByTagName("li"); //获取菜单ID为img下的所有的li元素
for(i=1;i<ts.length+1;i++){ //循环, 遍历所有的li元素
if(num==i) // 如果是当前的li
{
// 在属性加class up。childNode=子标签,parentNode=父标签    
document.getElementById("ADimg"+i).className+=" up";
document.getElementById("K8_ADBtn"+i).className+=" up";
}
else{
document.getElementById("ADimg"+i).className=" "; // 去掉class up
document.getElementById("K8_ADBtn"+i).className=" ";
}
}
}


@charset "utf-8";
body,ul,li,img{
margin:0;padding:0;list-style:none;border:0px;
}
#K8_ADplayer #img li {
    display: none;
}
#K8_ADplayer #img li.up {
    display: block;
}
#K8_ADplayer #playnum li {
    background-color: transparent;
    height: 16px;
    width: 16px;
    text-align: center;
    float: left;
    margin-right: 6px;
    border: 1px solid #FFF;
    color: #FFF;
}
#K8_ADplayer #playnum li.up {
    background-color: #9F3;
    height: 16px;
    width: 16px;
    text-align: center;
    float: left;
    margin-right: 6px;
    border: 1px solid #0F6;
    color: #F0F;
}
#K8_ADplayer #playnum {
    float: right;
}
#K8_ADplayer {
    height: 240px;
    width: 740px;
}

#K8_ADplayer #playnum {
    margin-top: -25px;
    position:relative;
    z-index:999;
}
#K8_ADplayer #img img {
    height: 240px;
    width: 740px;
}

示例源码下载地址
http://download.csdn.net/detail/qq396890445/3838217
  评论这张
 
阅读(1001)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2016