CSS背景图片幻灯片

Question

我是CSS和HTML的新手,但我正在学习绳索.现在,我的标题部分有一个背景图像,我试图把它变成幻灯片,在计时器上拖着3-4张图像.

我看过一些通过HTML使用图像的教程,但我设置的方式是将CSS属性background-image设置为我的图像.

如果这没有意义,这里是CSS

.global-header {
    min-height:600px;
    background-image: url("Assets/BGImages/head_sandwichman.jpg");
    background-size: cover;
    text-align: center;
}

和HTML

<header class="container global-header">
    <div class="inner-w">
        <div class='rmm' data-menu-style = "minimal">
            <ul>
                <li><a href="index.html">HOME</a></li>
                <li><a href="menu.html">MENU</a></li>
                <li><a href="findus.html">FIND US</a></li>
                <li><a href="about.html">ABOUT</a></li> 
           </ul>
        </div>
    <div class="large-logo-wrap">
        <img src="Assets/Logos/Giadaslogoindexwhitebig.png" />
    </div>
</div>

谢谢您的帮助!

Answer 1

使用以下

 <script>
//Array of images which you want to show: Use path you want.
var images=new Array('Assets/BGImages/head_sandwichman1.jpg','Assets/BGImages/head_sandwichman2.jpg','Assets/BGImages/head_sandwichman3.jpg');
var nextimage=0;
doSlideshow();

function doSlideshow(){
    if(nextimage>=images.length){nextimage=0;}
    $('.global-header')
    .css('background-image','url("'+images[nextimage++]+'")')
    .fadeIn(500,function(){
        setTimeout(doSlideshow,1000);
    });
}
</script>

Answer 2

对此答案进行了修改.

http://jsfiddle.net/qyVMj/

#graphic:before {
    content: '';
    position: absolute;
    width: 400%;
    height: 100%;
    z-index: -1;
    background: url(http://placekitten.com/500/500/) repeat; /* Image is 500px by 500px, but only 200px by 50px is showing. */
    animation: slide 3s infinite;
}
@keyframes slide {
    20% {
        left: 0;
    }
    40%, 60% {
        left: -50%;
    }
    80%, 100% {
        left: -100%;
    }
}

基本上,只需将您的图像变成精灵(将它们组合成1个文件),然后使用left:它们循环.(当然根据自己的喜好修改左边和百分比值)

Answer 3

Based on the accepted answer for this question, here’s a jQuery-dependent version that creates a random image slideshow, uses CSS3 for the transition and gets the image paths via HTML5 data attribute.

Demo: https://jsbin.com/luhawu/1

Note: All images should be same dimensions for best results.

JS:

(function($) {

    'use strict';

    var $slides = $('[data-slides]');
    var images = $slides.data('slides');
    var count = images.length;
    var slideshow = function() {
        $slides
            .css('background-image', 'url("' + images[Math.floor(Math.random() * count)] + '")')
            .show(0, function() {
                setTimeout(slideshow, 5000);
            });
    };

    slideshow();

}(jQuery));

Minified:

!function(t){"use strict";var a=t("[data-slides]"),s=a.data("slides"),e=s.length,n=function(){a.css("background-image",'url("'+s[Math.floor(Math.random()*e)]+'")').show(0,function(){setTimeout(n,5e3)})};n()}(jQuery);

CSS:

[data-slides] {
    background-image: url(../../uploads/banner1.jpg); /* Default image. */
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
    transition: background-image 1s linear;
}

/* Use additional CSS to control the `height` of `[data-slides]`, like so: */

.test { height: 220px; }
@media all and (min-width: 48em) {
    .test { height: 320px; }
}

HTML

<div
    class="test"
    data-slides='[
        "uploads/banner1.jpg",
        "uploads/banner2.jpg",
        "uploads/banner3.jpg",
        "uploads/banner4.jpg",
        "uploads/banner5.jpg",
        "uploads/banner6.jpg",
        "uploads/banner7.jpg",
        "uploads/banner8.jpg",
        "uploads/banner9.jpg"
    ]'
> … </div> <!-- /.primary -->

I’ve also put the code in a public Gist.