Question

有3张图像使用JavaScript我们让它们从左到右滑动为html的正文背景但是图像只是出现是否有任何我需要做的事情，以便它们顺利滑动。

仅供参考：我在预览中添加了一个div。

听到的是 JSFiddle

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

使用animate（）

查看此示例https://jsfiddle.net/kevalbhatt18/0Lr9uvt0/1/
没有动画（）：https://jsfiddle.net/kevalbhatt18/0Lr9uvt0/2/

什么是.animate()

在此示例中查看此示例https://jsfiddle.net/kevalbhatt18/0Lr9uvt0/5/我使用jquery ui进行左右效果

的
的
$('.test').css({ 'background-image': "url('" + bgArr[i] + "')" }); (i < bgArr.length - 1) ? i++ : i = 0 }, 2000);

的

并申请css

的
的
.test{ -webkit-transition: background-image 0.2s ease-in-out; transition: background-image 0.2s ease-in-out; }

的

Answer 2

I think the best solution is to create 2 divs inside of body

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

and put them under it

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

Then create a custom 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);
});

Example: jsfiddle

幻灯片背景图片

2 个答案: