Question

我有一个目前有静态背景图像的div，我需要为这个div创建一个背景图像和文本的幻灯片。我想淡入背景图像和标题文本。有没有人知道使用jQuery这样做的好方法？我对JavaScript和jQuery的了解非常有限。我尝试使用一些现成的插件作为Backstretch，Responsiveslides，但我无法理解它们并编辑它们供我使用。

以下是我当前的代码：http://jsfiddle.net/1zdyh3wo/

HTML

<div class="content bg-slider">
<div class="wrapper">
    <h1 class="sectionTitle">Image title 1</h1>
    <div class="separator white"></div>
    <h2 class="sectionDescription">This is the description of the first image. Wanna know more? Click here.</h2>

    <div class="nav-wrapper">
        <div class="nav-arrows prev"></div>
        <div class="nav-dots">
            <div class="current"></div>
            <div class=""></div>
            <div class=""></div>
        </div>
        <div class="nav-arrows next"></div>
    </div>
</div>

CSS：

@import url(http://fonts.googleapis.com/css?family=Montserrat:400,700);

/* -- COMMON -- */

body {
    font: 400 14px 'Montserrat', Helvetica, sans-serif;

    letter-spacing: 2px;
    text-transform: uppercase;

    color: white;
}

.separator {
    width: 24px;
    height: 4px;
}
.separator.white {
    background-color: white;
}
.separator.black {
    background-color: black;
}

/* -- MENU -- */



/* -- CANVAS -- */

.content {
    position: absolute;
    z-index: 0;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    overflow: hidden;

    width: 100%;
    height: 100%;
}

.wrapper {
    position: absolute;
    right: 0;
    bottom: 100px;
    left: 0;

    width: 33.333333333%;
    margin: 0 auto;
}

.sectionTitle {
    font: 700 32px/24px 'Montserrat', Helvetica, sans-serif;
    line-height: 24px;

    margin-bottom: 24px;

    letter-spacing: 4px;
}
.sectionDescription {
    font: 400 14px/18px 'Montserrat', Helvetica, sans-serif;

    margin-top: 24px;
}

/* -- SLIDER -- */

.bg-slider {
    background: url(../img/slides/image1.jpg) no-repeat center center fixed;
    background-color: red; /* demo purpose only */
    -webkit-background-size: cover;
       -moz-background-size: cover;
         -o-background-size: cover;
            background-size: cover;
}

/* -- SLIDER - NAVEGATION -- */

.nav-wrapper {
    display: inline-block;

    min-width: 250px;
    margin-top: 24px;

    padding: 4px;
}

/* -- SLIDER - NAVEGATION ARROWS -- */

.nav-arrows {
    float: left;

    width: 20px;
    height: 20px;

    cursor: pointer;
    -webkit-transform: rotate(45deg);
       -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
         -o-transform: rotate(45deg);
            transform: rotate(45deg);

    border: 4px solid white;
}

.nav-arrows.prev {
    border-top: none;
    border-right: none;
}

.nav-arrows.next {
    border-bottom: none;
    border-left: none;
}

/* -- SLIDER - NAVEGATION DOTS -- */

.nav-dots {
    margin: 0px 8px;

    float: left;
}

.nav-dots div{
    float: left;

    width: 12px;
    height: 12px;
    margin: 4px 18px;

    cursor: pointer;

    border-radius: 50%;
    background: rgba(255,255,255,.5);
}

.nav-dots .current:after {
    float: left;

    width: 12px;
    height: 12px;

    content: '';

    border-radius: 50%;
    background: white;
}

这是一个视觉辅助，我希望结果如何：

桌面版：

Desktop version

移动版：

Mobile version

Answer 1

让事情变得非常简单：

制作一个＆＃34;包装＆＃34; div为整个滑块
制作个人＆＃34;包装＆＃34;每张幻灯片的div
将滑块导航放在单个幻灯片之外（我将它完全放在滑块之外，但根据您所需的位置选择它）。
制作一个能完成所有过渡的功能

以下是基于您的

的HTML结构示例

<div id="slider">
  <div class="content bg-slider active">
    <div class="wrapper">
      <h1 class="sectionTitle">Image title 1</h1>
      <div class="separator white"></div>
      <h2 class="sectionDescription">This is the description of the first image. Wanna know more? Click here.</h2>
    </div>
  </div>
  <div class="content bg-slider">
    <div class="wrapper">
      <h1 class="sectionTitle">Image title 2</h1>
      <div class="separator white"></div>
      <h2 class="sectionDescription">This is the description of the second image. Wanna know more? Click here.</h2>
    </div>
  </div>
  <div class="content bg-slider">
    <div class="wrapper">
      <h1 class="sectionTitle">Image title 3</h1>
      <div class="separator white"></div>
      <h2 class="sectionDescription">This is the description of the third image. Wanna know more? Click here.</h2>
    </div>
  </div>
</div>

这是功能性JavaScript，带有注释。

$(document).ready(function(){
  // Hide all slides, re-show first:
  $(".bg-slider").hide()
  $(".bg-slider:first-child").show();

  // Prev button click
  $(".nav-arrows.prev").click(function(){
    slidePrev();
  })

  // Next button click
  $(".nav-arrows.next").click(function(){
    slideNext();
  })

  // "Dots" click
  $(".nav-dots div").click(function(){
    slideTo($(this).index());
  })
});

// "Previous" function must conclude if we are at the FIRST slide
function slidePrev() {
  if ($("#slider .active").index() == 0) {
    slideTo($("#slider .bg-slider").length - 1);
  }
  else {
    slideTo($("#slider .active").index() - 1);
  }
}

// "Next" function must conclude if we are at the LAST slide
function slideNext() {
  if ($("#slider .active").index() == $("#slider .bg-slider").length - 1) {
     slideTo(0);
  }
  else {
    slideTo($("#slider .active").index() + 1);
  }
}

// Slide To will be called for every slide change.  This makes it easy to change the animation, or do what you want during the transition.
function slideTo(slide) {
  $("#slider .active").fadeOut().removeClass("active");
  $("#slider .bg-slider").eq(slide).fadeIn().addClass("active");
  $(".nav-dots .current").removeClass("current");
  $(".nav-dots div").eq(slide).addClass("current");
}

最后，这里有更新的小提琴演示：http://jsfiddle.net/1zdyh3wo/1/

使用带导航和标题的背景图片进行幻灯片放映

1 个答案: