Javascript或JQuery的背景图像幻灯片 [英] Javascript or JQuery for background image slideshow

问题描述

我想创建一个使用div的背景图片幻灯片。我不希望图像自动旋转，而不是我想用标准的$ P $光伏和下一个按钮来改变div's背景图像。总共将有大约6图像来滚动。它需要一个背景图像作为div有在它的一些其他内容。

认为这是可以使用JQuery来实现，但是不知道如何。

我有以下的code自动通过图像旋转，但我不希望他们自动改变。我需要能够使用下一个和$ P $光伏按钮在图像中滚动。

  VAR bgArr = [图像/ IMG-用餐 -  2.JPG，图像/ IMG-用餐-3.JPG，图像/ IMG-用餐-4.JPG ，图像/ IMG-用餐-5.JPG，图像/ IMG-用餐-1.JPG];
变种I = 0;//开始幻灯片放映
VAR间隔= self.setInterval（swapBkgnd（），20000）;功能swapBkgnd（）{
    如果（ⅰ＆GT;（bgArr.length  -  1））{
        I = 0
        $（＃用餐），CSS（背景图片，URL（+ bgArr [I] +））;
    }其他{
        $（＃用餐），CSS（背景图片，URL（+ bgArr [I] +））;
    }
    我++;
};
 

谁能帮我？

解决方案

 ＆LT;脚本类型=文/ JavaScript的＆GT;    VAR bgArr = [图像/ IMG-用餐 -  2.JPG，图像/ IMG-用餐-3.JPG，图像/ IMG-用餐-4.JPG，图像/ IMG-用餐-5.JPG ，图像/ IMG-用餐-1.JPG];
    变种I = 0;    //开始幻灯片放映
    的setInterval（函数（）{
    $（＃用餐），CSS（背景图片，URL（+ bgArr [I] +））;
    （ⅰ＆下; bgArr.length-1）？我++：I = 0
    }，20000）;＆LT; / SCRIPT＆GT;
 

I want to create a slideshow using the background image of a div. I don´t want the images to rotate automatically, instead I want to use standard prev and next buttons to change the div´s background image. In total there will be around 6 images to scroll through. It needs to be a background image as the div has some other content in it.

Think this can be achieved using JQuery but not sure how.

I have the following code which automatically rotates through the images, but I don´t want them to change automatically. I need to be able to scroll through the images using the next and prev buttons.

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

Can anyone help me?

解决方案

<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>

这篇关于Javascript或JQuery的背景图像幻灯片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！