Question

我有一个项目来制作图像滑块，其规格如下： - 无限循环 - 两排 - 当我按下一个或上一个按钮时，滑块应移动下一个图像的宽度（即将出现的图像）我的HTML：

<div class="mid">
<div class="sliderpos1">
<div class="slidemove">
    <span id="addimage"><img src="img/slider-image-1.jpg"></span>
    <span id="addimage"><img src="img/slider-image-2.jpg"></span>
    <span id="addimage"><img src="img/slider-image-3.jpg"></span>
    <span id="addimage"><img src="img/slider-image-4.jpg"></span>
    <span id="addimage"><img src="img/slider-image-5.jpg"></span>
    <br>
    <span id="addimage"><img src="img/slider-image-6.jpg"></span>
    <span id="addimage"><img src="img/slider-image-7.jpg"></span>
    <span id="addimage"><img src="img/slider-image-8.jpg"></span>
    <span id="addimage"><img src="img/slider-image-9.jpg"></span>
  </div>

    </div>
    <button class="button1" id="prev"></button>
    <button class="button2" id="next"></button>

</div>

我的CSS：

.sliderpos1 {
    position: absolute;
    height: 420px;
    display: block;
    left: auto;
    overflow: hidden;
    right: 700px;
    top: 200px;
    margin: 0 auto;
    width: 1400px;
}
.sliderpos1 img {
    width: auto;
    height: 200px;
    border-radius:10px;
    padding:5px;
    float:left;
    display:block;
}

.slidemove {
    position: relative;
}

这里是我的jquery：

$(function () {

    var gallery = $('.slidemove'),
        items = gallery.find('span'),
        len = items.length,
        current = 1,
        first = items.filter(':first'),
        last = items.filter(':last'),
        imgwidth = $('img').last().width(),
        triggers = $('button');

    first.before(last.clone(true));
    last.after(first.clone(true));

    triggers.on('click', function () {
        if (gallery.is(':not(:animated)')) {
            var cycle = false,
                delta = (this.id === "prev") ? -1 : 1;
            gallery.animate({ left: "+=" + (imgwidth * delta) }, function () {
                current += delta;
                cycle = !!(current === 0 || current > len);
                if (cycle) {
                    current = (current === 0) ? len : 1;
                    gallery.css({ right: imgwidth });
                }
            });
        }
    });
});

我遇到克隆第一张和最后一张图片的问题并且不知道该怎么做，也有一个问题是实现即将到来的图像宽度以将其滑动到该尺寸。如果有人可以帮忙解决这个问题，那将会很好，或者至少如何克隆并显示下一张图片。

Answer 1

管理以添加一些基本克隆功能。

根据js代码中的评论，我留给你的工作做得更好。

还解决了css中<br>元素的问题。

$(function () {

var gallery = $('.slidemove'),
    items = gallery.find('span'),
    len = items.length,
    current = 1,
    first = items.filter(':first'),
    last = items.filter(':last'),
    imgwidth = $('img').last().width(),
    triggers = $('button');

var htmlarr = $(".slidemove").html().split("<br>");
var addtotop = htmlarr[0];
var addtobottom = htmlarr[1];
var appendtotop = $(".slidemove br").prev();
var appendtobottom = $(".slidemove span").last();
//left to you calculate the correct width to add
var widthtoadd = 1400;

triggers.on('click', function () {
            //left to you append cloned element only when needed (when there are are gonna be no more visible elements for slideshow, not at every click)
        $(appendtotop).after(addtotop);
    $(appendtobottom).after(addtobottom);
    gallery.width(gallery.width() + widthtoadd);
    if (gallery.is(':not(:animated)')) {                
        var cycle = false,
            delta = (this.id === "prev") ? -1 : 1;                    //there is something wrong on calculation of css left add for "prev" action
        gallery.animate({ left: "+=" + (imgwidth * delta) }, function () {
            current += delta;
            cycle = !!(current === 0 || current > len);
            if (cycle) {
                current = (current === 0) ? len : 1;
                gallery.css({ right: imgwidth });
            }
        });
    }
});
});

这是我的分叉小提琴https://jsfiddle.net/bzd5eutx/

作为最后一条评论我会说如果从0编写代码并不像重新发明轮子那样，假设有很多js libs用于简单的幻灯片播放。

Jquery自定义图像滑块具有不同的图像宽度

1 个答案: