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; 
and the 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>
//Here use 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

您不会将HTML和CSS用于轮播。虽然有一些很酷的实验，但我会回避在生产网站上使用它。你很可能会使用jQuery。如果您不熟悉前端开发并希望设置滑块并转到项目的其余部分，我建议您使用插件。

这是一个可以使用的流行jQuery插件：http://dev7studios.com/plugins/nivo-slider/

如果您想学习如何创建自己的，请尝试按照创建类似滑块的教程。然后尝试使用代码来使其达到您想要的确切状态。

以下是上述教程的示例：http://paulmason.name/item/simple-jquery-carousel-slider-tutorial

Answer 3

我认为取决于你正在做的动画取决于你可以使用的技术。

如果要滑动图像，可以使用CSS3动画在图像之间滑动。但这意味着您必须制作一个包含所有图像的大图像，并在一个周期中更改背景图像位置。

这可能会有所帮助：

http://designshack.net/articles/css/infinitephotobanner/

或者您可以尝试使用以下方法设置不同的后台类并在计时器上实现类的更改：

$(document).ready(function(){
  var seconds = 5000; // set in milliseconds
  var step = 1; // place to start
  var limit = 3; //limit of background images (remember that 0 is the start so 3 is for 4 background images)

  $(".global-header").addClass("banner"+step).fadeIn(1000);

  setInterval(function(){
    $(".global-header").fadeOut(500,function(){
       $(this).removeClass("banner"+step);
       step = (step > limit) ? 1 : step + 1;
      $(".global-header").addClass("banner"+step).fadeIn(1000);
    });
  },seconds);
});

然后使用不同的类作为背景图像。（在这个例子中我使用过.banner）：

.banner1{
background:url(../images/something.jpg);
}
.banner2{
background:url(../images/somethingElse.jpg);
}
.banner3{
background:url(../images/soemthingElseAgain.jpg);
}

你可以体验不同范围的J-query效果，为了简单起见，我使用了fadeIn。

希望这有帮助。

CSS3定时动画的背景图像

3 个答案: