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 编辑 ]
页: 1 [2] 3 4 5 6
查看完整版本: 图片淡出淡入,效果很棒!