javascript 投影片代碼效果

來源:互聯網
上載者:User
提示:您可以先修改部分代碼再運行

<!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=gb2312" /><title>無標題文檔</title><script>//首頁投影片的代碼function Slide_Img(SlideImg,HOVER,delay)//投影片的ID號 變換後的樣式名 從第幾個開始 淡出淡入的單位時間 單位時間裡次淡出淡入多少個百分比 間隔時間{var farther=document.getElementById(SlideImg);var childer=farther.getElementsByTagName("ul");var scroll_img=childer[0];//定位元影像片節點var scroll_NO=childer[1];//定位元字串連節點var HOVER=HOVER-1;var scroll_img_childer=childer[0].getElementsByTagName("li");var scroll_NO_childer=childer[1].getElementsByTagName("li");//給數字串連的子項目添加IDfor(i=0;i<scroll_NO_childer.length;i++){scroll_NO_childer[i].id="N"+i;}scroll_NO_childer[HOVER].className="hover";//給圖片的子項目添加IDfor(i=0;i<scroll_NO_childer.length;i++){scroll_img_childer[i].id="I"+i;}scroll_img_childer[HOVER].className="hover";function hidde_show(hidde,show){if(scroll_img_childer[show].getElementsByTagName("img").length==0){scroll_img_childer[show].getElementsByTagName("a")[0].innerHTML=''}scroll_NO_childer[hidde].className="";scroll_img_childer[hidde].className="";scroll_NO_childer[show].className="hover";scroll_img_childer[show].className="hover";}function Sliding(){//投影片動作函數for(i=0;i<scroll_NO_childer.length;i++){if(scroll_NO_childer[i].className=="hover"){HOVER=i+1;}if(HOVER==scroll_NO_childer.length){HOVER=0;}OUT=HOVER-1;if(OUT<0){OUT=scroll_NO_childer.length-1;}} hidde_show(OUT,HOVER)}outTime=setInterval(Sliding,delay);var img_onmouseover=function(){clearInterval(outTime);outTime=setInterval(Sliding,delay);}var no_onmouseover=function(){clearTimeout(outTime);N0_ID=this.id.slice(1); for(i=0;i<scroll_NO_childer.length;i++){scroll_NO_childer[i].className=""; scroll_img_childer[i].className="";}if(scroll_img_childer[N0_ID].getElementsByTagName("img").length==0){scroll_img_childer[N0_ID].getElementsByTagName("a")[0].innerHTML='';} scroll_NO_childer[N0_ID].className="hover"; scroll_img_childer[N0_ID].className="hover";outTime=setInterval(Sliding,delay);}for(i=0;i<scroll_NO_childer.length;i++){scroll_img_childer[i].onmouseover=img_onmouseover;scroll_NO_childer[i].onmouseover=no_onmouseover;}}</script><style>/*首頁滾動*/.index_line_1_left {BORDER-RIGHT: #e3e3e3 1px solid; BORDER-TOP: #e3e3e3 1px solid; BACKGROUND: url(/img/sy/i_line_1_l.jpg) repeat-x 50% bottom; BORDER-LEFT: #e3e3e3 1px solid; WIDTH: 685px; BORDER-BOTTOM: #e3e3e3 1px solid; HEIGHT: 348px; margin-bottom:5px;}.scrollImg {PADDING-RIGHT: 1px; PADDING-LEFT: 1px; PADDING-BOTTOM: 1px; OVERFLOW: hidden; WIDTH: 680px; PADDING-TOP: 1px; POSITION: relative; HEIGHT: 248px}.scrollImg .SlideImg_pic A.pic_link {DISPLAY: block; BACKGROUND: url(/img/sy/ajax-loader.gif) no-repeat center center; OVERFLOW: hidden; WIDTH: 680px; HEIGHT: 215px}.scrollImg IMG {DISPLAY: block; WIDTH: 685px; BORDER-TOP-STYLE: none; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; HEIGHT: 215px; BORDER-BOTTOM-STYLE: none}.scrollImg SPAN {PADDING-RIGHT: 0px; DISPLAY: block; PADDING-LEFT: 20px; FONT-SIZE: 14px; BACKGROUND: url(/img/sy/ico.gif) no-repeat 9px -818px; PADDING-BOTTOM: 0px; LINE-HEIGHT: 31px; PADDING-TOP: 0px; HEIGHT: 34px; text-align:left;}.scrollImg .SlideImg_pic LI {DISPLAY: none}.scrollImg .SlideImg_pic LI.hover {DISPLAY: block}.scrollImg .SlideImg_no {RIGHT: 2px; WIDTH: 126px; BOTTOM: 39px; POSITION: absolute; HEIGHT: 18px}.scrollImg .SlideImg_no LI {BORDER-RIGHT: #f47500 1px solid; BORDER-TOP: #f47500 1px solid; DISPLAY: block; FONT-SIZE: 12px; BACKGROUND: #fcf2cf; FLOAT: left; MARGIN: 0px 3px 0px 0px; OVERFLOW: hidden; BORDER-LEFT: #f47500 1px solid; WIDTH: 16px; CURSOR: pointer; COLOR: #d94b01; LINE-HEIGHT: 17px; BORDER-BOTTOM: #f47500 1px solid; HEIGHT: 16px; TEXT-ALIGN: center}.scrollImg .SlideImg_no LI EM {DISPLAY: none}.scrollImg .SlideImg_no LI.hover {FONT-WEIGHT: bold; BACKGROUND: #ffb442; COLOR: #fff}.scrollImg_2 {POSITION: relative; HEIGHT: 97px}.scrollImg_2_content {LEFT: 12px; OVERFLOW: hidden; WIDTH: 680px; POSITION: absolute; TOP: 12px; HEIGHT: 77px}.scrollImg_2_content UL {HEIGHT: 77px}.scrollImg_2_content LI {BORDER-RIGHT: #e3e3e3 1px solid; BORDER-TOP: #e3e3e3 1px solid; BACKGROUND: #fff; FLOAT: left; MARGIN: 0px 10px 0px 0px; OVERFLOW: hidden; BORDER-LEFT: #e3e3e3 1px solid; WIDTH: 156px; BORDER-BOTTOM: #e3e3e3 1px solid; HEIGHT: 75px}.scrollImg_2_content LI A {DISPLAY: block; WIDTH: 156px; HEIGHT: 75px}.scrollImg_2_content LI IMG {PADDING-RIGHT: 1px; DISPLAY: block; PADDING-LEFT: 1px; PADDING-BOTTOM: 1px; WIDTH: 154px; BORDER-TOP-STYLE: none; PADDING-TOP: 1px; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; HEIGHT: 73px; BORDER-BOTTOM-STYLE: none}</style></head><body><!--首頁投影片代碼開始 --> <DIV class=scrollImg id=SlideImg> <UL class=SlideImg_pic> <LI><SPAN>勁爆促銷100M獨享頻寬9999元/年起</sPAN> <LI><SPAN>本月租用酷睿伺服器免費升級2G記憶體500G硬碟</sPAN> <LI><SPAN>傾情巨獻浙江麗水電信託管3999元/年</sPAN> <LI><SPAN>浙江VIP雙線Q9300特價促銷7500元/年</sPAN> </uL> <UL class=SlideImg_no> <LI>1<EM>img/b1.jpg</eM> </lI> <LI>2<EM>img/b2.jpg</eM> </lI> <LI>3<EM>img/b3.jpg</eM> </lI> <LI>4<EM>img/b4.jpg</eM> </lI> </uL></dIV> <SCRIPT type=text/javascript>Slide_Img('SlideImg',1,5000)</sCRIPT><!--首頁投影片代碼結束 --></body></html>
提示:您可以先修改部分代碼再運行

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.