如何使用jQuery实现图像幻灯片放映 [英] how to implement image slide show with jquery

问题描述

任何人都可以在这方面帮助我:

如何用jquery实现图片幻灯片放映?

any body please help me in this regard:

how to implement image slide show with jquery?

thanks in advance.

推荐答案

这是我使用的脚本.

Here is a script I use.

var displayWaitMessage = true; // Display a please wait message while images 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 = 'gallery/' + 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 = 'gallery/' + 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;

CSS是这样的:

The CSS is this:

<style type="text/css">
       .gallerycontainer
       {
           position: relative;
           height:300;
           /*Add a height attribute and set to largest image's height to prevent overlaying*/
        }
        .thumbnail img
        {
            border: 1px solid white;
            margin: 0 5px 5px 0;
        }
        .thumbnail:hover
        {
            background-color: transparent;
        }
        .thumbnail:hover img
        {
            border: 1px solid blue;
        }
        .thumbnail span
        {
            /*CSS for enlarged image*/
            position: absolute;
            background-color: Gray;
            padding: 5px;
            left: -500px;
            border: 1px dashed gray;
            visibility: hidden;
            color: black;
            text-decoration: none;
         }
         .thumbnail span img
         {
            /*CSS for enlarged image*/
            border-width: 0;
            padding: 2px;
         }
         .thumbnail:hover span
         {
             /*CSS for enlarged image*/
             visibility: visible;
             top: 220px;
             left: 270px; /*position where enlarged image should offset horizontally */
             z-index: 100;
          }
          </style>

HTML是:

And the HTML is:

</div>
    <div id="dhtmlgoodies_slideshow">
    <div id="previewPane">
        <img alt="image" src="gallery/image1_big.jpg"/>
        <span id="waitMessage">Loading image. Please wait</span>
        <div id="largeImageCaption">This is the caption of image number 1</div>
    </div>
    <div id="galleryContainer">
        <div id="arrow_left"><img alt="left" src="gallery/arrow_left.gif"/></div>
        <div id="arrow_right"><img alt="right" src="gallery/arrow_right.gif"/></div>
        <div id="theImages">
                <!-- Thumbnails -->
                <a href="#" onclick="showPreview('gallery/hangar1big.jpg','1');return false"><img alt="image1" src="gallery/hangar1small.jpg"/></a>
                <a href="#" onclick="showPreview('gallery/image2_big.jpg','2');return false"><img alt="image2" src="gallery/image2.jpg"/></a>
                <a href="#" onclick="showPreview('gallery/image3_big.jpg','3');return false"><img alt="image3" src="gallery/image3.jpg"/></a>
                <a href="#" onclick="showPreview('gallery/image4_big.jpg','4');return false"><img alt="image4" src="gallery/image4.jpg"/></a>
                <a href="#" onclick="showPreview('gallery/image5_big.jpg','5');return false"><img alt="image5" src="gallery/image5.jpg"/></a>
                <a href="#" onclick="showPreview('gallery/image6_big.jpg','6');return false"><img alt="image6" src="gallery/image6.jpg"/></a>
                <a href="#" onclick="showPreview('gallery/image7_big.jpg','7');return false"><img alt="image7"src="gallery/image7.jpg"/></a>
                <a href="#" onclick="showPreview('gallery/image8_big.jpg','8');return false"><img alt="image8" src="gallery/image8.jpg"/></a>
                <!-- End thumbnails -->
                <!-- Image captions -->
                <div class="imageCaption">Hangar Number One is in need of repair, but will be developed to the level of Hangar Two.</div>
                <div class="imageCaption">This is the caption of image number 2</div>
                <div class="imageCaption">This is the caption of image number 3</div>
                <div class="imageCaption">This is the caption of image number 4</div>
                <div class="imageCaption">This is the caption of image number 5</div>
                <div class="imageCaption">This is the caption of image number 6</div>
                <div class="imageCaption">This is the caption of image number 7</div>
                <div class="imageCaption">This is the caption of image number 8</div>
                <!-- End image captions -->
                <div id="slideEnd"></div>
        </div>
    </div>
</div>

this[^] also might help you.

选中此链接将帮助您解决问题.
imgae滑块jquery [ ^ ]
如何隐含
用法 [ ^ ]

check this link it will help you solve your issue.
imgae slider jquery[^]
how to impliment
Usage[^]

这篇关于如何使用jQuery实现图像幻灯片放映的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！