Question

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

http://www.meshnetworks.ca/

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

Answer 1

你可以将所有幻灯片图像放在这样的单独div中，只有一个div显示在任何实例上，而其余部分则被隐藏。

    <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就像这样：

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
        }
    });
});
}

类似地，你可以为前一个按钮做。

希望这有帮助。

Answer 2

您可以查看http://pikachoose.com/ 非常可定制的jquery幻灯片。

Answer 3

根据源代码，此网站由Joomla!提供支持它使用的幻灯片是fpss：http://www.frontpageslideshow.net/

Answer 4

这是一个很好的http://css-tricks.com/examples/AnythingSlider/

需要幻灯片播放按钮吗？

4 个答案: