时间戳

首页 > 解决方案 > JQuery如何正确设置滑块效果

javascript - JQuery如何正确设置滑块效果

问题描述

我想在 jQuery 中创建简单的背景图像滑块。一切正常，除了动画。我认为它应该是这样的：

  1. 淡出图像
  2. 当用户看不到时更改图像
  3. 淡入新图像

但我得到了一些不同的东西，我觉得第一张照片发生了变化，然后图像淡出。

我尝试延迟（），但没有工作，并隐藏（），但它使动画太不自然。

这里我在 jsfiddle 中创建了示例，请看一下： https ://jsfiddle.net/xpvt214o/375627/

$('.background').fadeOut(1000).css('background-image', 
'url('+images[whichone++]+')')
.fadeIn(1000);

我怎样才能改变这个？

$(document).ready(function(){
var images= ['https://images.pexels.com/photos/46710/pexels-photo-46710.jpeg?cs=srgb&dl=beach-sand-summer-46710.jpg&fm=jpg','https://images.pexels.com/photos/219998/pexels-photo-219998.jpeg?cs=srgb&dl=beach-birds-calm-219998.jpg&fm=jpg','https://images.pexels.com/photos/207962/pexels-photo-207962.jpeg?cs=srgb&dl=artistic-blossom-bright-207962.jpg&fm=jpg'];

var howmany = images.length;
var whichone = 0;

function slideSwitch(){
if(whichone >= howmany-1 ) { whichone = 0}
$('.background').fadeOut(1000).css('background-image', 'url('+images[whichone++]+')')
.fadeIn(1000);
}
	setInterval(slideSwitch, 5000);


});
.background{
   background: cover;
    position:fixed;
    width: 100%;
    height: 100%;
    left:0;
    top:0;
    background-image: url("https://images.pexels.com/photos/207962/pexels-photo-207962.jpeg?cs=srgb&dl=artistic-blossom-bright-207962.jpg&fm=jpg") ;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="background"></div>

<div class="content">

标签： javascriptjquery

解决方案

尝试如下所示

添加 transition: background-image 2s;并更改了您的js。你的background:cover风格也错了。应该是background-size: cover;

$(document).ready(function() {
  var images = ['https://images.pexels.com/photos/46710/pexels-photo-46710.jpeg?cs=srgb&dl=beach-sand-summer-46710.jpg&fm=jpg', 'https://images.pexels.com/photos/219998/pexels-photo-219998.jpeg?cs=srgb&dl=beach-birds-calm-219998.jpg&fm=jpg', 'https://images.pexels.com/photos/207962/pexels-photo-207962.jpeg?cs=srgb&dl=artistic-blossom-bright-207962.jpg&fm=jpg'];

  var howmany = images.length;
  var whichone = 0;

  function slideSwitch() {
    if (whichone >= howmany - 1) {
      whichone = 0
    }
    $('.background').css('background-image', 'url(' + images[whichone++] + ')');
  }
  setInterval(slideSwitch, 5000);


});
.background {
  background-size: cover;
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  transition: background-image 2s;
  background-image: url("https://images.pexels.com/photos/207962/pexels-photo-207962.jpeg?cs=srgb&dl=artistic-blossom-bright-207962.jpg&fm=jpg");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="background"></div>

<div class="content">

推荐阅读