焦点图，带数字显示，支持常见浏览器

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<HTML xmlns="http://www.w3.org/1999/xhtml%22%3E%3Chead%3E%3Ctitle>黑色风格的JS焦点图</TITLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<STYLE type=text/css>* {
BORDER-TOP-WIDTH: 0px; PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none; BORDER-RIGHT-WIDTH: 0px
}
BODY {
PADDING-RIGHT: 20px; PADDING-LEFT: 20px; BACKGROUND: #eee; PADDING-BOTTOM: 20px; PADDING-TOP: 20px
}
#myfocus {
BORDER-RIGHT: #333 1px solid; PADDING-RIGHT: 6px; BORDER-TOP: #333 1px solid; PADDING-LEFT: 6px; BACKGROUND: #000 no-repeat; PADDING-BOTTOM: 6px; FONT: 12px Verdana, Arial, Helvetica, sans-serif; OVERFLOW: hidden; BORDER-LEFT: #333 1px solid; WIDTH: 450px; PADDING-TOP: 6px; BORDER-BOTTOM: #333 1px solid; POSITION: relative; HEIGHT: 296px
}
#myfocus #myloading {
FONT-SIZE: 12px; Z-INDEX: 9999; BACKGROUND: #333; LEFT: 0px; WIDTH: 462px; COLOR: #f60; PADDING-TOP: 90px; POSITION: absolute; TOP: 0px; HEIGHT: 326px; TEXT-ALIGN: center
}
#myfocus #myloading .bg {
Z-INDEX: -1; LEFT: 0px; POSITION: absolute; TOP: 0px
}
#myfocus .pics {
OVERFLOW: hidden; WIDTH: 450px; POSITION: relative; HEIGHT: 296px
}
#myfocus .pics UL {
POSITION: absolute; HEIGHT: 296px
}
#myfocus .pics UL LI {
FLOAT: left; WIDTH: 450px; POSITION: relative; HEIGHT: 296px
}
#myfocus .pics UL LI DIV {
DISPLAY: block; LEFT: 0px; WIDTH: 100%; BOTTOM: 0px; POSITION: absolute; HEIGHT: 34px
}
#myfocus .pics UL LI DIV SPAN {
DISPLAY: block; LEFT: 0px; WIDTH: 100%; BOTTOM: 0px; POSITION: absolute; HEIGHT: 34px
}
#myfocus .pics UL LI DIV A {
DISPLAY: block; LEFT: 0px; WIDTH: 100%; BOTTOM: 0px; POSITION: absolute; HEIGHT: 34px
}
#myfocus .pics UL LI DIV SPAN {
BACKGROUND: #000; FILTER: alpha(opacity=50); opacity: 0.5
}
#myfocus .pics UL LI DIV A {
PADDING-LEFT: 16px; FONT-WEIGHT: bold; FONT-SIZE: 14px; OVERFLOW: hidden; COLOR: #fff; LINE-HEIGHT: 34px; TEXT-DECORATION: none
}
#myfocus .mybtn {
RIGHT: 12px; BOTTOM: 10px; POSITION: absolute
}
#myfocus .mybtn UL LI {
BORDER-RIGHT: #000 1px solid; BORDER-TOP: #000 1px solid; BACKGROUND: #ccc; FLOAT: left; MARGIN-LEFT: 4px; OVERFLOW: hidden; BORDER-LEFT: #000 1px solid; WIDTH: 18px; CURSOR: pointer; LINE-HEIGHT: 16px; BORDER-BOTTOM: #000 1px solid; HEIGHT: 16px; TEXT-ALIGN: center
}
#myfocus .mybtn UL LI.current {
BACKGROUND: #f60; COLOR: #fff
}
</STYLE>

<SCRIPT type=text/javascript>
/*design by koen @ 10nian5yue11ri*/
/*http://hi.baidu.com/koen_li*/
function setFocus(ID,t){//主函数...
function $(id) {return document.getElementById(id);}
function $$(tag,obj){return (typeof obj=='object'?obj:$(obj)).getElementsByTagName(tag);}
var n='';//标记
function showPics(num){
if(n===num) return true;
if(n==='') n=0;
else n=num;
var pics=$$('ul',ID)[0];
var tit=$$('div',pics)[num];
if (!pics.style.left){pics.style.left = 0+'px';}
if (!tit.style.bottom||parseInt(tit.style.bottom)>-34){tit.style.bottom = -34+'px';}
var endX=-num*$$('div',ID)[0].clientWidth;
var goimg=function(){
X=parseInt(pics.style.left);
if (pics.movement){clearTimeout(pics.movement);}
if(parseInt(pics.style.left)==endX) return true;
if((endX-X)>0) X+=Math.ceil((endX-X) / 10);
else X+=Math.floor((endX-X) / 10);
pics.style.left=X+'px';
pics.movement = setTimeout(goimg, 5);
}
var gotit=function(){
var y=parseInt(tit.style.bottom);
if (tit.movement){clearTimeout(tit.movement);}
if(y==0) return true;
y+=Math.ceil((0-y) / 10);
if(parseInt(pics.style.left)==endX) tit.style.bottom=y+'px';
if(y<0) tit.movement = setTimeout(gotit, 16);
}
goimg();
gotit();
}
function classNormal() {//数字标签样式清除
var focusBtnList = $$('li',$$('ul',ID)[1]);
for (var i = 0; i < focusBtnList.length; i++) {
focusBtnList[i].className = '';
}
}
function focusChange() {//交互切换
var focusBtnList = $$('li',$$('ul',ID)[1]);
for (var i = 0; i < focusBtnList.length; i++) {
focusBtnList[i].I=i;
focusBtnList[i].onmouseover = function(){
showPics(this.I);
classNormal();
focusBtnList[this.I].className = 'current';
}
}
}
var autoFocusChange=function() {//自动运行
if (atuokey) return;
var focusBtnList = $$('li',$$('ul',ID)[1]);
for (var i = 0; i < focusBtnList.length; i++) {
if (focusBtnList[i].className == 'current') {
var currentNum = i;
}
}
if(currentNum<focusBtnList.length-1){
showPics(currentNum+1);
classNormal();
focusBtnList[currentNum+1].className = 'current';
}else if(currentNum==focusBtnList.length-1){
showPics(0);
classNormal();
focusBtnList[0].className = 'current';
}
}
var atuokey = '';
function init(){//初始化<div><span></span><a href="#">文字说明</a></div>
var ul=$$('ul',ID)[0];
var li=$$('li',ul);
var NUM=li.length;
var wid=$('myloading')?$$('div',ID)[1].clientWidth:$$('div',ID)[0].clientWidth;ul.style.width=wid*NUM+'px';
for(var i=0;i<NUM;i++){
var a=li[i].getElementsByTagName('a')[0];
var img=li[i].getElementsByTagName('img')[0];
li[i].innerHTML=li[i].innerHTML+'<div><span></span><a href="'+a+'">'+img.alt+'</a></div>';
}
var s='<div class="mybtn"><ul>';
for(var i=0;i<NUM;i++){s+='<li>'+(i+1)+'</li>'}
s+='</ul></div>';
$(ID).innerHTML+=s;
$(ID).removeChild($('myloading'));
showPics(0);
classNormal();
$$('li',$$('ul',ID)[1])[0].className = 'current';
$(ID).onmouseover = function() {
atuokey = true;
clearInterval(auto);
}
$(ID).onmouseout = function() {
atuokey = false;
auto=setInterval(autoFocusChange, T);
}
}
var T=t*1000;//每帧图片停留的时间，1000=1秒
var auto='';
init();
focusChange();
auto=setInterval(autoFocusChange, T);
};
window.onload=function(){
setFocus('myfocus',4);
}
</SCRIPT>

原文地址:http://www.corange.cn/archives/2010/07/3663.html

发表于 2010-07-15 09:30 corange 阅读(322) 评论(0) 编辑收藏举报

刷新页面返回顶部

PHP开发记录 PHP以及web前端（ajax，js，jquery等）
博客园首页新随笔管理

焦点图，带数字显示，支持常见浏览器

公告