幻灯片中的hrefs

时间：2014-11-17 03:02:17

标签： jquery slideshow

我使用此幻灯片http://jsfiddle.net/rCd26/2/并进行了一些更改 - ＆gt; http://jsfiddle.net/rCd26/386/

但我需要两件事：

1）分页 - 我需要从分页链接到适当的图像。

2）如果你从最后一张图像到第一张图像，从头到尾，你会看到只有空格。

旧版代码

HTML：

<div class="slideshow">
    <img src="http://placehold.it/500x100/0000CD&text=1" width="500" height="100" alt="first image">
    <img src="http://placehold.it/500x100/008000&text=2" width="500" height="100" alt="second image">
    <img src="http://placehold.it/500x100/B22222&text=3" width="500" height="100" alt="third image">
    <img src="http://placehold.it/500x100/F4A460&text=4" width="500" height="100" alt="fourth image">
</div>
<button id="prev">Prev</button>
<button id="next">Next</button>

CSS：

.slideshow {
    position: relative;
    /* necessary to absolutely position the images inside */
    width: 500px;
    /* same as the images inside */
    height: 100px;
}
.slideshow img {
    position: absolute;
    display: none;
}
.slideshow img:first-child {
    display: block;
    /* overrides the previous style */
}

JS：

var interval = undefined;
$(document).ready(function () {
    interval = setInterval(getNext, 2000); // milliseconds
    $('#next').on('click', getNext);
    $('#prev').on('click', getPrev);
});

function getNext() {
    var $curr = $('.slideshow img:visible'),
        $next = ($curr.next().length) ? $curr.next() : $('.slideshow img').first();

    transition($curr, $next);
}

function getPrev() {
    var $curr = $('.slideshow img:visible'),
        $next = ($curr.prev().length) ? $curr.prev() : $('.slideshow img').last();
    transition($curr, $next);
}

function transition($curr, $next) {
    clearInterval(interval);

    $next.css('z-index', 2).fadeIn('slow', function () {
        $curr.hide().css('z-index', 0);
        $next.css('z-index', 1);
    });

}

新版本

HTML：

<div class="slideshow">
    <div class="arrow-left" id="prev"></div>
    <img src="http://www.theextramilewithcharlie.com/wp-content/uploads/2014/02/MovingTargetMobile_f2.jpg" width="360" height="222" alt="Yellow" class="slide">
    <img src="https://www.digitec.ch/img/t-1-64-E8454026A2BFADCFE29E820F854838F4/disk2go-usb-stick-nano-16gb-usb-20-red-usb-flash-drive.png" width="360" height="222" alt="Red" class="slide">
    <img src="https://www.digitec.ch/img/t-1-64-605CE6EB9472BEB7A267A29F5F052D6B/kef-c6lcr-black-center-speaker-hifi-homecinema-speaker.png" width="360" height="222" alt="Black" class="slide">
    <img src="http://www.qishop.cyklomax.cz/RM-14-Cross-100-18-black-blue-white-_a45681105_10639.aspx?fm=0&width=360" width="360" height="222" alt="Blue" class="slide">
<div class="arrow-right" id="next"></div>

<div class="pagination" style="position: relative; top: 280px;">
    <div class="yellow"></div>
    <div class="red"></div>
    <div class="black"></div>
    <div class="blue"></div>
</div>
</div>

CSS：

.slideshow {
    position: relative;
    /* necessary to absolutely position the images inside */
    width: 500px;
    /* same as the images inside */
    height: 100px;
}
.slideshow img {
    position: absolute;
    display: none;
}
.slideshow img:first-child {
    display: block;
    /* overrides the previous style */
}
.arrow-left{
    float:left;
    width:15px;
    height:25px;
    background:url(http://eshop.lukasholeczy.eu/images/arrowhover.png) 0 0 no-repeat;
    cursor: pointer;
    transition: background 0.3s;
    position:absolute;
    left:0px;
    top:0px;
    bottom:0px;
    margin:auto;
}

.arrow-left:hover{
    background:url(http://eshop.lukasholeczy.eu/images/arrow.png) 0 0 no-repeat;
}

.arrow-right{
    float:right;
    width:15px;
    height:25px;
    background:url(http://eshop.lukasholeczy.eu/images/arrowhover.png) 0 0 no-repeat;
    cursor: pointer;
    transition: background 0.3s;
    position:absolute;
    right:0px;
    top:0px;
    bottom:0px;
    margin:auto;
    -ms-transform: rotate(180deg); /* IE 9 */
    -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
    transform: rotate(180deg);
}

.arrow-right:hover{
    background:url(http://eshop.lukasholeczy.eu/images/arrow.png) 0 0 no-repeat;
}

.pagination{
    width:100%;
    float:left;
    position:absolute;
    bottom:0px;
    height:3px;
}

.yellow{
    display:inline-block;
    width:54px;
    height:3px;
    cursor:pointer;
    background:#ffd631;
}

.yellow:hover{
    height:7px !important;
}

.red{
    display:inline-block;
    width:54px;
    height:3px;
    cursor:pointer;
    background:#ff5e5e;
}

.red:hover{
    height:7px !important;
}

.black{
    display:inline-block;
    width:54px;
    height:3px;
    cursor:pointer;
    background:#3b3b3b;
}

.black:hover{
    height:7px !important;
}

.blue{
    display:inline-block;
    width:54px;
    height:3px;
    cursor:pointer;
    background:#52708a;
}

.blue:hover{
    height:7px !important;
}

JS是一样的。

非常感谢大家。

1 个答案:

答案 0 :(得分：0)

有一些事情：

  • 幻灯片div的完成标记没有平衡。
  • 导航（左/右）按钮是幻灯片div的一部分，这就是您输入空白条目的原因 - 它是导航按钮。
  • 左侧按钮被隐藏，因此我将其移出幻灯片div并将其偏移了20px。
  • 没有指向页面导航的链接。您在alt中有类名，但我认为最好不要使用alt属性，因为这是为了可访问性。相反，我使用了data-linked-class属性。我还在CSS中添加了一个indicatePage类来打开或关闭高度。
  • 没有重新发布间隔，所以它只会循环一次。这里的计时器可能是更合适的选择，您可以在每次转换时重新发出计时器。我暂时把它作为间隔。
  • 不确定为什么页面链接在悬停时增长。如果你想进入适当的页面，那么你可以对我为显示页面链接所做的工作进行类似的更改，但反之亦然。

如果您希望页面链接也淡入/淡出，您可以使用动画淡化addClass / removeClass过渡。

根据评论进行更新

  • 添加了“nav”类，将颜色类更改为id。
  • 在$ .ready（）
    • 中链接回img函数
  • 如果不是计时器驱动的事件，则取消间隔，这是我认为您想要做的。 

var interval = undefined;
$(document).ready(function() {
  interval = setInterval(function() {
    getNext(null, true);
  }, 2000); // milliseconds
  $('#next').on('click', getNext);
  $('#prev').on('click', getPrev);
  $('.nav').click(function() {
    var $next = $('img[data-linked-id=' + this.id + ']');
    var $curr = $('.slideshow img:visible');
    transition($curr, $next, false);
  });
});

function getNext(event, keepInterval) {
  var $curr = $('.slideshow img:visible'),
    $next = ($curr.next().length) ? $curr.next() : $('.slideshow img').first();

  transition($curr, $next, keepInterval);
}

function getPrev() {
  var $curr = $('.slideshow img:visible'),
    $next = ($curr.prev().length) ? $curr.prev() : $('.slideshow img').last();
  transition($curr, $next);
}

function transition($curr, $next, keepInterval) {
  if (!keepInterval) {
    clearInterval(interval);
  }
  $next.css('z-index', 2).fadeIn('slow', function() {
    $curr.hide().css('z-index', 0);
    $next.css('z-index', 1);
    $('#' + $curr.attr('data-linked-id')).removeClass('indicatePage');
    $('#' + $next.attr('data-linked-id')).addClass('indicatePage');
  });
}
.slideshow {
  position: relative;
  /* necessary to absolutely position the images inside */
  width: 500px;
  /* same as the images inside */
  height: 100px;
  left: 20px;
}
.slideshow img {
  position: absolute;
  display: none;
}
.slideshow img:first-child {
  display: block;
  /* overrides the previous style */
}
.arrow-left {
  float: left;
  width: 15px;
  height: 25px;
  background: url(http://eshop.lukasholeczy.eu/images/arrowhover.png) 0 0 no-repeat;
  cursor: pointer;
  transition: background 0.3s;
  position: absolute;
  left: 0px;
  top: 0px;
  bottom: 0px;
  margin: auto;
}
.arrow-left:hover {
  background: url(http://eshop.lukasholeczy.eu/images/arrow.png) 0 0 no-repeat;
}
.arrow-right {
  float: right;
  width: 15px;
  height: 25px;
  background: url(http://eshop.lukasholeczy.eu/images/arrowhover.png) 0 0 no-repeat;
  cursor: pointer;
  transition: background 0.3s;
  position: absolute;
  right: 0px;
  top: 0px;
  bottom: 0px;
  margin: auto;
  -ms-transform: rotate(180deg);
  /* IE 9 */
  -webkit-transform: rotate(180deg);
  /* Chrome, Safari, Opera */
  transform: rotate(180deg);
}
.arrow-right:hover {
  background: url(http://eshop.lukasholeczy.eu/images/arrow.png) 0 0 no-repeat;
}
.pagination {
  width: 100%;
  float: left;
  position: absolute;
  bottom: 0px;
  height: 3px;
}
#yellow {
  display: inline-block;
  width: 54px;
  height: 3px;
  cursor: pointer;
  background: #ffd631;
}
#yellow:hover {
  height: 7px !important;
}
#red {
  display: inline-block;
  width: 54px;
  height: 3px;
  cursor: pointer;
  background: #ff5e5e;
}
#red:hover {
  height: 7px !important;
}
#black {
  display: inline-block;
  width: 54px;
  height: 3px;
  cursor: pointer;
  background: #3b3b3b;
}
#black:hover {
  height: 7px !important;
}
#blue {
  display: inline-block;
  width: 54px;
  height: 3px;
  cursor: pointer;
  background: #52708a;
}
#blue:hover {
  height: 7px !important;
}
.indicatePage {
  height: 7px !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="arrow-left" id="prev"></div>
<div class="slideshow">
  <img src="http://www.theextramilewithcharlie.com/wp-content/uploads/2014/02/MovingTargetMobile_f2.jpg" width="360" height="222" data-linked-id='yellow' alt="Yellow" class="slide" />
  <img src="https://www.digitec.ch/img/t-1-64-E8454026A2BFADCFE29E820F854838F4/disk2go-usb-stick-nano-16gb-usb-20-red-usb-flash-drive.png" width="360" height="222" alt="Red" data-linked-id='red' class="slide" />
  <img src="https://www.digitec.ch/img/t-1-64-605CE6EB9472BEB7A267A29F5F052D6B/kef-c6lcr-black-center-speaker-hifi-homecinema-speaker.png" width="360" height="222" alt="Black" data-linked-id='black' class="slide" />
  <img src="http://www.qishop.cyklomax.cz/RM-14-Cross-100-18-black-blue-white-_a45681105_10639.aspx?fm=0&width=360" width="360" height="222" alt="Blue" data-linked-id='blue' class="slide" />
</div>
<div class="arrow-right" id="next"></div>
<div class="pagination" style="position: relative; top: 280px;">
  <div id="yellow" class="nav"></div>
  <div id="red" class="nav"></div>
  <div id="black" class="nav"></div>
  <div id="blue" class="nav"></div>
</div>

相关问题
最新问题