baiquejysd
发表于 2009-3-7 14:06
快乐一游
发表于 2009-3-7 14:17
回复看看有代码没有?
小小蘑菇
发表于 2009-3-23 16:18
这个效果真的不错~偶喜欢,简简单单~
小书童
发表于 2009-3-31 20:47
感觉不错
能否公布代码
小书童
发表于 2009-3-31 20:50
<TABLE style=\"LEFT: 0px; WIDTH: 605px; POSITION: relative; TOP: 170px\" cellSpacing=0 cellPadding=10 width=\"100%\"><TBODY><TR><TD width=\"100%\"><DIV align=center><IFRAME marginWidth=0 marginHeight=0 src=http://static4.ci123.com/photo/original/2879/477227a590beb9f2a3bcbf6aca620a1b.jpg frameBorder=0 width=605 scrolling=no height=450></IFRAME></div></td></tr></table><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></div>
[ 本帖最后由 小书童 于 2009-3-31 20:52 编辑 ]
依香卧翠眠
发表于 2009-4-3 18:36
<html>
<head>
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=gb2312\" />
<TITLE></TITLE>
<STYLE type=\"text/css\">
#imageSlideshowHolder{
/* This is a CSS hack in order to get a nice look in IE 5.5 and lower In these versions of Internet Explorer, we need to add borders and padding to the width. In this example, we have a 3 pixelborder on all sides. This means that the width in IE5.5 should be 606 pixels(600 + border 3px on the left + border 3 px on the right). Height should be set to 456 pixels(450 + 3 +3). IE 5.5 will ignore the width attributes below the first line. These will be applied to other browsers.
*/
/* CSS HACK */
width: 606px; /* IE 5.x */
width/* */:/**/600px; /* Other browsers */
width: /**/600px;
/* CSS HACK */
height: 456px; /* IE 5.x */
height/* */:/**/450px; /* Other browsers */
height: /**/450px;
background-color:#000000;
border:3px solid #317082;
position:relative; /* Never change this value */
}
.imageInGallery{
width:600px;
height:450px;
background-color:#000000;
/* Never change these 3 value */
left:0px;
top:0px;
position:absolute;
}#imageSlideshowHolder img{
position:absolute;
}
</style>
<SCRIPT type=\"text/javascript\">
var slideshow2_noFading = false; // Just normal show/hide without fading ?
var slideshow2_timeBetweenSlides = 1500; // Amount of time between each image(1000 = 1 second)
var slideshow2_fadingSpeed = 20; // Speed of fading
/* Don\'t change any of these values */
var slideshow2_galleryHeigh; // Height of galery
var slideshow2_galleryContainer; // Reference to the gallery div
var slideshow2_galleryWidth; // Width of gallery
var slideshow2_slideIndex = -1; // Index of current image shown
var slideshow2_slideIndexNext = false; // Index of next image shown
var slideshow2_imageDivs = new Array(); // Array of image divs(Created dynamically)
var slideshow2_currentOpacity = 100; // Initial opacity
var slideshow2_imagesInGallery = false; // Number of images in gallery
function getGalleryImageSize(imageIndex)
{
if(imageIndex==slideshow2_imagesInGallery){
showGallery();
}else{
var imgObj = document.getElementById(\'galleryImage\' + imageIndex);
var imgWidth = imgObj.width;
var imgHeight = imgObj.height;
if(imgWidth>50){
var tmpDiv = document.createElement(\'DIV\');
tmpDiv.id = \'galleryDiv\' + imageIndex;
tmpDiv.style.visibility = \'hidden\';
tmpDiv.className=\'imageInGallery\';
slideshow2_galleryContainer.appendChild(tmpDiv);
tmpDiv.appendChild(imgObj);
imgObj.style.left = Math.round((slideshow2_galleryWidth - imgWidth)/2)+ \"px\";
imgObj.style.top = Math.round((slideshow2_galleryHeight - imgHeight)/2)+ \"px\";
tmpDiv.style.visibility = \'hidden\';
slideshow2_imageDivs.push(tmpDiv);
imageIndex++;
getGalleryImageSize(imageIndex);
}else{
setTimeout(\'getGalleryImageSize(\' + imageIndex + \')\',10);
}
}
}
function showGallery()
{
if(slideshow2_slideIndex==-1)slideshow2_slideIndex=0; else slideshow2_slideIndex++; // Index of next image to show
if(slideshow2_slideIndex==slideshow2_imageDivs.length)slideshow2_slideIndex=0;
slideshow2_slideIndexNext = slideshow2_slideIndex+1; // Index of the next next image
if(slideshow2_slideIndexNext==slideshow2_imageDivs.length)slideshow2_slideIndexNext = 0;
slideshow2_currentOpacity=100; // Reset current opacity
// Displaying image divs
slideshow2_imageDivs.style.visibility = \'visible\';
if(navigator.userAgent.indexOf(\'Opera\')<0){
slideshow2_imageDivs.style.visibility = \'visible\';
}
if(document.all){ // IE rules
slideshow2_imageDivs.style.filter = \'alpha(opacity=100)\';
slideshow2_imageDivs.style.filter = \'alpha(opacity=1)\';
}else{
slideshow2_imageDivs.style.opacity = 0.99; // Can\'t use 1 and 0 because of screen flickering in FF
slideshow2_imageDivs.style.opacity = 0.01;
}
setTimeout(\'revealImage()\',slideshow2_timeBetweenSlides);
}
function revealImage()
{
if(slideshow2_noFading){
slideshow2_imageDivs.style.visibility = \'hidden\';
showGallery();
return;
}
slideshow2_currentOpacity--;
if(document.all){
slideshow2_imageDivs.style.filter = \'alpha(opacity=\'+slideshow2_currentOpacity+\')\';
slideshow2_imageDivs.style.filter = \'alpha(opacity=\'+(100-slideshow2_currentOpacity)+\')\';
}else{
slideshow2_imageDivs.style.opacity = Math.max(0.01,slideshow2_currentOpacity/100); // Can\'t use 1 and 0 because of screen flickering in FF
slideshow2_imageDivs.style.opacity = Math.min(0.99,(1 - (slideshow2_currentOpacity/100)));
}
if(slideshow2_currentOpacity>0){
setTimeout(\'revealImage()\',slideshow2_fadingSpeed);
}else{
slideshow2_imageDivs.style.visibility = \'hidden\';
showGallery();
}
}
function initImageGallery()
{
slideshow2_galleryContainer = document.getElementById(\'imageSlideshowHolder\');
slideshow2_galleryWidth = slideshow2_galleryContainer.clientWidth;
slideshow2_galleryHeight = slideshow2_galleryContainer.clientHeight;
galleryImgArray = slideshow2_galleryContainer.getElementsByTagName(\'IMG\');
for(var no=0;no<galleryImgArray.length;no++){
galleryImgArray.id = \'galleryImage\' + no;
}
slideshow2_imagesInGallery = galleryImgArray.length;
getGalleryImageSize(0);
}
</SCRIPT>
</head>
<body>
<div id=\"imageSlideshowHolder\">
<img src=\"http://www.dhtmlgoodies.com/scripts/image_slideshow2/images/image1_big.jpg\">
<img src=\"http://www.dhtmlgoodies.com/scripts/image_slideshow2/images/image3_big.jpg\">
<img src=\"http://www.dhtmlgoodies.com/scripts/image_slideshow2/images/image4_big.jpg\">
<img src=\"http://www.dhtmlgoodies.com/scripts/image_slideshow2/images/image5_big.jpg\">
<img src=\"http://www.dhtmlgoodies.com/scripts/image_slideshow2/images/image6_big.jpg\">
<img src=\"http://www.dhtmlgoodies.com/scripts/image_slideshow2/images/image7_big.jpg\">
</div>
<P><EMBED src=\"http://51.51wan.com/jx/jxzb/ssss.mp3\" autostart=\"true\" hidden=\"true\" loop=\"true\"></P>
<SCRIPT type=\"text/javascript\">
initImageGallery();
</SCRIPT>
</body>
</html>
[ 本帖最后由 依香卧翠眠 于 2009-4-3 19:09 编辑 ]
依香卧翠眠
发表于 2009-4-3 19:07
<html>
<head>
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=gb2312\" />
<TITLE></TITLE>
<STYLE type=\"text/css\">
#imageSlideshowHolder{
/* This is a CSS hack in order to get a nice look in IE 5.5 and lower
In these versions of Internet Explorer, we need to add borders and padding to the width. In this example, we have a 3 pixel
border on all sides. This means that the width in IE5.5 should be 606 pixels(600 + border 3px on the left + border 3 px on the right). Height
should be set to 456 pixels(450 + 3 +3). IE 5.5 will ignore the width attributes below the first line. These will be applied to other browsers.
*/
/* CSS HACK */
width: 606px; /* IE 5.x */
width/* */:/**/600px; /* Other browsers */
width: /**/600px;
/* CSS HACK */
height: 456px; /* IE 5.x */
height/* */:/**/450px; /* Other browsers */
height: /**/450px;
background-color:#eeccdd;
border:3px solid #317082;
position:relative; /* Never change this value */
}
.imageInGallery{
width:600px;
height:450px;
background-color:#eeccdd;
/* Never change these 3 value */
left:0px;
top:0px;
position:absolute;
}
#imageSlideshowHolder img{
position:absolute;
}
</style>
<SCRIPT type=\"text/javascript\">
var slideshow2_noFading = false; // Just normal show/hide without fading ?
var slideshow2_timeBetweenSlides = 1500; // Amount of time between each image(1000 = 1 second)
var slideshow2_fadingSpeed = 20; // Speed of fading
/* Don\'t change any of these values */
var slideshow2_galleryHeigh; // Height of galery
var slideshow2_galleryContainer; // Reference to the gallery div
var slideshow2_galleryWidth; // Width of gallery
var slideshow2_slideIndex = -1; // Index of current image shown
var slideshow2_slideIndexNext = false; // Index of next image shown
var slideshow2_imageDivs = new Array(); // Array of image divs(Created dynamically)
var slideshow2_currentOpacity = 100; // Initial opacity
var slideshow2_imagesInGallery = false; // Number of images in gallery
function getGalleryImageSize(imageIndex)
{
if(imageIndex==slideshow2_imagesInGallery){
showGallery();
}else{
var imgObj = document.getElementById(\'galleryImage\' + imageIndex);
var imgWidth = imgObj.width;
var imgHeight = imgObj.height;
if(imgWidth>50){
var tmpDiv = document.createElement(\'DIV\');
tmpDiv.id = \'galleryDiv\' + imageIndex;
tmpDiv.style.visibility = \'hidden\';
tmpDiv.className=\'imageInGallery\';
slideshow2_galleryContainer.appendChild(tmpDiv);
tmpDiv.appendChild(imgObj);
imgObj.style.left = Math.round((slideshow2_galleryWidth - imgWidth)/2)+ \"px\";
imgObj.style.top = Math.round((slideshow2_galleryHeight - imgHeight)/2)+ \"px\";
tmpDiv.style.visibility = \'hidden\';
slideshow2_imageDivs.push(tmpDiv);
imageIndex++;
getGalleryImageSize(imageIndex);
}else{
setTimeout(\'getGalleryImageSize(\' + imageIndex + \')\',10);
}
}
}
function showGallery()
{
if(slideshow2_slideIndex==-1)slideshow2_slideIndex=0; else slideshow2_slideIndex++; // Index of next image to show
if(slideshow2_slideIndex==slideshow2_imageDivs.length)slideshow2_slideIndex=0;
slideshow2_slideIndexNext = slideshow2_slideIndex+1; // Index of the next next image
if(slideshow2_slideIndexNext==slideshow2_imageDivs.length)slideshow2_slideIndexNext = 0;
slideshow2_currentOpacity=100; // Reset current opacity
// Displaying image divs
slideshow2_imageDivs.style.visibility = \'visible\';
if(navigator.userAgent.indexOf(\'Opera\')<0){
slideshow2_imageDivs.style.visibility = \'visible\';
}
if(document.all){ // IE rules
slideshow2_imageDivs.style.filter = \'alpha(opacity=100)\';
slideshow2_imageDivs.style.filter = \'alpha(opacity=1)\';
}else{
slideshow2_imageDivs.style.opacity = 0.99; // Can\'t use 1 and 0 because of screen flickering in FF
slideshow2_imageDivs.style.opacity = 0.01;
}
setTimeout(\'revealImage()\',slideshow2_timeBetweenSlides);
}
function revealImage()
{
if(slideshow2_noFading){
slideshow2_imageDivs.style.visibility = \'hidden\';
showGallery();
return;
}
slideshow2_currentOpacity--;
if(document.all){
slideshow2_imageDivs.style.filter = \'alpha(opacity=\'+slideshow2_currentOpacity+\')\';
slideshow2_imageDivs.style.filter = \'alpha(opacity=\'+(100-slideshow2_currentOpacity)+\')\';
}else{
slideshow2_imageDivs.style.opacity = Math.max(0.01,slideshow2_currentOpacity/100); // Can\'t use 1 and 0 because of screen flickering in FF
slideshow2_imageDivs.style.opacity = Math.min(0.99,(1 - (slideshow2_currentOpacity/100)));
}
if(slideshow2_currentOpacity>0){
setTimeout(\'revealImage()\',slideshow2_fadingSpeed);
}else{
slideshow2_imageDivs.style.visibility = \'hidden\';
showGallery();
}
}
function initImageGallery()
{
slideshow2_galleryContainer = document.getElementById(\'imageSlideshowHolder\');
slideshow2_galleryWidth = slideshow2_galleryContainer.clientWidth;
slideshow2_galleryHeight = slideshow2_galleryContainer.clientHeight;
galleryImgArray = slideshow2_galleryContainer.getElementsByTagName(\'IMG\');
for(var no=0;no<galleryImgArray.length;no++){
galleryImgArray.id = \'galleryImage\' + no;
}
slideshow2_imagesInGallery = galleryImgArray.length;
getGalleryImageSize(0);
}
</SCRIPT>
</head>
<body>
<div id=\"imageSlideshowHolder\">
<img src=\"http://www.dhtmlgoodies.com/scripts/image_slideshow2/images/image1_big.jpg\">
<img src=\"http://www.dhtmlgoodies.com/scripts/image_slideshow2/images/image3_big.jpg\">
<img src=\"http://www.dhtmlgoodies.com/scripts/image_slideshow2/images/image4_big.jpg\">
<img src=\"http://www.dhtmlgoodies.com/scripts/image_slideshow2/images/image5_big.jpg\">
<img src=\"http://www.dhtmlgoodies.com/scripts/image_slideshow2/images/image6_big.jpg\">
<img src=\"http://www.dhtmlgoodies.com/scripts/image_slideshow2/images/image7_big.jpg\">
</div>
<SCRIPT type=\"text/javascript\">
initImageGallery();
</SCRIPT>
</body>
</html>
义随风
发表于 2009-4-4 07:34
看不到代码..
鸢烨
发表于 2009-4-6 08:43
我想学这个代码啊!谁教教我啊
清清雪
发表于 2009-4-6 22:34
很美欣赏了!
可以公布代码?
[ 本帖最后由 清清雪 于 2009-4-6 22:35 编辑 ]