DIV - 替代背景图片

而不是实现滑块插件，我想使用CSS/jquery替换DIV（淡入淡出/幻灯片效果）的背景图像。目前我的代码如下：DIV - 替代背景图片

HTML

<div class="block backpic"> 
</div>

CSS

.block { 

    display: block; 
     margin-right: auto; 
    margin-left: auto; 
    clear: both; 
    box-sizing: border-box; 
    padding-left: 20px; 
    padding-right: 20px; 
    width: 100%; 
    overflow: hidden; 
} 


.backpic { 
    height: 638px; 
    background-image: url(../images/picture1.jpg); 
    background-size: cover; 
}

我应该怎么做交替图片1以第二图像？非常感谢您的帮助

来源

2013-09-29 Greg

好点，编辑了代码。谢谢 – Greg

使用jQuery淡入淡出的元素，不是改变它的background-image属性，然后再渐退中：

$('.block').fadeOut(300, function(){ 

    $(this).css('background-image', 'url(path/to/other/image.jpg)') 

    $(this).fadeIn(300); 

});

如果您希望进行类似幻灯片的动画循环，请使用JavaScript setInterval方法让代码在特定的毫秒数后自行重复：

var images = [ 

    'path/to/image1.jpg', 
    'path/to/image2.jpg', 
    'path/to/image3.jpg' 

]; 

var index = 0; 

setInterval(change_up, 1000); 

function change_up(){ 

    index = (index + 1 < images.length) ? index + 1 : 0; 

    $('.block').fadeOut(300, function(){ 

    $(this).css('background-image', 'url('+ images[index] + ')') 

    $(this).fadeIn(300); 

    }); 
}

下面是一个example

来源

2013-09-29 21:20:24 shennan

谢谢深南。其实我应该更具体一些。我已经更新了相应的问题，并尝试应用你的代码（我用'.backpic'取代'.block'，但没有成功。你知道为什么吗？非常感谢 – Greg

也许是因为你需要使用与CSS相同的语法背景图片，特别是'url（）'指令，更新了代码，并提供了一个小提琴 – shennan

谢谢神农，看看你的jsfiddle图像只是淡入淡出1x。是否可以淡入/淡出不断地给出一种“滑块”的效果？谢谢 – Greg

尝试使用奇数和偶数选择

.block:nth-child(odd) { 
background-image: 
height: 638px; 
    background-image: url(../images/picture1.jpg); 
    background-size: cover; 
} 

.block:nth-child(even) { 
background-image: 
height: 638px; 
    background-image: url(../images/pictureNew.jpg); 
    background-size: cover; 
}

来源

2013-09-29 21:19:48 Anobik

有一个核心滑块类

.slider{ 
    opacity:1 
    -webkit-transition:opacity 500ms; 
    -moz-transition:opacity 500ms; 
    -ms-transition:opacity 500ms; 
    transition:opacity 500ms; 
} 

.hideSlide{ 
    opacity:0 
}

这将导致不透明度的渐变。然后，您可以使用隐藏幻灯片类更改不透明度，并在透明时更改背景图像。然后删除隐藏幻灯片类，它会淡入。

或者，你可以有一个divs叠放在另一个之上，以渐增的长度500ms 1000ms，1500ms等渐渐出现，以暴露给观众。

来源

2013-09-29 21:45:35

感谢Brandon。但是不知道如何实现这个？html代码的样子是什么样子？还有，您会在哪里设置100％的宽度和background-si泽：封面？感谢您的 – Greg

HTML会是这个样子 <段类=“滑”> OR

所有的CSS将进入滑块类。 hideSlide类只能隐藏幻灯片。 –

DIV - 替代背景图片

回答

相关问题