Javascript的图片滚动浏览效果代码

一个图片滚动的代码，可实现图片随鼠标箭头左右滚动浏览。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <title>图片滚动</title>
    <style type="text/css">...
<!--
    body{...}{
        background-image:url('../../http://www.sanda.com.cn/new/images/heading3.gif');
        background-repeat:no-repeat;
        padding-top:80px;
    }
    #dhtmlgoodies_slideshow{...}{
        width:600px;    /**//* Total width of slideshow */
    }
    
    #previewPane{...}{
        border:1px solid #CCCCCC;
        margin-bottom:10px;    
        text-align:center;
        vertical-align:middle;
        padding-top:10px;
                                background-color:#CCC;
        position:relative;
        
        /**//* CSS HACK */
        height: 432px;    /**//* IE 5.x */
        height/**//* */:/**//**/420px;    /**//* Other browsers */
        height: /**//**/420px;
                
    }
    #previewPane img{...}{
        line-height:400px;
    }
    #previewPane #largeImageCaption{...}{    /**//* CSS styling of image caption below large image */
        font-style:italic;
        text-align:center;
        font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;    /**//* Font to use */
        font-size:0.9em;
    }
    #galleryContainer{...}{
        
        height:102px;    /**//* Height of the http://www.sanda.com.cn/new/image + 2 */
        border:1px solid #CCCCCC;
        position:relative;
        overflow:hidden;
        padding:1px;
        
        /**//* CSS HACK */
        height: 104px;    /**//* IE 5.x - Added 2 pixels for border left and right */
        height/**//* */:/**//**/102px;    /**//* Other browsers */
        height: /**//**/102px;
                
    }
    #arrow_left{...}{
        position:absolute;
        left:0px;
        z-index:10;
        background-color: #FFF;
        padding:1px;
    }
    #arrow_right{...}{
        position:absolute;
        right:0px;
        z-index:10;
        background-color: #FFF;
        padding:1px;        
    }
    #theImages{...}{
        position:absolute;
        height:100px;
        left:40px;
        width:100000px;
        
    }
    #theImages #slideEnd{...}{
        float:left;
    }
    #theImages img{...}{
        float:left;
        padding:1px;
        filter: alpha(opacity=50);
        opacity: 0.5;
        cursor:pointer;
        border:0px;
    }
    #waitMessage{...}{
        display:none;
        position:absolute;
        left:200px;
        top:150px;
        background-color:#FFF;
        border:3px double #000;
        padding:4px;
        color:#555;
        font-size:0.9em;
        font-family:arial;    
    }
    
    #theImages .imageCaption{...}{
        display:none;
    }
-->
</style>
    <script type="text/javascript" >...
   var displayWaitMessage=true;    // Display a please wait message while http://www.sanda.com.cn/new/image are loading?
      
           
    var activeImage = false;
    var imageGalleryLeftPos = false;
    var imageGalleryWidth = false;
    var imageGalleryObj = false;
    var maxGalleryXPos = false;
    var slideSpeed = 0;
    var imageGalleryCaptions = new Array();
    function startSlide(e)
    ...{
        if(document.all)e = event;
        var id = this.id;
        this.getElementsByTagName('IMG')[0].src = 'http://www.sanda.com.cn/new/images/' + this.id + '_over.gif';    
        if(this.id=='arrow_right')...{
            slideSpeedMultiply = Math.floor((e.clientX - this.offsetLeft) / 5);
            slideSpeed = -1*slideSpeedMultiply;
            slideSpeed = Math.max(-10,slideSpeed);
        }else...{            
            slideSpeedMultiply = 10 - Math.floor((e.clientX - this.offsetLeft) / 5);
            slideSpeed = 1*slideSpeedMultiply;
            slideSpeed = Math.min(10,slideSpeed);
            if(slideSpeed<0)slideSpeed=10;
        }
    }
    
    function releaseSlide()
    ...{
        var id = this.id;
        this.getElementsByTagName('IMG')[0].src = 'http://www.sanda.com.cn/new/images/' + this.id + '.gif';
        slideSpeed=0;
    }
        
    function gallerySlide()
    ...{
        if(slideSpeed!=0)...{
            var leftPos = imageGalleryObj.offsetLeft;
            leftPos = leftPos/1 + slideSpeed;
            if(leftPos>maxGalleryXPos)...{
                leftPos = maxGalleryXPos;
                slideSpeed = 0;
                
            }
            if(leftPos<minGalleryXPos)...{
                leftPos = minGalleryXPos;
                slideSpeed=0;
            }
            
            imageGalleryObj.style.left = leftPos + 'px';
        }
        setTimeout('gallerySlide()',20);
        
    }
    
    function showImage()
    ...{
        if(activeImage)...{
            activeImage.style.filter = 'alpha(opacity=50)';    
            activeImage.style.opacity = 0.5;
        }    
        this.style.filter = 'alpha(opacity=100)';
        this.style.opacity = 1;    
        activeImage = this;    
    }
    
    function initSlideShow()
    ...{
        document.getElementById('arrow_left').onmousemove = startSlide;
        document.getElementById('arrow_left').onmouseout = releaseSlide;
        document.getElementById('arrow_right').onmousemove = startSlide;
        document.getElementById('arrow_right').onmouseout = releaseSlide;
        
        imageGalleryObj = document.getElementById('theImages');
        imageGalleryLeftPos = imageGalleryObj.offsetLeft;
        imageGalleryWidth = document.getElementById('galleryContainer').offsetWidth - 80;
        maxGalleryXPos = imageGalleryObj.offsetLeft; 
        minGalleryXPos = imageGalleryWidth - document.getElementById('slideEnd').offsetLeft;
        var slideshowImages = imageGalleryObj.getElementsByTagName('IMG');
        for(var no=0;no<slideshowImages.length;no++)...{
            slideshowImages[no].onmouseover = showImage;
        }
        
        var divs = imageGalleryObj.getElementsByTagName('DIV');
        for(var no=0;no<divs.length;no++)...{
            if(divs[no].className=='imageCaption')imageGalleryCaptions[imageGalleryCaptions.length] = divs[no].innerHTML;
        }
        gallerySlide();
    }
    
    function showPreview(imagePath,imageIndex)...{
        var subImages = document.getElementById('previewPane').getElementsByTagName('IMG');
        if(subImages.length==0)...{
            var img = document.createElement('IMG');
            document.getElementById('previewPane').appendChild(img);
        }else img = subImages[0];
        
        if(displayWaitMessage)...{
            document.getElementById('waitMessage').style.display='inline';
        }
        document.getElementById('largeImageCaption').style.display='none';
        img.onload = function() ...{ hideWaitMessageAndShowCaption(imageIndex-1); };
        img.src = imagePath;
        
    }
    function hideWaitMessageAndShowCaption(imageIndex)
    ...{
        document.getElementById('waitMessage').style.display='none';    
        document.getElementById('largeImageCaption').innerHTML = imageGalleryCaptions[imageIndex];
        document.getElementById('largeImageCaption').style.display='block';
        
    }
    window.onload = initSlideShow;
    </script>
</head>
<body>
<div id="dhtmlgoodies_slideshow">
    <div id="previewPane">
        <img src="http://www.sanda.com.cn/new/images/image1_big.jpg">
        <span id="waitMessage">Loading image. Please wait</span>    
        <div id="largeImageCaption">图片 1</div>
    </div>
    <div id="galleryContainer">
        <div id="arrow_left"><img src="http://www.sanda.com.cn/new/images/arrow_left.gif"></div>
        <div id="arrow_right"><img src="http://www.sanda.com.cn/new/images/arrow_right.gif"></div>
        <div id="theImages">
                <!-- Thumbnails -->
                <a href="#" onClick="showPreview('http://www.sanda.com.cn/new/images/image1_big.jpg','1');return false"><img src="http://www.sanda.com.cn/new/images/image1.jpg"></a>        
                <a href="#" onClick="showPreview('http://www.sanda.com.cn/new/images/image1_big.jpg','2');return false"><img src="http://www.sanda.com.cn/new/images/image1.jpg"></a>        
                <a href="#" onClick="showPreview('http://www.sanda.com.cn/new/images/image1_big.jpg','3');return false"><img src="http://www.sanda.com.cn/new/images/image1.jpg"></a>        
                <a href="#" onClick="showPreview('http://www.sanda.com.cn/new/images/image1_big.jpg','4');return false"><img src="http://www.sanda.com.cn/new/images/image1.jpg"></a>        
                <a href="#" onClick="showPreview('http://www.sanda.com.cn/new/images/image1_big.jpg','5');return false"><img src="http://www.sanda.com.cn/new/images/image1.jpg"></a>        
                <a href="#" onClick="showPreview('http://www.sanda.com.cn/new/images/image1_big.jpg','6');return false"><img src="http://www.sanda.com.cn/new/images/image1.jpg"></a>        
                <a href="#" onClick="showPreview('http://www.sanda.com.cn/new/images/image1_big.jpg','7');return false"><img src="http://www.sanda.com.cn/new/images/image1.jpg"></a>        
                <a href="#" onClick="showPreview('http://www.sanda.com.cn/new/images/image1_big.jpg','8');return false"><img src="http://www.sanda.com.cn/new/images/image1.jpg"></a>    
                <!-- End thumbnails -->
                
                <!-- Image captions -->    
                <div class="imageCaption">图片1</div>
                <div class="imageCaption">图片 2</div>
                <div class="imageCaption">图片 3</div>
                <div class="imageCaption">图片4</div>
                <div class="imageCaption">图片 5</div>
                <div class="imageCaption">图片 6</div>
                <div class="imageCaption">图片 7</div>
                <div class="imageCaption">图片 8</div>
                <!-- End image captions -->
                
                <div id="slideEnd"></div>
        </div>
    </div>
</div>
</body>
</html>

 【自：http://bbs.blueidea.com/thread-2765245-1-1.html】