随笔 - 11  文章 - 2  trackbacks - 0
<2007年7月>
24252627282930
1234567
891011121314
15161718192021
22232425262728
2930311234

常用链接

留言簿(1)

随笔档案

相册

搜索

  •  

最新评论

阅读排行榜

评论排行榜

<!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="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="#"><img src="http://www.sanda.com.cn/new/images/image1.jpg"></a>       
                <a href="#"><img src="http://www.sanda.com.cn/new/images/image1.jpg"></a>       
                <a href="#"><img src="http://www.sanda.com.cn/new/images/image1.jpg"></a>       
                <a href="#"><img src="http://www.sanda.com.cn/new/images/image1.jpg"></a>       
                <a href="#"><img src="http://www.sanda.com.cn/new/images/image1.jpg"></a>       
                <a href="#"><img src="http://www.sanda.com.cn/new/images/image1.jpg"></a>       
                <a href="#"><img src="http://www.sanda.com.cn/new/images/image1.jpg"></a>       
                <a href="#" ><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>

posted on 2007-07-14 13:24 jacksontoto 阅读(2013) 评论(0)  编辑  收藏

只有注册用户登录后才能发表评论。


网站导航: