jQuery 简单背景 slider 循环

标签 jquery css slider background-image

我需要自动更改背景图像或通过单击 slider 元素符号来更改。它需要在 window.load 上设置超时和自动播放。这是我的 fiddle : 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>

最佳答案

您可以像这样使用 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/

关于jQuery 简单背景 slider 循环,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42555632/

相关文章:

html - 使文本留在列表项中

javascript - div 不随动态内容增长

css溢出滚动表格单元格宽度为:auto or width:100%

javascript - 可拖动的 jQuery 轮播定制

reactjs - 当material-ui slider 被设置样式时,拖动以更改是不可能的

jQuery slider 在 FireFox 中不起作用

javascript - 从现有对象创建新的数组对象

javascript - 如果重新打开选项卡则重新加载页面

javascript - 为什么 JavaScript 需要以 ";"开头?

javascript - 如何在 JavaScript 中结合按键和点击功能?