需要幻灯片播放按钮吗？ [英] Need Slideshow with Play buttons?

问题描述

我需要幻灯片放映，如下面的网站主页幻灯片放映，

I need Slide show like in the below site home page slide show,

http://www.meshnetworks.ca/

之前是否有人使用幻灯片放映？..或任何其他参考请帮助我...

Is anyone used before like that slide show?..or any other reference please help me..

推荐答案

你可以将所有幻灯片图像分成这样的单独div，只有一个div显示在任何实例上休息被隐藏。

you can have all the slideshow images in seperate divs like this, with only one div displayed at any instance and rest being hidden.

    <div id="main_img">
        <img id = "img1" class= "active" src= "images/main_img1.jpg"></img>
        <img id = "img2"  src= "images/main_img2.jpg"></img>
        <img id = "img3"  src= "images/main_img3.jpg"></img>
        <img id = "img4"  src= "images/main_img4.jpg"></img>
    </div>

点击下一个或上一个按钮，将next或prev图像设置为活动状态。淡出早期的div并淡出下一个/ prev div，如下所示：

And on click of next or prev button, you set next or prev image as active. fadeout the earlier div and fadeIn the next/prev div like this:

function showNextImage(){

current_string = $("#main_img img.active").attr('id');
current = current_string.charAt(3); //get the current image number
current++;
if (current > 4){ //check if current image is the last image display first image
    current = 1;
}
current_string = "img" + current;
$("#main_img img.active").removeClass('active').fadeOut(1000, function(){ //fadeOut existing image
    $("#main_img img").each(function(){
        if($(this).attr('id') == current_string){
            $(this).addClass('active').fadeIn(1000) //fadeIn next image
        }
    });
});
}

同样可以为上一个按钮做。

Similarly you can do for previous button.

希望这会有所帮助。

这篇关于需要幻灯片播放按钮吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！