0

div の背景画像を使用してスライドショーを作成したいと考えています。画像を自動的に回転させたくありません。代わりに、標準の prev ボタンと next ボタンを使用して div の背景画像を変更したいと考えています。合計で、スクロールする画像が約 6 枚あります。divには他のコンテンツが含まれているため、背景画像である必要があります。

これは JQuery を使用して実現できると思いますが、方法がわかりません。

画像を自動的に回転させる次のコードがありますが、自動的に変更したくありません。次のボタンと前のボタンを使用して画像をスクロールできるようにする必要があります。

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

誰でも私を助けることができますか？

4

4 に答える 4

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>
于 2009-10-09T06:32:01.073 に答える
0

たとえば、プラグイン JCaroussel lite を使用できます: http://www.gmarwaha.com/jquery/jcarousellite/

于 2009-12-01T13:51:11.620 に答える
0

Gallerific (jQuery プラグイン) 非常に滑らかなを見てください。

非常に簡単に実装するには、画像を順序なしリスト (UL) に入れ (以下の例では、「thumbs-min」が UL)、次のようにします。

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

ここに jQuery スライドショー関連のプラグインのコレクションがあります。探しているのはSupsersizedのようなものかもしれません。

于 2009-10-08T14:25:12.550 に答える
0 
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>
于 2010-10-29T12:21:35.817 に答える