web-dev-qa-db-ja.com

CSS背景画像スライドショー

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

助けてくれてありがとう！

htmlcssimageslideshow
10
user3342697

以下を使用

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

この回答 に変更を加えました。

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

基本的に、画像をSpriteにして（それらを1つのファイルに結合するだけです）、left:それらを循環します。 （もちろん、必要に応じて左とパーセントの値を変更します）

10
bjb568

この質問に対する受け入れられた答えに基づいて、ランダムな画像スライドショーを作成し、遷移にCSS3を使用し、HTML5 data属性を介して画像パスを取得するjQuery依存バージョンを次に示します。

デモ：https://jsbin.com/luhawu/1

注：最良の結果を得るには、すべての画像を同じ寸法にする必要があります。

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

縮小：

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

また、 コードを公開要点に入れる 。

4
mhulse
<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>
1
nativegrip