CSS background-image slideshow

后端未结

关注

 4  1629

I am pretty new to CSS and HTML, but I am learning the ropes. Right now, I have a background image on my header section and I am trying to turn this into a slideshow with 3-

相关标签:

4条回答

名媛妹妹

2020-12-08 06:33

<html>
<head>
    <style>
        body {
            background-image: url(1.png);
            background-size: 99% 300px;
            background-repeat: repeat-x;
            animation: slideLeft 5s linear infinite;
            background-position: 0% 100%;
        }

        @keyframes slideLeft {
            to {
                background-position: 9900% 100%;
            }
        }

        @-moz-keyframes slideLeft {
            to {
                background-position: 9900% 100%;
            }
        }

        @-webkit-keyframes slideLeft {
            to {
                background-position: 9900% 100%;
            }
        }
    </style>
</head>
<body>
</body>
</html>

0 讨论(0)

长情又很酷

2020-12-08 06:43

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.

0 讨论(0)

孤街浪徒

2020-12-08 06:44

Use following

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

0 讨论(0)

粉色の甜心

2020-12-08 06:45

Made modifications to this answer.

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%;
    }
}

Bascially, just make your image into a sprite (combine them into 1 file), then use left: to cycle thru them. (Of course modify the left and percent values to your liking)

0 讨论(0)