POCO网四屏图片轮换广告代码轮播滚动切换特效

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 POCO网四屏图片轮换广告代码轮播滚动切换特效的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2242">
<meta name="keywords" content="JS代码,焦点图,JS广告代码,JS特效代码" />
<meta name="description" content="此代码内容为POCO网四屏图片轮换广告代码" />
<title>POCO网四屏图片轮换广告代码</title>
<link href="css/css.css" rel="stylesheet" type="text/css">
<script src="js/scroll.js" type=text/javascript></script>
</head>
<body><div align="center"><br><br>

<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>
        <div align="left"><span class=li_dot>4</span><a id=flash_title 
href="#"></a> </div>
      </div>
      <div style="PADDING-TOP: 2px"><a id=img_prev_btn 
onClick="showPrevImage();return false;" 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>
<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();
</script>
<!--flash幻灯展示控制结束-->
</div>
</div>
</body>
</html>

JS代码(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+'" 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);
}

CSS代码(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;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}

附件:下载该文件资源,减少时间成本(增值服务)