1

我正在创建自己的滑块，我需要一些帮助以使其响应。现在它适用于第一张幻灯片上的响应部分，但是当我转到下一张幻灯片（在这种情况下，任何不是第一个孩子的 li）时，li 的位置和宽度不会加起来，一切都出错了.

很难解释，如果有人可以在这里看一下，我很乐意：

http://robbinj.se/r/

我有一个宽度为 100% 的包装器，每个 li 的宽度都设置为 100% 的包装器宽度。如果您不明白我在尝试转到该页面后的内容，请在第一张幻灯片上调整浏览器的大小，这就是我希望它在所有其他幻灯片上也能正常工作的方式，但我需要一些关于如何做到这一点的想法！

这是jQuery：

    var slideLiWidth = $('#slider').width(),
    slideUl = $('#slider ul'),
    slideLi = $(slideUl).find('li'),
    slides = $(slideLi).length,
    slideNav = $('.slideNav'),
    current = 1;

slideLi.width(slideLiWidth);

$(window).resize(function() {
    var slideLiWidth = $('#slider').width();
    slideLi.width(slideLiWidth);
});

slideNav.click(function() {
    dir = $(this).data('dir');
    transition();
});

function transition() {
    var slideLiWidth = $('#slider').width();
    if (dir === 'next' && current < slides) {
        slideUl.transition({x: '-='+slideLiWidth}, 500, 'ease');
        current++;
    }
    else if (dir === 'back' && current > 1) {
        slideUl.transition({x: '+='+slideLiWidth}, 500, 'ease');
        current--;
    }
}
4

4 回答 4

1

问题在于您计算平移距离的方式。您在添加和减去当前列表项宽度的翻译值时是正确的，但没有考虑到所述值不会随着用户可能调整其视口大小而更新的事实。当然，这只是对于实际上会在浏览中调整其视口大小的用户的问题。例如，任何使用平板电脑的人都不会遇到任何问题。

不过，如果您真的在寻找一个完美的滑块，我会这样做：创建一个变量来记录当前处于活动状态的幻灯片使用该变量来调整平移值以符合调整后的视口

这是该代码的样子：

$(window).resize(function() {
    var slideCounter = 1; // Because the first slide is, well ... first.    
    var slideLiWidth = $('#slider').width();
    slideLi.width(slideLiWidth);
    slideUl.transition({x: '-='+slideCounter*slideLiWidth}, 500, 'ease'); // Adjust the UL's transition value to match the current slide position and width.
});

function transition() {
    var slideLiWidth = $('#slider').width();
    if (dir === 'next' && current < slides) {
        slideUl.transition({x: '-='+slideLiWidth}, 500, 'ease');
        current++;
        slideCounter++; // Increment the counter to keep up.
    }
    else if (dir === 'back' && current > 1) {
        slideUl.transition({x: '+='+slideLiWidth}, 500, 'ease');
        current--;
        slideCounter--; // Increment the counter to keep up.
    }
}

我已经评论了添加的行，虽然我实际上无法测试上面的代码，但我很确定它会起作用。如果没有，至少我为你指明了正确的方向。

干杯!

于 2013-04-10T08:04:47.080 回答
1

问题与选择以像素为单位指定宽度和滑动偏移量有关，当您应该尝试定义宽度时%（例如，每一个<li>都是100%宽的），并且当您为滑块设置动画时，您将应用transform: translate(-100%, 0)，对于第二张图像，然后transform: translate(-200%, 0)对于第三次等等。

即使您调整浏览器的大小，这也应该可以正常工作，因为您的负偏移量和应用的宽度将与浏览器大小一起自动重新计算。浏览器会将您的相对偏移量转换为正确的像素量。

看看这个小提琴的概念证明（在 firefox 和 chrome 上试过）：http: //jsbin.com/ecifoc/1/（移动滑块并调整浏览器大小，然后再次移动滑块）

其他方法，如连续重新计算宽度和负偏移量也可以正常工作，但它们肯定过于昂贵（通常，您需要将一些处理程序附加到resize事件）并且由于引入了一些复杂性而使代码更容易出错。

注意：如果您还需要管理无限滑块，您可以查看此讨论

于 2013-04-10T08:04:59.020 回答
1

我认为这个会有所帮助。这个也将在小型设备和平板电脑上工作。您也可以在同一页面上有多个轮播。只需复制“DIV”-“SpecDataWrap”并更改 ID。

<div class="ContainerWrap">
    <div class="Container">
        <div class="AllSpecsDataWrap">
            <div class="SpecDataWrap" id="SpecDataWrap1">
                <div class="SpecDataSlides activeNavSlide">
                    <img src="http://s19.postimg.org/lzem156s3/image1.jpg" />
                    <div class="SpecDesc SpecDescRight">
                        <h2>Choose to be unique.</h2>
                        <div class="SpecDescDetails">
                            Metal accents, colorful hues, real woods and leathers, and a customizable laser-etched signature offer thousands of ways to make your Moto X unique.
                        </div>
                    </div>
                </div>
                <div class="SpecDataSlides InActiveNavSlide">
                    <img src="http://s19.postimg.org/6cira13mb/image2.jpg" />
                    <div class="SpecDesc SpecDescLeft">
                        <h2>Choose to be unique.</h2>
                        <div class="SpecDescDetails">
                            Metal accents, colorful hues, real woods and leathers, and a customizable laser-etched signature offer thousands of ways to make your Moto X unique.
                        </div>
                    </div>
                </div>
                <div class="SpecDataSlides InActiveNavSlide">
                    <img src="http://s19.postimg.org/f4zpxpor7/image3.jpg" />
                    <div class="SpecDesc SpecDescRight">
                        <h2>Choose to be unique.</h2>
                        <div class="SpecDescDetails">
                            Metal accents, colorful hues, real woods and leathers, and a customizable laser-etched signature offer thousands of ways to make your Moto X unique.
                        </div>
                    </div>
                </div>
                <div class="SpecSlideNavigation">
                    <div class="leftNavSpec SpecSlideNav"></div>
                    <div class="bulletsNavSpec">
                        <ul>
                            <li class="activeImage"></li>
                            <li class="InActiveImage"></li>
                            <li class="InActiveImage"></li>
                        </ul>
                        <div class="clearFix"></div>
                    </div>
                    <div class="RightNavSpec SpecSlideNav"></div>
                </div>
                <div class="clearFix"></div>
            </div>
        </div>
    </div>
</div>

您可以在此处查看 JS 和 CSS 代码： https ://jsfiddle.net/raju_sumit/Ld21vutz/

于 2015-12-27T09:59:42.330 回答
0 
var $slider = $('#slider'),
    imgW = $('#slider li').outerWidth(true),
    winW = 0,
    zero = 0;



function getSizes(){
    winW = $(window).width();
    zero = (winW-imgW)/2;
    $slider.animate({left: zero},0); // This should 'zero' the position on resize
}

getSizes(); 


$(window).resize(function() {
    getSizes();
});

如果我错过了什么，请在此处检索逻辑：http ://roxon.in/scripts/infinite_gal/index.html

于 2013-04-10T08:04:21.267 回答