9屏切换竖焦点图代码轮播滚动切换特效代码

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

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

以下是 9屏切换竖焦点图代码轮播滚动切换特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!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" />
<meta name="keywords" content="JS代码,焦点图,JS广告代码,JS特效代码" />
<meta name="description" content="此代码内容为9屏切换竖焦点图代码，属于站长常用代码" />
<title>9屏切换竖焦点图代码</title>
<script language=javascript src="js/changimages.js"></script>

<style type=text/css>
body{font-size:12px}
.pic_show {PADDING-RIGHT: 10px; DISPLAY: inline; PADDING-LEFT: 0px; BACKGROUND: url(images/bg_show.gif) no-repeat right top; FLOAT: left; PADDING-BOTTOM: 12px; MARGIN: 3px 0px 0px 17px; WIDTH: 247px; PADDING-TOP: 8px; HEIGHT: 323px
}
</style>
</head>
<body><br>
<table width="300" height="496" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td width="376" height="362" align="center"><div class=pic_show>
      <div id=imgADPlayer></div>
      <script> 
				PImgPlayer.addItem( "", "#", "images/01.jpg"); 
				PImgPlayer.addItem( "", "#", "images/02.jpg"); 
				PImgPlayer.addItem( "", "#", "images/03.jpg"); 
				PImgPlayer.addItem( "", "#", "images/04.jpg"); 
				PImgPlayer.addItem( "", "#", "images/05.jpg"); 
				PImgPlayer.addItem( "", "#", "images/06.jpg"); 
				PImgPlayer.addItem( "", "#", "images/07.jpg"); 
				PImgPlayer.addItem( "", "#", "images/08.jpg"); 
				PImgPlayer.addItem( "", "#", "images/09.jpg"); 
		  
		PImgPlayer.init( "imgADPlayer", 247, 323 );   
	</script>
    </div></td>
  </tr>
</table>
<p align="center"></p>
<p align="center"></p>
<p align="center"></p>
<p>&nbsp;</p>
</body></html>

JS代码(changimages.js):

/**************************************************����:ͼƬ�ֲ�������ʱ��:2007-11-12ʾ��:ҳ�����Ѿ�������ΪimgPlayer(���߱��IDҲ��)�Ľڵ�. PImgPlayer.addItem( "test","http://kxgw8.cn","http://kxgw8.cn/images/wy.jpg");
	PImgPlayer.addItem( "test2","http://kxgw8.cn","http://kxgw8.cn/images/wy.jpg");
	PImgPlayer.addItem( "test3","http://kxgw8.cn","http://kxgw8.cn/images/wy.jpg");
	PImgPlayer.init( "imgPlayer",200,230 );
	��ע:������һ��ҳ��ֻ��һ��ͼƬ�ֲ��ĵط�.***************************************************/
var PImgPlayer ={
	_timer:null,_items:[],_container:null,_index:0,_imgs:[],intervalTime:3500,//�ֲ����ʱ�� init:function( objID,w,h,time ){
	this.intervalTime = time || this.intervalTime;
	this._container = document.getElementById( objID );
	this._container.style.display = "block";
	this._container.style.width = w + "px";
	this._container.style.height = h + "px";
	this._container.style.position = "relative";
	this._container.style.overflow = "hidden";
	//this._container.style.border = "1px solid #fff";
	var linkStyle = "display:block;
	TEXT-DECORATION:none;
	";
	if( document.all ){
	linkStyle += "FILTER:";
	linkStyle += "progid:DXImageTransform.Microsoft.Barn(duration=0.5,motion='out',orientation='vertical') ";
	linkStyle += "progid:DXImageTransform.Microsoft.Barn ( duration=0.5,motion='out',orientation='horizontal') ";
	linkStyle += "progid:DXImageTransform.Microsoft.Blinds ( duration=0.5,bands=10,Direction='down' )";
	linkStyle += "progid:DXImageTransform.Microsoft.CheckerBoard()";
	linkStyle += "progid:DXImageTransform.Microsoft.Fade(duration=0.5,overlap=0)";
	linkStyle += "progid:DXImageTransform.Microsoft.GradientWipe ( duration=1,gradientSize=1.0,motion='reverse' )";
	linkStyle += "progid:DXImageTransform.Microsoft.Inset ()";
	linkStyle += "progid:DXImageTransform.Microsoft.Iris ( duration=1,irisStyle=PLUS,motion=out )";
	linkStyle += "progid:DXImageTransform.Microsoft.Iris ( duration=1,irisStyle=PLUS,motion=in )";
	linkStyle += "progid:DXImageTransform.Microsoft.Iris ( duration=1,irisStyle=DIAMOND,motion=in )";
	linkStyle += "progid:DXImageTransform.Microsoft.Iris ( duration=1,irisStyle=SQUARE,motion=in )";
	linkStyle += "progid:DXImageTransform.Microsoft.Iris ( duration=0.5,irisStyle=STAR,motion=in )";
	linkStyle += "progid:DXImageTransform.Microsoft.RadialWipe ( duration=0.5,wipeStyle=CLOCK )";
	linkStyle += "progid:DXImageTransform.Microsoft.RadialWipe ( duration=0.5,wipeStyle=WEDGE )";
	linkStyle += "progid:DXImageTransform.Microsoft.RandomBars ( duration=0.5,orientation=horizontal )";
	linkStyle += "progid:DXImageTransform.Microsoft.RandomBars ( duration=0.5,orientation=vertical )";
	linkStyle += "progid:DXImageTransform.Microsoft.RandomDissolve ()";
	linkStyle += "progid:DXImageTransform.Microsoft.Spiral ( duration=0.5,gridSizeX=16,gridSizeY=16 )";
	linkStyle += "progid:DXImageTransform.Microsoft.Stretch ( duration=0.5,stretchStyle=PUSH )";
	linkStyle += "progid:DXImageTransform.Microsoft.Strips ( duration=0.5,motion=rightdown )";
	linkStyle += "progid:DXImageTransform.Microsoft.Wheel ( duration=0.5,spokes=8 )";
	linkStyle += "progid:DXImageTransform.Microsoft.Zigzag ( duration=0.5,gridSizeX=4,gridSizeY=40 );
	width:100%;
	height:100%";
}
// var ulStyle = "margin:0;
	width:"+w+"px;
	position:absolute;
	z-index:999;
	right:5px;
	FILTER:Alpha(Opacity=50,FinishOpacity=50,Style=1);
	overflow:hidden;
	bottom:-1px;
	height:16px;
	border-right:1px solid #fff;
	";
	// var liStyle = "margin:0;
	list-style-type:none;
	margin:0;
	padding:0;
	float:right;
	";
	// var baseSpacStyle = "clear:both;
	display:block;
	width:23px;
	line-height:18px;
	font-size:12px;
	FONT-FAMILY:'����';
	opacity:0.6;
	";
	baseSpacStyle += "border:1px solid #fff;
	border-right:0;
	border-bottom:0;
	";
	baseSpacStyle += "color:#fff;
	text-align:center;
	cursor:pointer;
	";
	// var ulHTML = "";
	for(var i = this._items.length -1;
	i >= 0;
	i--){
	var spanStyle = "";
	if( i==this._index ){
	spanStyle = baseSpacStyle + "background:#ff0000;
	";
}
else{
	spanStyle = baseSpacStyle + "background:#000;
	";
}
ulHTML += "<li style=\""+liStyle+"\">";
	ulHTML += "<span onmouseover=\"PImgPlayer.mouseOver(this);
	\" onmouseout=\"PImgPlayer.mouseOut(this);
	\" style=\""+spanStyle+"\" onclick=\"PImgPlayer.play("+i+");
	return false;
	\" herf=\"javascript:;
	\" title=\"" + this._items[i].title + "\">" + (i+1) + "</span>";
	ulHTML += "</li>";
}
// var html = "<a href=\""+this._items[this._index].link+"\" title=\""+this._items[this._index].title+"\" target=\"_blank\" style=\""+linkStyle+"\"></a><ul style=\""+ulStyle+"\">"+ulHTML+"</ul>";
	this._container.innerHTML = html;
	var link = this._container.getElementsByTagName("A")[0];
	link.style.width = w + "px";
	link.style.height = h + "px";
	link.style.background = 'url(' + this._items[0].img + ') no-repeat center center';
	// this._timer = setInterval( "PImgPlayer.play()",this.intervalTime );
}
,addItem:function( _title,_link,_imgURL ){
	this._items.push ({
	title:_title,link:_link,img:_imgURL}
);
	var img = new Image();
	img.src = _imgURL;
	this._imgs.push( img );
}
,play:function( index ){
	if( index!=null ){
	this._index = index;
	clearInterval( this._timer );
	this._timer = setInterval( "PImgPlayer.play()",this.intervalTime );
}
else{
	this._index = this._index<this._items.length-1 ? this._index+1:0;
}
var link = this._container.getElementsByTagName("A")[0];
	if(link.filters){
	var ren = Math.floor(Math.random()*(link.filters.length));
	link.filters[ren].Apply();
	link.filters[ren].play();
}
link.href = this._items[this._index].link;
	link.title = this._items[this._index].title;
	link.style.background = 'url(' + this._items[this._index].img + ') no-repeat center center';
	// var liStyle = "margin:0;
	list-style-type:none;
	margin:0;
	padding:0;
	float:right;
	";
	var baseSpacStyle = "clear:both;
	display:block;
	width:23px;
	line-height:18px;
	font-size:12px;
	FONT-FAMILY:'����';
	opacity:0.6;
	";
	baseSpacStyle += "border:1px solid #fff;
	border-right:0;
	border-bottom:0;
	";
	baseSpacStyle += "color:#fff;
	text-align:center;
	cursor:pointer;
	";
	var ulHTML = "";
	for(var i = this._items.length -1;
	i >= 0;
	i--){
	var spanStyle = "";
	if( i==this._index ){
	spanStyle = baseSpacStyle + "background:#ff0000;
	";
}
else{
	spanStyle = baseSpacStyle + "background:#000;
	";
}
ulHTML += "<li style=\""+liStyle+"\">";
	ulHTML += "<span onmouseover=\"PImgPlayer.mouseOver(this);
	\" onmouseout=\"PImgPlayer.mouseOut(this);
	\" style=\""+spanStyle+"\" onclick=\"PImgPlayer.play("+i+");
	return false;
	\" herf=\"javascript:;
	\" title=\"" + this._items[i].title + "\">" + (i+1) + "</span>";
	ulHTML += "</li>";
}
this._container.getElementsByTagName("UL")[0].innerHTML = ulHTML;
}
,mouseOver:function(obj){
	var i = parseInt( obj.innerHTML );
	if( this._index!=i-1){
	obj.style.color = "#ff0000";
}
}
,mouseOut:function(obj){
	obj.style.color = "#fff";
}
}

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