Question

我是JS的新手，有真正的问题可以解决一些问题并希望有人能帮助我。

图片不是全尺寸
如果您调整大小并单击导航将以100英里/小时的速度继续
当你调整大小时没有正确调整图像/轮播的大小
我尝试添加getImageSizes函数来获取更改的图像大小设置lis但那不工作以太

正如我所说的非常新，这是一项新工作，所以今天真的需要这样做：（

JS：

jQuery(document).ready(function ($) {
  //get width of document here and set to li
    setConfig();
    //getImageSizes();

    $(window).resize(function () {
        setConfig();
        //getImageSizes();
    });

    var slideCount, slideWidth, slideHeight, sliderULWidth;

    function setConfig() {
        $('#gallery-slider ul li').css({
            "width": ($(window).width() - 200), "height": $(window).height() - 200
        });

        slideCount = $('#gallery-slider ul li').length;
        slideWidth = $('#gallery-slider ul li').width();
        slideHeight = $('#gallery-slider ul li').height();
        sliderULWidth = slideCount * slideWidth;

        $('#gallery-slider').css({
            width: slideWidth,
            height: slideHeight
        });

        $('#gallery-slider ul').css({
            width: sliderULWidth,
            marginLeft: -slideWidth
        });

        $('#gallery-slider ul li:last-child').prependTo('#gallery-slider ul');


        $('#gallery-slider a.control_prev').on('click', function () {
            moveLeft();
            return false;
        });

        $('#gallery-slider a.control_next').on('click', function () {
            moveRight();
            return false;
        });
    }

    function getImageSizes() {
        $("#gallery-slider ul li img").each(function () {
            var $this = $(this);
            $('#gallery-slider ul li').css({ "width": $this.width(), "height": $this.height() });
            console.log($this.width());
            console.log($this.height());
        });
    }

    function moveLeft() {
        $('#gallery-slider ul').animate({
            left: +slideWidth
        }, 200, function () {
            $('#gallery-slider ul li:last-child').prependTo('#gallery-slider ul');
            $('#gallery-slider ul').css('left', '');
        });
    }

    function moveRight() {
        $('#gallery-slider ul').animate({
            right: -slideWidth
        }, 200, function () {
            $('#gallery-slider ul li:first-child').appendTo('#gallery-slider ul');
            $('#gallery-slider ul').css('right', '');
        });
    }
});

http://codepen.io/anon/pen/MYwPXQ

提前致谢

Answer 1

固定 http://codepen.io/choukroun/pen/OPVBdR

请注意您在moveright()

中使用过的内容

left: +slideWidth

和moveleft()

right: -slideWidth

使用2方向时会感到困惑，通常最好只使用left/right 为了获得更好的性能，我建议您使用transform: translate

Answer 2

我不会从头开始编码。有许多jQuery插件（请参阅here，它们正是您所需要的。例如http://fotorama.io/就是这样一个插件。请参阅下面的示例。您还可以在jsFiddle here

galleria.io也是一个很好的画廊滑块。我已经将它用于生产中的小网页。

这更容易。请查看用于自定义的fotorama页面（例如自动播放，缩略图等）

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.2/fotorama.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.2/fotorama.css" rel="stylesheet" />
<div class="fotorama">
  <img src="http://s.fotorama.io/1.jpg" />
  <img src="http://s.fotorama.io/2.jpg" />
</div>

＆＃13;

jQuery轮播/图库无法正常工作

2 个答案: