javascript - 幻灯片背景图片

Question

我有 3 张图片使用 JavaScript 使它们从左向右滑动以作为 html 的正文背景，但图片只是出现，我需要做些什么才能让它们顺利滑动。

仅供引用:我在预览中添加了一个 div。

听说是 JSFiddle

var bgArr = [
  "http://foxarc.com/en/cfxs/images/masks.jpg",
  "http://foxarc.com/en/cfxs/images/brushes.jpg",
  "http://foxarc.com/en/cfxs/images/text.jpg"
];
var i = 0;

// Start the slide show
setInterval(function() {
  $("#demo").css("background-image", "url(" + bgArr[i] + ")");
  (i < bgArr.length - 1) ? i++ : i = 0
}, 2000);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div
       id="demo" 
       style="text-align:center; 
          width:90%; 
          height:310px; 
          overflow:hidden; 
          border-style:dashed; 
          border-width:1px;">
    <p style="margin-top:83px;"></p>
</div>

Answer 1

我认为最好的解决方案是在 body 中创建 2 个 div

<div class="background-1"></div>
<div class="background-2"></div>

把它们放在下面

body {
    position: relative;
    background: transparent;
    overflow-x: hidden;
}
.background-1, .background-2 {
    position: absolute;
    z-index: -1;
    width: 100%;
    height: 100%;
}

然后创建一个自定义 slider

$(document).ready(function(){
    var bgArr = ["http://foxarc.com/en/cfxs/images/masks.jpg",
                 "http://foxarc.com/en/cfxs/images/brushes.jpg",
                 "http://foxarc.com/en/cfxs/images/text.jpg"]; 

    var i = 0;

    var $bg1 = $('.background-1').css('background-image', 'url('+bgArr[0]+')')
                                 .css('left', '0%');
    var $bg2 = $('.background-2').css('background-image', 'url('+bgArr[1]+')')
                                 .css('left', '-100%');

    var bgSlide = function($bg) {
        $bg.animate({ left: '+=100%' }, 600, function(){ 
            if(parseInt($bg.css('left')) > 0) {
                $bg.css('left', '-100%');
                (i < bgArr.length-1) ? i++ : i=0;
                $bg.css("background-image", "url("+bgArr[i]+")");
            }                           
        } );
    }

    setInterval(function() {                
        bgSlide($bg1);
        bgSlide($bg2);                          
    }, 2000);
});

示例:jsfiddle