使用jQuery背景图像转换

我做了一个小小的jQuery代码，改变了框中的背景图像。使用jQuery背景图像转换

HTML

<div class="content-wrapper" id="box"> 
    <div class="content"> 
     CONTENT 
    </div> 
</div>

jQuery的

 slide=Math.floor((Math.random() * 6) + 1); slide=(slide==0?1:slide); 
     $("#box").attr("style", "background-image:url(images/slider/"+(slide)+".jpg);"); 
     setInterval(function() { 
      $("#box").attr("style", "background-image:url(images/slider/"+(slide)+".jpg);"); 
      slide++; if(slide>6) slide=1; 
     }, 6000 
);

CSS

.content-wrapper{ 
    display:table; 
    width:100%; 
    color:black; 
    text-align:center; 
    margin:0 0 0 0 !important; 
    padding:0px !important; 
    height:600px; 
} 
.content-wrapper > .content{ 
    width:100%; 
    display: table-cell; 
    vertical-align:middle; 
    text-align:center; 
    font-size:36px; 
    font-weight:bold; 
} 
#box { 
    background-repeat: no-repeat; 
    background-position:center top; 
    background-attachment:fixed; 
    background-size:cover; 
} 
#box > .content{ 
    background:rgba(0,0,0,0.5); 
    color:#FFF; 
}

DEMO

我的想法是当页面加载时，每次显示随机图片和启动幻灯片，每6秒更换一次图片。所有这些都很好，但我不知道如何进行一个很好的转换。 fadeIn（）或fadeOut（）不存在问题，因为在图像上我已经修复了文本内容。我不想为背景滑块使用过大的库，所以我对最简单的解决方案感兴趣。非常感谢你。

来源

2014-09-13 Ivijan Stefan Stipić

所以你想让我们为你决定你应该做什么样的过渡？这是一个视觉设计问题。在文字和图像之间使用文本和图像之间的某种背景层（例如，阴影，彩色矩形），可以保证足够的对比度和易读性，无论文字如何，无论图像如何，均可使用淡入淡出。 – pixeline 2014-09-13 08:28:10

很高兴将你的代码粘贴在小提琴上 – 2014-09-13 08:28:39

好主意@ManProgrammer [DEMO]（http://jsfiddle.net/CreativForm/yjq6opLv/） – 2014-09-14 07:54:53

所以，如果你想左右滑动Fiddle:Demo：

$(document).ready(function() { 
    var delay = 3000, 
     fade = 1000; 
    var banners = $('.banner'); 
    var len = banners.length; 
    var i = 0; 
    setTimeout(cycle, delay); 

    function cycle() { 
     $(banners[i % len]).hide("slide", function(){ 
      $(banners[++i % len]).show("slide", { 
       direction: "left" 
      }); 
      setTimeout(cycle, delay); 
     }); 
    } 
});

如果要向上和向下滑动：Fiddle

$(document).ready(function() { 

    var delay = 3000, fade = 1000; 
    var banners = $('.banner'); 
    var len = banners.length; 
    var i = 0; 

    setTimeout(cycle, delay); 

    function cycle() { 
     $(banners[i%len]).slideUp(fade, function() { 
      $(banners[++i%len]).slideDown(fade, function() { 
       setTimeout(cycle, delay); 
      }); 
     }); 
    } 

});

你可以尝试结合这些拿出一个漂亮的过渡。

来源

2014-09-13 08:44:17

这是惊人的，但并不完全是我在寻找的东西。看[DEMO]（http://jsfiddle.net/CreativForm/yjq6opLv/）。你改变整个DIV和内容。我需要以某种方式在背景中制作一张幻灯片以进行某种效果或过渡。但这是我尝试一些事情的好基础。谢谢！ – 2014-09-14 07:59:44

使用jQuery背景图像转换

回答

相关问题