当前位置：网站综合首页 >> 网页JS特效 >> 图形图象类 >> Javascript的图片滚动浏览效果代码

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

来源：中国设计秀作者：luzi 点击：2901 加入收藏发表评论

顶一下

关键字：图片代码 js特效

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

<!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">...

</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="/uploadfile/site/uploadfile/200712/20071216021317834.jpg">
        <span id="waitMessage">Loading image. Please wait</span>    
        <div id="largeImageCaption">图片 1</div>
    </div>
    <div id="galleryContainer">
        <div id="arrow_left"><img src="/uploadfile/site/uploadfile/200712/20071216021318945.gif"></div>
        <div id="arrow_right"><img src="/uploadfile/site/uploadfile/200712/20071216021319983.gif"></div>
        <div id="theImages">
                
                <a href="#" onClick="showPreview('/uploadfile/site/uploadfile/200712/20071216021317834.jpg','1');return false"><img src="/uploadfile/site/uploadfile/200712/20071216021319520.jpg"></a>        
                <a href="#" onClick="showPreview('/uploadfile/site/uploadfile/200712/20071216021317834.jpg','2');return false"><img src="/uploadfile/site/uploadfile/200712/20071216021319520.jpg"></a>        
                <a href="#" onClick="showPreview('/uploadfile/site/uploadfile/200712/20071216021317834.jpg','3');return false"><img src="/uploadfile/site/uploadfile/200712/20071216021319520.jpg"></a>        
                <a href="#" onClick="showPreview('/uploadfile/site/uploadfile/200712/20071216021317834.jpg','4');return false"><img src="/uploadfile/site/uploadfile/200712/20071216021319520.jpg"></a>        
                <a href="#" onClick="showPreview('/uploadfile/site/uploadfile/200712/20071216021317834.jpg','5');return false"><img src="/uploadfile/site/uploadfile/200712/20071216021319520.jpg"></a>        
                <a href="#" onClick="showPreview('/uploadfile/site/uploadfile/200712/20071216021317834.jpg','6');return false"><img src="/uploadfile/site/uploadfile/200712/20071216021319520.jpg"></a>        
                <a href="#" onClick="showPreview('/uploadfile/site/uploadfile/200712/20071216021317834.jpg','7');return false"><img src="/uploadfile/site/uploadfile/200712/20071216021319520.jpg"></a>        
                <a href="#" onClick="showPreview('/uploadfile/site/uploadfile/200712/20071216021317834.jpg','8');return false"><img src="/uploadfile/site/uploadfile/200712/20071216021319520.jpg"></a>    
                
                
                    
                <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>
                
                
                <div id="slideEnd"></div>
        </div>
    </div>
</div>
</body>
</html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

2007-12-16 14:13:17 出处：中国设计秀＿优秀网页欣赏＿精美平面设计欣赏＿设计教程

本文引用地址：http://www.cnwebshow.com/site/html/article_2026.html

热点文章/相关文章