Question

我正在制作一个图像轮播，我的界限是使用background-image属性而非使用

<img src="Image">

标签。如果我使用img标签，我的轮播正在工作。但是当我使用background-image属性时它无法正常工作，如何使用background-image属性修改我的代码。

看到我的小提琴：https://jsfiddle.net/korLasen/并更新它，谢谢:)

或者你可以在这里看到代码

  (function(){
        var image = $('#imageSlider');
        var imageSet = ['http://www.exposureguide.com/images/top-ten-tips/top-ten-photography-tips-1e.jpg','http://images.clipartpanda.com/cliparts-images-aTqyrB8TM.png'];
        var index = 0;
        function imageSliderSet(){

            image.setAttribute('data-background', imageSet[index]);         
            index++;
            if(index >= imageSet.length){
                index = 0;
            }
        }
        setInterval = (imageSliderSet, 2000);
    })();

Answer 1

这是一个非常奇怪的问题......但是，我不是一个要判断的人:) Here is a jsfiddle based on your example.我最终使用了jquery。我希望这是在你想要的地方附近！

这是基于每两秒更换一次。要扩展它，您可以在jquery中更改第18行。这是jquery：

$( document ).ready(function(){

        var image = $('#imageSlider');
        var imageSet = ['http://www.exposureguide.com/images/top-ten-tips/top-ten-photography-tips-1e.jpg','http://images.clipartpanda.com/cliparts-images-aTqyrB8TM.png'];
        var index = 0;

        window.setInterval(function(){



            image.css('background-image', "url('" + imageSet[index] + "')");

            index++;

            if(index >= imageSet.length){
                index = 0;
            }
        //here you can adjust the time interval for each photo
        }, 2000);

    });

我们如何使用背景图像属性制作图像轮播

1 个答案: