image-slideshow-5相册程序特效代码

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

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

以下是 image-slideshow-5相册程序特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content="JS代码,相册代码,JS广告代码,JS特效代码" />
<meta name="description" content="此代码内容为image-slideshow-5相册程序，属于站长常用代码" />
<title>image-slideshow-5相册程序</title>
	<link rel="stylesheet" href="css/image-slideshow-5.css" type="text/css">
	<script type="text/javascript" src="js/image-slideshow-5.js">
	</script>
</head>
<body>

<div id="mainContainer">
<!-- Start of slideshow markup -->
<div id="DHTMLgoodies_panel_one">
	<div id="DHTMLgoodies_thumbs">
		<div id="DHTMLgoodies_thumbs_inner">
			<!-- This is where you put your small thumbnails -->
			
			<!-- This is the div for one vertical strip of images -->
			<div class="strip_of_thumbnails">
				<div><a id="firstThumbnailLink" href="#" onclick="showPreview('images/image1_big.jpg',this);return false;"><img src="images/image1.jpg"></a></div>
				<div><a href="#" onclick="showPreview('images/image2_big.jpg',this);return false;"><img src="images/image2.jpg"></a></div>
				<div><a href="#" onclick="showPreview('images/image3_big.jpg',this);return false;"><img src="images/image3.jpg"></a></div>
			</div>	
			<!-- End div for the first vertical strip of thumbnails-->
			<div class="strip_of_thumbnails">
				<div><a href="#" onclick="showPreview('images/image4_big.jpg',this);return false;"><img src="images/image4.jpg"></a></div>
				<div><a href="#" onclick="showPreview('images/image5_big.jpg',this);return false;"><img src="images/image5.jpg"></a></div>
				<div><a href="#" onclick="showPreview('images/image6_big.jpg',this);return false;"><img src="images/image6.jpg"></a></div>
			</div>	
			<div class="strip_of_thumbnails">
				<div><a href="#" onclick="showPreview('images/image7_big.jpg',this);return false;"><img src="images/image7.jpg"></a></div>
				<div><a href="#" onclick="showPreview('images/image8_big.jpg',this);return false;"><img src="images/image8.jpg"></a></div>
				<div><a href="#" onclick="showPreview('images/image9_big.jpg',this);return false;"><img src="images/image9.jpg"></a></div>
			</div>
			<div class="strip_of_thumbnails">
				<div><a href="#" onclick="showPreview('images/image10_big.jpg',this);return false;"><img src="images/image10.jpg"></a></div>
				<div><a href="#" onclick="showPreview('images/image11_big.jpg',this);return false;"><img src="images/image11.jpg"></a></div>
				<div><a href="#" onclick="showPreview('images/image12_big.jpg',this);return false;"><img src="images/image12.jpg"></a></div>
			</div>
			<!-- End where you put your small thumbnails -->
		</div>
	</div>
	<!-- Arrow images - You can change the "src", but not the "id" -->
	<div id="DHTMLgoodies_arrows">
		<img id="DHTMLgoodies_leftArrow" class="leftArrow" src="images/arrow_left.gif">
		<img id="DHTMLgoodies_rightArrow" class="rightArrow" src="images/arrow_right.gif">
	</div>
</div>
<!-- Large image div -->
<div id="DHTMLgoodies_largeImage">
	<!-- Table is used to get both vertical and horizontal center alignment -->
	<table>
		<tr>
			<td>
				<!-- The intial shown image -->
				<img src="images/image1_big.jpg"></a>
			</td>
		</tr>
	</table>
</div>
<!-- End of slideshow markup -->

<div class="clear"></div>
</div>

<p>
  <script type="text/javascript">
initGalleryScript();	// Initialize script
</script>
</p>
</body>
</html>

JS代码(image-slideshow-5.js):

/************************************************************************************************************(C) www.dhtmlgoodies.com,June 2006This is a script from www.dhtmlgoodies.com. You will find this and a lot of other scripts at our website.Terms of use:You are free to use this script as long as the copyright message is kept intact. However,you may notredistribute,sell or repost it without our permission.Thank you!www.dhtmlgoodies.comAlf Magne Kalleland************************************************************************************************************/
var opacitySpeed = 2;
	// Speed of opacity - switching between large images - Lower = fastervar opacitySteps = 10;
	// Also speed of opacity - Higher = fastervar slideSpeed = 5;
	// Speed of thumbnail slide - Lower = fastervar slideSteps = 8;
	// Also speed of thumbnail slide - Higher = fastervar columnsOfThumbnails = 4;
	// Hardcoded number of thumbnail columns,use false if you want the script to figure it out dynamically./* Don't change anything below here */
var DHTMLgoodies_largeImage = false;
	var DHTMLgoodies_imageToShow = false;
	var DHTMLgoodies_currentOpacity = 100;
	var DHTMLgoodies_slideWidth = false;
	var DHTMLgoodies_thumbTotalWidth = false;
	var DHTMLgoodies_viewableWidth = false;
	var currentUnqiueOpacityId = false;
	var DHTMLgoodies_currentActiveImage = false;
	var DHTMLgoodies_thumbDiv = false;
	var DHTMLgoodies_thumbSlideInProgress = false;
	var browserIsOpera = navigator.userAgent.indexOf('Opera')>=0?true:false;
	var leftArrowObj;
	var rightArrowObj;
	var thumbsColIndex = 1;
	var thumbsLeftPos = false;
	function initGalleryScript(){
	leftArrowObj = document.getElementById('DHTMLgoodies_leftArrow');
	leftArrowObj.style.visibility='hidden';
	rightArrowObj = document.getElementById('DHTMLgoodies_rightArrow');
	leftArrowObj.style.cursor = 'pointer';
	rightArrowObj.style.cursor = 'pointer';
	leftArrowObj.onclick = moveThumbnails;
	rightArrowObj.onclick = moveThumbnails;
	DHTMLgoodies_largeImage = document.getElementById('DHTMLgoodies_largeImage').getElementsByTagName('IMG')[0];
	var innerDiv = document.getElementById('DHTMLgoodies_thumbs_inner');
	DHTMLgoodies_slideWidth = innerDiv.getElementsByTagName('DIV')[0].offsetWidth;
	DHTMLgoodies_thumbDiv = document.getElementById('DHTMLgoodies_thumbs_inner');
	DHTMLgoodies_thumbDiv.style.left = '0px';
	var subDivs = DHTMLgoodies_thumbDiv.getElementsByTagName('DIV');
	DHTMLgoodies_thumbTotalWidth = 0;
	var tmpLeft = 0;
	for(var no=0;
	no<subDivs.length;
	no++){
	if(subDivs[no].className=='strip_of_thumbnails'){
	DHTMLgoodies_thumbTotalWidth = DHTMLgoodies_thumbTotalWidth + DHTMLgoodies_slideWidth;
	subDivs[no].style.left = tmpLeft + 'px';
	subDivs[no].style.top = '0px';
	tmpLeft = tmpLeft + subDivs[no].offsetWidth;
}
}
DHTMLgoodies_viewableWidth = document.getElementById('DHTMLgoodies_thumbs').offsetWidth;
	DHTMLgoodies_currentActiveImage = DHTMLgoodies_thumbDiv.getElementsByTagName('A')[0].getElementsByTagName('IMG')[0];
	DHTMLgoodies_currentActiveImage.className='activeImage';
}
function moveThumbnails(){
	if(DHTMLgoodies_thumbSlideInProgress)return;
	DHTMLgoodies_thumbSlideInProgress = true;
	if(this.id=='DHTMLgoodies_leftArrow'){
	thumbsColIndex--;
	rightArrowObj.style.visibility='visible';
	if(DHTMLgoodies_thumbDiv.style.left.replace('px','')/1>=0){
	leftArrowObj.style.visibility='hidden';
	DHTMLgoodies_thumbSlideInProgress = false;
	return;
}
slideThumbs(slideSteps,0);
}
else{
	thumbsColIndex++;
	leftArrowObj.style.visibility='visible';
	var left = DHTMLgoodies_thumbDiv.style.left.replace('px','')/1;
	var showArrow = true;
	if(DHTMLgoodies_thumbTotalWidth + left - DHTMLgoodies_slideWidth <= DHTMLgoodies_viewableWidth)showArrow = false;
	if(columnsOfThumbnails)showArrow = true;
	if(!showArrow){
	rightArrowObj.style.visibility='hidden';
	DHTMLgoodies_thumbSlideInProgress = false;
	return;
}
slideThumbs((slideSteps*-1),0);
}
}
function slideThumbs(speed,currentPos){
	var leftPos;
	if(thumbsLeftPos){
	leftPos= thumbsLeftPos;
}
else{
	var leftPos = DHTMLgoodies_thumbDiv.style.left.replace('px','')/1;
	thumbsLeftPos = leftPos;
}
currentPos = currentPos + Math.abs(speed);
	var tmpLeftPos = leftPos;
	leftPos = leftPos + speed;
	thumbsLeftPos = leftPos;
	DHTMLgoodies_thumbDiv.style.left = leftPos + 'px';
	if(currentPos<DHTMLgoodies_slideWidth)setTimeout('slideThumbs(' + speed + ',' + currentPos + ')',slideSpeed);
	else{
	if(tmpLeftPos>=0 || (columnsOfThumbnails && thumbsColIndex==1)){
	document.getElementById('DHTMLgoodies_leftArrow').style.visibility='hidden';
}
var left = tmpLeftPos;
	var showArrow = true;
	if(DHTMLgoodies_thumbTotalWidth + left - DHTMLgoodies_slideWidth <= DHTMLgoodies_viewableWidth)showArrow=false;
	if(columnsOfThumbnails){
	if((thumbsColIndex+1)<columnsOfThumbnails)showArrow=true;
	else showArrow = false;
}
if(!showArrow){
	document.getElementById('DHTMLgoodies_rightArrow').style.visibility='hidden';
}
DHTMLgoodies_thumbSlideInProgress = false;
}
}
function showPreview(imagePath,inputObj){
	if(DHTMLgoodies_currentActiveImage){
	if(DHTMLgoodies_currentActiveImage==inputObj.getElementsByTagName('IMG')[0])return;
	DHTMLgoodies_currentActiveImage.className='';
}
DHTMLgoodies_currentActiveImage = inputObj.getElementsByTagName('IMG')[0];
	DHTMLgoodies_currentActiveImage.className='activeImage';
	DHTMLgoodies_imageToShow = imagePath;
	var tmpImage = new Image();
	tmpImage.src = imagePath;
	currentUnqiueOpacityId = Math.random();
	moveOpacity(opacitySteps*-1,currentUnqiueOpacityId);
}
function setOpacity(){
	if(document.all){
	DHTMLgoodies_largeImage.style.filter = 'alpha(opacity=' + DHTMLgoodies_currentOpacity + ')';
}
else{
	DHTMLgoodies_largeImage.style.opacity = DHTMLgoodies_currentOpacity/100;
}
}
function moveOpacity(speed,uniqueId){
	if(browserIsOpera){
	DHTMLgoodies_largeImage.src = DHTMLgoodies_imageToShow;
	return;
}
DHTMLgoodies_currentOpacity = DHTMLgoodies_currentOpacity + speed;
	if(DHTMLgoodies_currentOpacity<=5 && speed<0){
	var tmpParent = DHTMLgoodies_largeImage.parentNode;
	DHTMLgoodies_largeImage.parentNode.removeChild(DHTMLgoodies_largeImage);
	DHTMLgoodies_largeImage = document.createElement('IMG');
	tmpParent.appendChild(DHTMLgoodies_largeImage);
	setOpacity();
	DHTMLgoodies_largeImage.src = DHTMLgoodies_imageToShow;
	speed=opacitySteps;
}
if(DHTMLgoodies_currentOpacity>=99 && speed>0)DHTMLgoodies_currentOpacity=99;
	setOpacity();
	if(DHTMLgoodies_currentOpacity>=99 && speed>0)return;
	if(uniqueId==currentUnqiueOpacityId)setTimeout('moveOpacity(' + speed + ',' + uniqueId + ')',opacitySpeed);
}

CSS代码(image-slideshow-5.css):

body{margin:0px;margin-top:25px;width:100%;text-align:center;background-color:#E2EBED;font-family:Trebuchet MS,Lucida Sans Unicode,Arial,sans-serif;}
#mainContainer{margin:0 auto;width:730px;text-align:left;background-color:#FFF;padding:3px;border:3px solid #317082;}
.clear{clear:both;}
/* End of demo CSS */
#DHTMLgoodies_panel_one,#DHTMLgoodies_arrows,#DHTMLgoodies_thumbs{/* Width of divs for thumbnails */
width:240px;}
#DHTMLgoodies_panel_one{float:left;}
#DHTMLgoodies_thumbs{overflow:hidden;/* Don't change this */
height:280px;/* Height of thumbnail div */
position:relative;/* Never change this */
float:left;}
#DHTMLgoodies_largeImage{/* Large image div */
width:400px;/* Width of large image div */
height:310px;/* Height of large image div */
float:left;padding-left:10px;/* "Air" */
padding-right:10px;}
#DHTMLgoodies_largeImage table{/* Used table to get both horizontal and vertical center alignement of large image */
width:100%;height:100%;text-align:center;}
#DHTMLgoodies_largeImage img{/* Large image */
border:5px solid #317082;/* Border around large image */
}
.strip_of_thumbnails{/* A vertical strip of thumbnails */
width:114px;/* Width of strip */
padding:5px;/* "Air" inside filmstrip div */
position:absolute;}
.strip_of_thumbnails div{width:110px;height:90px;padding:2px;text-align:center;}
.strip_of_thumbnails img{border:0px;padding:5px;}
.strip_of_thumbnails .activeImage{/* Active thumbnail */
border:5px solid #317082;/* Green border around active thumbnail */
padding:0px;}
.leftArrow{float:left;}
.rightArrow{float:right;}
#DHTMLgoodies_thumbs_inner{position:relative;/* Never change this */
width:1000px;}

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