<style type="text/css">
* {
margin:0;
padding:0;
border:0;
list-style:none;
}
body {
padding:20px;
background:#eee;
}
#myfocus {
width:450px;
height:296px;
overflow:hidden;
padding:6px 6px 24px;
background:#333 url(http://pigimg.zhongso.com/space/gallery/infoimgs/gc/gcqzj/20100511/2010051111200423950.jpg) no-repeat;
position:relative;
}
#myfocus #myloading {
position:absolute;
top:0;
left:0;
z-index:9999;
width:462px;
height:326px;
background:#333;
color:#f60;
font-size:12px;
text-align:center;
padding-top:90px;
}
#myfocus #myloading .bg {
position:absolute;
top:0;
left:0;
z-index:-1;
}/*载入画面*/
#myfocus .pics {
width:450px;
height:296px;
overflow:hidden;
position:relative;
}
#myfocus .pics ul {
height:296px;
position:absolute;
}
#myfocus .pics ul li {
width:450px;
height:296px;
float:left;
position:relative;
}/*图片大小450px*296px*/
#myfocus .pics ul li div, #myfocus .pics ul li div span, #myfocus .pics ul li div a {
display:block;
position:absolute;
bottom:0;
left:0;
width:100%;
height:34px;
}
#myfocus .pics ul li div span {
filter:alpha(opacity=50);
opacity: 0.5;
background:#000;
}/*文字标题的背景样式*/
#myfocus .pics ul li div a {
line-height:34px;
overflow:hidden;
padding-left:16px;
text-decoration:none;
font-size:14px;
color:#fff;
font-weight:bold;
}/*文字标题样式*/
#myfocus .mybtn {
position:absolute;
bottom:8px;
right:8px;
}
#myfocus .mybtn ul li {
float:left;
width:16px;
height:6px;
margin-left:4px;
overflow:hidden;
border:1px solid #000;
background:#ccc;
cursor:pointer;
}
#myfocus .mybtn ul li.current {
background:#f60;
}
</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></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>
<div id="myfocus"><!--只需定义这个ID即可-->
<div id="myloading">请稍候...<br />
<br />
<img src="http://pigimg.zhongso.com/space/gallery/infoimgs/gc/gcqzj/20100510/2010051020541820883.gif" /><img class="bg" src="http://pigimg.zhongso.com/space/gallery/infoimgs/gc/gcqzj/20100511/2010051111200423950.jpg" /></div>
<!--载入画面，可以不要-->
<div class="pics">
<ul>
<li><a href="#"><img src="http://pigimg.zhongso.com/space/gallery/infoimgs/gc/gcqzj/20100510/2010051018042735524.jpg" alt="图片1来源于网络，版权属于作者" /></a></li>
<li><a href="#"><img src="http://pigimg.zhongso.com/space/gallery/infoimgs/gc/gcqzj/20100510/2010051018044355191.jpg" alt="图片2来源于网络，版权属于作者" /></a></li>
<li><a href="#"><img src="http://pigimg.zhongso.com/space/gallery/infoimgs/gc/gcqzj/20100510/2010051018050315609.jpg" alt="图片3来源于网络，版权属于作者" /></a></li>
<li><a href="#"><img src="http://pigimg.zhongso.com/space/gallery/infoimgs/gc/gcqzj/20100510/2010051018052886494.jpg" alt="图片4来源于网络，版权属于作者" /></a></li>
<li><a href="#"><img src="http://pigimg.zhongso.com/space/gallery/infoimgs/gc/gcqzj/20100510/2010051018055365260.jpg" alt="图片5来源于网络，版权属于作者" /></a></li>
<li><a href="#"><img src="http://pigimg.zhongso.com/space/gallery/infoimgs/gc/gcqzj/20100510/2010051018061333534.jpg" alt="图片6来源于网络，版权属于作者" /></a></li>
</ul>
</div>
</div>