Question

我需要帮助将标记（气泡）添加到简单的内容幻灯片中，这将有助于用户在div之间切换。

HTML：

<div id="slideshow">

  <div style="background:green;"></div>
  <div style="background:blue;"></div>
  <div style="background:red;"></div>
  <div style="background:grey;"></div>

  // etc

</div>

CSS：

#slideshow { position:absolute; margin:0; width:100%; height:50%; }

#slideshow > div { position:absolute; width:100%; height:100%; }

JS：

$("#slideshow > div:gt(0)").hide();

 setInterval(function() { 
 $('#slideshow > div:first')
.fadeOut(1000)
.next()
.fadeIn(1000)
.end()
.appendTo('#slideshow');
},  3000);

JSFIDDLE DEMO

Answer 1

尝试这样的事情：

<强> HTML

<div id="slideshow">

  <div class="slide" id="div1" style="background:green;"></div>
  <div class="slide" id="div2" style="background:blue;"></div>
  <div class="slide" id="div3" style="background:red;"></div>
  <div class="slide" id="div4" style="background:grey;"></div>

  // etc
  <ul id="nav">
    <li><a data-showdivid="div1"></a></li>
    <li><a data-showdivid="div2"></a></li>
    <li><a data-showdivid="div2"></a></li>
    <li><a data-showdivid="div2"></a></li>
  </ul>
</div>

<强> CSS

#slideshow {position:relative;)

#nav {list-style:none;padding:0;margin:0;position:absolute;/*etc*/}
#nav > li {margin:10px;padding:0;display:inline-block;}
#nav > li > a {display:block;width:30px;height:30px;border-radius:15px;background:#fff;box-shadow:0 0 2px 2px rgba(0,0,0,0.2);}

<强>的Javascript

$('#nav > li > a').click(function(){
    var clicked = $(this);
    var showDivId= clicked.data('showdivid');
    $('div.slide').not('#' + showDivId).fadeOut();
    // or however you manage the transitions
});

自动添加气泡

您可以使用javascript自动附加气泡。首先在html中添加一个空<ul id="nav"></ul>。然后在页面加载时，调用这样的函数：

$('#slideshow > div.slide').each(function(){
    var divId = $(this).attr('id');
    $('ul#nav').append('<li><a data-showdivid="'+ divId +'"></a></li>');
});

$('#slideshow').on('click', 'ul#nav > li > a', function(){
    var clicked = $(this);
    var showDivId= clicked.data('showdivid');
    $('div#'+showDivId).fadeIn();
    $('div.slide').not('#' + showDivId).fadeOut();
    // or however you manage the transitions
});

小提琴：http://jsfiddle.net/h961yskc/

Answer 2

如果你添加这样的寻呼机：

residuals

然后，您可以将一些javascript事件连接到<ul class="pager"> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> </ul>标签，如下所示：

<a>

请参阅此demo。

将标记（气泡）添加到简单的内容幻灯片中

2 个答案: