<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>

 posted on 2010-05-20 10:16  刘卿  阅读(322)  评论(0编辑  收藏  举报