Question

我想使用div的背景图片创建幻灯片。我不希望图像自动旋转，而是我想使用标准的prev和next按钮来改变div的背景图像。总共将有大约6个图像滚动浏览。它需要是一个背景图像，因为div中有一些其他内容。

认为这可以使用JQuery实现，但不确定如何。

我有以下代码自动旋转图像，但我不希望它们自动更改。我需要能够使用next和prev按钮滚动图像。

var bgArr = ["images/img-restaurante-2.jpg", "images/img-restaurante-3.jpg", "images/img-restaurante-4.jpg", "images/img-restaurante-5.jpg", "images/img-restaurante-1.jpg"];
var i = 0;

// Start the slide show
var interval = self.setInterval("swapBkgnd()", 20000);

function swapBkgnd() {
    if (i > (bgArr.length - 1)) {
        i = 0
        $("#restaurante").css("background-image", "url(" + bgArr[i] + ")");
    } else {
        $("#restaurante").css("background-image", "url(" + bgArr[i] + ")");
    }
    i++;
};

任何人都可以帮助我吗？

Answer 1

<script type="text/javascript">

    var bgArr = ["images/img-restaurante-2.jpg", "images/img-restaurante-3.jpg", "images/img-restaurante-4.jpg", "images/img-restaurante-5.jpg", "images/img-restaurante-1.jpg" ]; 
    var i=0;

    // Start the slide show
    setInterval(function() {
        $("#restaurante").css("background-image", "url("+bgArr[i]+")");
        (i < bgArr.length-1) ? i++ : i=0 
    }, 20000); 

</script>

Answer 2

非常Gallerific查看slick（jQuery插件）。

实现起来非常简单您只需将图像放入无序列表（UL）（在下面的示例中，“thumbs-min”是UL）然后执行类似的操作;

    $(document).ready(function() {              
    // Initialize Minimal Galleriffic Gallery
    $('#gallery').galleriffic('#thumbs-min', {
    imageContainerSel:      '#slideshow',
    controlsContainerSel:   '#controls'
    });
});

jQuery幻灯片相关插件here的集合。可能更像Supsersized的内容。

Answer 3

您可以使用插件JCaroussel lite，例如：http://www.gmarwaha.com/jquery/jcarousellite/

Answer 4

var bgArr = ["images/img-restaurante-2.jpg", "images/img-restaurante-3.jpg", "images/img-restaurante-4.jpg", "images/img-restaurante-5.jpg", "images/img-restaurante-1.jpg" ]; 
var i=0;



function next()
{
  i = (i== bgArr.length-1 ? 0 : i++);
  $("#restaurante").css("background-image", "url("+bgArr[i]+")");
}
function prev()
{
  i = ( i==0 ? bgArr.length-1 : i--);
  $("#restaurante").css("background-image", "url("+bgArr[i]+")");
}


<a href="Prev" onclick="prev()">Prev</a>
<a href="Next" onclick="next()">Next</a>

用于背景图像幻灯片的Javascript或JQuery

4 个答案: