公布一个幻灯图片的代码(可以用dede淘宝客)

网友 • 2010-05-10 • 胡剽乱写IT世界 • 918 阅读

       公布一个幻灯图片的代码(可以用dede淘宝客)，这段代码的演示详细见:http://www.aiyawe.com,的正中此代码适用ff3.6，ie6,7,8，也就是说主流的浏览器下均无任何问题。

 

   首先公布样式表

  .body-left-flash {
    FLOAT: left; MARGIN-LEFT: 6px; WIDTH: 478px; HEIGHT: 250px;
    position: absolute;
    *position: absolute !importan;
    *position: absolute;
    left:0px;
    *left: 0px !importan;
    *left:-245px;
   
}
.body-flash-top {
    PADDING-RIGHT: 2px; MARGIN-TOP: 6px; PADDING-LEFT: 2px; BACKGROUND-IMAGE:
    url(../images/flash-bg.gif); PADDING-BOTTOM: 2px;
    WIDTH: 478px; PADDING-TOP: 4px; HEIGHT: 205px;   
   
}
#ifocus {
    WIDTH: 466px; HEIGHT: 196px;
}
#ifocus_pic {
    DISPLAY: inline; FLOAT: left; MARGIN: 5px 0px 0px 5px; OVERFLOW: hidden; WIDTH: 360px; POSITION: relative; HEIGHT: 190px;
}
#ifocus_piclist {
    POSITION: absolute;
}
#ifocus_piclist LI {
    OVERFLOW: hidden; WIDTH: 360px; HEIGHT: 225px;
}
#ifocus_piclist IMG {
    WIDTH: 360px; HEIGHT: 190px;
}
#ifocus_btn {
    DISPLAY: inline; FLOAT: right; MARGIN: 5px 5px 0px 0px; WIDTH: 94px;
}
#ifocus_btn LI {
    FILTER: alpha(opacity=50); WIDTH: 94px; CURSOR: pointer; HEIGHT: 38px; opacity: 0.5; moz-opacity: 0.5;
}
#ifocus_btn IMG {
    BORDER-RIGHT: #666 2px solid; BORDER-TOP: #666 2px solid; MARGIN: 3px 0px 0px 5px; BORDER-LEFT: #666 2px solid; WIDTH: 78px; BORDER-BOTTOM: #666 2px solid; HEIGHT: 38px
}
#ifocus_btn .b1 {
    BACKGROUND: url(images/ifocus_btn_bg.gif) no-repeat; FILTER: alpha(opacity=100); opacity: 1; moz-opacity: 1;
}
#ifocus_opdiv {
    BACKGROUND: #000; FILTER: alpha(opacity=50); LEFT: 0px; WIDTH: 410px; BOTTOM: 0px; POSITION: absolute; HEIGHT: 35px; opacity: 0.5; moz-opacity: 0.5
}
#ifocus_tx {
    FONT-SIZE: 14px; LEFT: 8px; COLOR: #fff; BOTTOM: 8px; POSITION: absolute
}

.body-flash-bot {
    BACKGROUND-IMAGE: url(../images/mid-btn.jpg); WIDTH: 478px; PADDING-TOP: 12px; BACKGROUND-REPEAT: no-repeat; HEIGHT: 23px
}
.body-flash-bot A {
    FONT-SIZE: 12px; MARGIN-LEFT: 10px; WIDTH: 65px; MARGIN-RIGHT: 15px; TEXT-ALIGN: left
}
.body-flash-bot A:link {
    COLOR: #333; TEXT-DECORATION: none
}
.body-flash-bot A:visited {
    COLOR: #333; TEXT-DECORATION: none
}
.body-flash-bot A:hover {
    COLOR: #f60; TEXT-DECORATION: underline
}
.home-bodya-midr A:hover {
    COLOR: #f60; TEXT-DECORATION: underline
}
.tshop-list-body A:hover {
    COLOR: #f60; TEXT-DECORATION: underline
}
.body-flash-bot A:active {
    COLOR: #f60; TEXT-DECORATION: none
}
 

下面是页面的html代码:

            <DIV class=body-left-flash><SCRIPT src="/templets/taoke/images/pic_change.js" type=text/javascript></SCRIPT>
            <DIV class=body-flash-top><!--ifocus end-->
            <DIV id=ifocus>
            <DIV id=ifocus_pic>
            <DIV id=ifocus_piclist style="LEFT: 1px; TOP: -2px">
            <UL>
              <LI><A href="http://haibao.huoban.taobao.com/tms/topic.php?pid=mm_10480604_0_0&eventid=101287" target="_blank"
              target=_blank><IMG src="/templets/taoke/images/162Q511E0.jpg" border="0"></A> </LI>
              <LI><A href="http://haibao.huoban.taobao.com/tms/topic.php?pid=mm_10480604_0_0&eventid=101137"
              target=_blank><IMG src="/templets/taoke/images/162G111Q9.jpg"></A> </LI>
              <LI><a href="http://haibao.huoban.taobao.com/tms/topic.php?pid=mm_10480604_0_0&eventid=101146"
              target=_blank><img src="/templets/taoke/images/16251512539.jpg" /></a></LI>
              <LI><A href="http://haibao.huoban.taobao.com/tms/topic.php?pid=mm_10480604_0_0&eventid=101146"
              target=_blank><IMG src="/templets/taoke/images/16214414W2.jpg"></A></LI>
            </UL></DIV>
            <DIV id=ifocus_opdiv></DIV>
            <DIV id=ifocus_tx>
            <UL>
              <LI class=b1>
              <LI class=b2>
              <LI class=b3>
              <LI class=b4></LI></UL></DIV></DIV>
            <DIV id=ifocus_btn>
            <UL>
              <LI class=b1><IMG alt="" src="/templets/taoke/images/162Q511E0.jpg"> </LI>
              <LI class=b2><IMG alt="" src="/templets/taoke/images/162G111Q9.jpg"> </LI>
              <LI class=b3><IMG alt="" src="/templets/taoke/images/16251512539.jpg"> </LI>
              <LI class=b4><IMG alt="" src="/templets/taoke/images/16214414W2.jpg"></LI>
            </UL></DIV></DIV><!--ifocus end--></DIV>
            <DIV class=body-flash-bot><A href="http://pindao.huoban.taobao.com/channel/electric.htm?pid=mm_10480604_0_0"
            target=_blank>电器商城</A><A
            href="http://pindao.huoban.taobao.com/channel/man.htm?pid=mm_10480604_0_0"
            target=_blank>男人频道</A><A
            href="http://pindao.huoban.taobao.com/channel/lady.htm?pid=mm_10480604_0_0"
            target=_blank>女人频道</A><A
            href="http://pindao.huoban.taobao.com/channel/digital.htm?pid=mm_10480604_0_0"
            target=_blank>数码频道</A><A
            href="http://pindao.huoban.taobao.com/channel/beauty.htm?pid=mm_10480604_0_0"
            target=_blank>美容频道</A><A href="http://pindao.huoban.taobao.com/channel/taiwan.htm?pid=mm_10480604_0_0"
            target=_blank>台 湾 馆</A></DIV>
            </DIV>

下面就是一个js文件：（控制幻灯的）


function $(id){return document.getElementById(id);}
function addLoadEvent(func){var oldonload=window.onload;if(typeof window.onload!='function'){window.onload=func;}else{window.onload=function(){oldonload();func();}}}
function moveElement(elementID,final_x,final_y,interval){if(!document.getElementById)return false;if(!document.getElementById(elementID))return false;var elem=document.getElementById(elementID);if(elem.movement){clearTimeout(elem.movement);}
if(!elem.style.left){elem.style.left="0px";}
if(!elem.style.top){elem.style.top="0px";}
var xpos=parseInt(elem.style.left);var ypos=parseInt(elem.style.top);if(xpos==final_x&&ypos==final_y){return true;}
if(xpos<final_x){var dist=Math.ceil((final_x-xpos)/10);xpos=xpos+dist;}
if(xpos>final_x){var dist=Math.ceil((xpos-final_x)/10);xpos=xpos-dist;}
if(ypos<final_y){var dist=Math.ceil((final_y-ypos)/10);ypos=ypos+dist;}
if(ypos>final_y){var dist=Math.ceil((ypos-final_y)/10);ypos=ypos-dist;}
elem.style.left=xpos+"px";elem.style.top=ypos+"px";var repeat="moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")";elem.movement=setTimeout(repeat,interval);}
function classNormal(iFocusBtnID,iFocusTxID){var iFocusBtns=$(iFocusBtnID).getElementsByTagName('li');var iFocusTxs=$(iFocusTxID).getElementsByTagName('li');for(var i=0;i<iFocusBtns.length;i++){iFocusBtns[i].className='normal';iFocusTxs[i].className='normal';}}
function classCurrent(iFocusBtnID,iFocusTxID,n){var iFocusBtns=$(iFocusBtnID).getElementsByTagName('li');var iFocusTxs=$(iFocusTxID).getElementsByTagName('li');iFocusBtns[n].className='b1';iFocusTxs[n].className='b1';}
function iFocusChange(){if(!$('ifocus'))return false;$('ifocus').onmouseover=function(){atuokey=true};$('ifocus').onmouseout=function(){atuokey=false};var iFocusBtns=$('ifocus_btn').getElementsByTagName('li');var listLength=iFocusBtns.length;iFocusBtns[0].onmouseover=function(){moveElement('ifocus_piclist',0,0,5);classNormal('ifocus_btn','ifocus_tx');classCurrent('ifocus_btn','ifocus_tx',0);}
if(listLength>=2){iFocusBtns[1].onmouseover=function(){moveElement('ifocus_piclist',0,-225,5);classNormal('ifocus_btn','ifocus_tx');classCurrent('ifocus_btn','ifocus_tx',1);}}
if(listLength>=3){iFocusBtns[2].onmouseover=function(){moveElement('ifocus_piclist',0,-450,5);classNormal('ifocus_btn','ifocus_tx');classCurrent('ifocus_btn','ifocus_tx',2);}}
if(listLength>=4){iFocusBtns[3].onmouseover=function(){moveElement('ifocus_piclist',0,-675,5);classNormal('ifocus_btn','ifocus_tx');classCurrent('ifocus_btn','ifocus_tx',3);}}}
setInterval('autoiFocus()',5000);var atuokey=false;function autoiFocus(){if(!$('ifocus'))return false;if(atuokey)return false;var focusBtnList=$('ifocus_btn').getElementsByTagName('li');var listLength=focusBtnList.length;for(var i=0;i<listLength;i++){if(focusBtnList[i].className=='b1')var currentNum=i;}
if(currentNum==0&&listLength!=1){moveElement('ifocus_piclist',0,-225,5);classNormal('ifocus_btn','ifocus_tx');classCurrent('ifocus_btn','ifocus_tx',1);}
if(currentNum==1&&listLength!=2){moveElement('ifocus_piclist',0,-450,5);classNormal('ifocus_btn','ifocus_tx');classCurrent('ifocus_btn','ifocus_tx',2);}
if(currentNum==2&&listLength!=3){moveElement('ifocus_piclist',0,-675,5);classNormal('ifocus_btn','ifocus_tx');classCurrent('ifocus_btn','ifocus_tx',3);}
if(currentNum==3){moveElement('ifocus_piclist',0,0,5);classNormal('ifocus_btn','ifocus_tx');classCurrent('ifocus_btn','ifocus_tx',0);}
if(currentNum==1&&listLength==2){moveElement('ifocus_piclist',0,0,5);classNormal('ifocus_btn','ifocus_tx');classCurrent('ifocus_btn','ifocus_tx',0);}
if(currentNum==2&&listLength==3){moveElement('ifocus_piclist',0,0,5);classNormal('ifocus_btn','ifocus_tx');classCurrent('ifocus_btn','ifocus_tx',0);}}
addLoadEvent(iFocusChange);

希望对大家有用

THE END
打赏
海报
公布一个幻灯图片的代码(可以用dede淘宝客)

       公布一个幻灯图片的代码(可以用dede淘宝客)，这段代码的演示详细见:http://www.aiyawe.com, 的正中此代码适用ff3.6，ie6,7,8，也就是说主流的浏览器下均无任何问题。

 

   首先公布样式表

  .body-left-flash {
    FLOAT: left; MARGIN-LEFT: 6px; WIDTH: 478px; HEIGHT: 250px;
    position: absolute;
    *position: absolute !importan;
    *position: absolute;
    left:0px;
    *left: 0px !importan;
    *left:-245px;

<<上一篇
下一篇>>