jQuery简单背景滑块循环

时间:2017-03-02 12:31:37

标签: jquery css slider background-image

我需要自动更改背景图像或点击滑块项目符号。它需要在window.load上设置超时和自动播放。这是我的小提琴: JSfiddle

   <div id="container">
    <a href="#" class="changeBG">1</a>
    <a href="#" class="changeBG">2</a>
    <a href="#" class="changeBG">3</a>
    </div>
<style>
    #container{
      background-image: url(http://www.uniwallpaper.com/static/images/eiffel-tower-wallpaper-18_fRZLW4V.jpg);
      width:400px;
      height:300px;
    }
    a{color:#fff;}
</style>
<script>
    $('.changeBG').on('click', function() {
        $('#container').css('background-image', 'url(https://static.pexels.com/photos/36487/above-adventure-aerial-air.jpg)');
    })

    // image 3
    // http://www.lanlinglaurel.com/data/out/71/4541654-3d-hd-wallpaper.jpg
</script>

2 个答案:

答案 0 :(得分:1)

您可以使用setTimeout();实现这一目标的功能。

希望它有所帮助。

答案 1 :(得分:1)

您可以像这样使用setTimeout()函数:

setInterval(function(){
  $('#container').css('background-image', 'url(https://static.pexels.com/photos/36487/above-adventure-aerial-air.jpg)')
;}, 3000);

https://jsfiddle.net/srjdyyLd/1/