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

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

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

Answer 3

基于此问题的接受答案，这是一个依赖于jQuery的版本，可以创建随机图像幻灯片，使用CSS3进行转换，并通过HTML5 data属性获取图像路径。

演示： 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 -->

我也put the code in a public Gist。

Answer 4

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

CSS背景图片幻灯片

4 个答案:

JS：

CSS：

HTML