圖片輪換（圖片展示）源碼--總結篇

圖片輪換效果一：

 

源碼：

1、scroll.js
function show_selector_menu(select_menu_id){ var select_menu = $(select_menu_id); if( select_menu.style.visibility == "inherit"){ var menu_content = select_menu.firstChild; if(navigator.userAgent.indexOf('MSIE')>=0){ menu_content.style.marginBottom = "0"; var select_menu_height = select_menu.offsetHeight; var timer = setInterval( function(){ var marginb = parseInt(menu_content.style.marginBottom); if( marginb<=parseInt("-"+select_menu_height) ){ menu_content.style.marginBottom = "0"; select_menu.style.visibility = "hidden"; clearInterval(timer); }else{ menu_content.style.marginBottom = (marginb-20)+"px"; } } ,1); }else{ select_menu.style.visibility = "hidden"; } }else{ var menu_content = select_menu.firstChild; if(navigator.userAgent.indexOf('MSIE')>=0){ menu_content.style.marginBottom = "-"+ select_menu.offsetHeight+"px"; var timer = setInterval( function(){ var marginb = parseInt(menu_content.style.marginBottom); if(marginb>=0){ menu_content.style.marginBottom = "0"; clearInterval(timer); }else{ menu_content.style.marginBottom = (marginb+20)+"px"; } } ,1); } selector_is_clicked[select_menu_id] = true; select_menu.style.visibility = "inherit"; } } var showImageIndex = -1; var imageTimer; function showImage(imageIndex) { var flash_img_div = document.getElementById("flash_img"); var flash_title = document.getElementById("flash_title"); if(imageIndex>fImgs.length-1){ imageIndex = 0; } if(!fImgs[imageIndex] || imageIndex==showImageIndex) return false; var imgId = "__fImg"+imageIndex; flash_img_div.filters && flash_img_div.filters[0].Apply(); for(i=0; i<flash_img_div.childNodes.length; i++){ flash_img_div.childNodes[i].style.display = "none"; } if( document.getElementById(imgId) ){ var imga = document.getElementById(imgId); imga.style.display = "block"; if(imga.tagName=="OBJECT"){ imga.rewind(); imga.Play(); } }else{ var pos = fImgs[imageIndex].img.lastIndexOf("."); if( fImgs[imageIndex].img.substr(pos+1).substr(0,3).toLowerCase()=="swf" ){ flash_img_div.innerHTML += '/ <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="320" height="240" id="'+imgId+'">/ <param name="movie" value="'+fImgs[imageIndex].img+'" />/ <param name="quality" value="high" />/ <embed src="'+fImgs[imageIndex].img+'" mce_src="'+fImgs[imageIndex].img+'" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="320" height="240"></embed>/ </object>'; }else{ var img = new Image(); img.border = "0"; img.src = fImgs[imageIndex].img; img.width = "320"; img.height = "240"; var a = document.createElement("a"); a.href = fImgs[imageIndex].href; a.target = "_blank"; a.id = imgId; a.appendChild(img); flash_img_div.appendChild(a); } } flash_img_div.filters && flash_img_div.filters[0].Play(); var flash_show_ctl_msg = document.getElementById("flash_show_ctl_msg"); flash_show_ctl_msg.filters && flash_show_ctl_msg.filters[0].Apply(); flash_title.href = fImgs[imageIndex].href; flash_title.innerHTML = fImgs[imageIndex].title; flash_show_ctl_msg.filters && flash_show_ctl_msg.filters[0].Play(); showImageIndex = imageIndex; return true; } function imagePlay() { if(imageTimer) return; if(showImageIndex>=fImgs.length-1){ showImageIndex = -1; } showImage(showImageIndex+1); imageTimer = setInterval(function(){ var stat = showImage(showImageIndex+1); if(!stat){ stop(); } },7000); } function stop(){ clearInterval(imageTimer); imageTimer = null; } function showNextImage(){ showImage(showImageIndex+1); } function showPrevImage(){ showImage(showImageIndex-1); }

 

 

2、css.css

BODY {FONT-SIZE: 8pt; MARGIN: 0px; COLOR: #cb6080; BACKGROUND-REPEAT: repeat-x; FONT-FAMILY: Tahoma, "新宋體", "宋體"; BACKGROUND-COLOR: #fff;} .li_dot {FONT-SIZE: 12px; COLOR: #ed1264; FONT-FAMILY: Webdings} #flash_show_out {MARGIN-TOP: 5px; FLOAT: left; WIDTH: 322px;} #flash_show {BORDER-TOP-WIDTH: 4px; PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BORDER-LEFT-WIDTH: 4px; BORDER-BOTTOM-WIDTH: 4px; PADDING-BOTTOM: 0px; PADDING-TOP: 0px; POSITION: relative; HEIGHT: 240px; TEXT-ALIGN: center; BORDER-RIGHT-WIDTH: 4px} #flash_img {BORDER-RIGHT: #f27e96 1px solid; BORDER-TOP: #f27e96 1px solid; FILTER: progid:DXImageTransform.Microsoft.Fade(Overlap=1.00); OVERFLOW: hidden; BORDER-LEFT: #f27e96 1px solid; WIDTH: 320px; BORDER-BOTTOM: #f27e96 1px solid; HEIGHT: 100%} #flash_btn {LEFT: 1px; POSITION: absolute; TOP: 165px} #flash_btn DIV {MARGIN: 5px} #flash_show_ctl {PADDING-RIGHT: 0px; MARGIN-TOP: 2px; PADDING-LEFT: 0px; PADDING-BOTTOM: 3px; COLOR: #434343; PADDING-TOP: 3px; HEIGHT: 16px} #flash_show_ctl A {COLOR: #434343} #flash_show_ctl_msg {FILTER: progid:DXImageTransform.Microsoft.Fade(Overlap=1.00); FLOAT: left; OVERFLOW: hidden; WIDTH: 289px} #flash_show_ctl_tuber {Z-INDEX: 100; LEFT: 305px; POSITION: relative; TOP: -17px} #flash_show_ctl_arrow {MARGIN-RIGHT: 5px}

 

3.index.html

<html> <head> <title>)</title> <link href="css/css.css" mce_href="css/css.css" rel="stylesheet" type="text/css"> <SCRIPT src="js/scroll.js" mce_src="js/scroll.js" type=text/javascript></SCRIPT> </head> <body> <div id=flash_show_out> <!--flash幻燈展示開始--> <div id=flash_show> <div id=flash_img></div> <div id=flash_btn> <div><a onClick="javascript:showImage(0);return false;" href="#" target=_self><img height=13 alt=第1幅 src="images/flash_btn_1.gif" width=13 border=0></a></div> <div><a onClick="javascript:showImage(1);return false;" href="#" target=_self><img height=13 alt=第2幅 src="images/flash_btn_2.gif" width=13 border=0></a></div> <div><a onClick="javascript:showImage(2);return false;" href="#" target=_self><img height=13 alt=第3幅 src="images/flash_btn_3.gif" width=13 border=0></a></div> <div><a onClick="javascript:showImage(3);return false;" href="#" target=_self><img height=13 alt=第4幅 src="images/flash_btn_4.gif" width=13 border=0></a></div> </div> </div> <!--flash幻燈展示結束--> <!--flash幻燈展示控制開始--> <div id=flash_show_ctl> <div id=flash_show_ctl_msg><span class=li_dot>4</span><a id=flash_title href="#"></a> </div> <div style="PADDING-TOP: 2px" mce_style="PADDING-TOP: 2px"><a id=img_prev_btn onClick="showPrevImage();return false;" href="#" mce_href="#" target=_self><img height=12 alt=上一頁 src="images/flash_back.gif" width=11 border=0></a> <a id=img_next_btn onClick=" showNextImage();return false;" href="#" target=_self><img height=12 alt=下一頁 src="images/flash_next.gif" width=11 border=0></a> </div> </div> <mce:script language=javascript type=text/javascript><!-- var fImgs = new Array(); fImgs[0] = {title:"2007年早春流行淑女風格針織衫搭配",img:"images/01.jpg",href:"#"}; fImgs[1] = {title:"男人到底要淑女還是選妖精？",img:"images/02.jpg",href:"#"}; fImgs[2] = {title:"香港時裝週預熱新風尚",img:"images/03.jpg",href:"#"}; fImgs[3] = {title:"如何保持你對男人的吸引力 ",img:"images/04.jpg",href:"#"}; imagePlay(); // --></mce:script> <!--flash幻燈展示控制結束--> </div> </body> </html>   

 

很普通的那種，純js作品，唯一不足是數據和圖片的控制需在JS中進行，不太喜歡···