Javascript 制作响应性图像滑块/旋转木马

我正在创建我自己的滑块，我需要一些帮助使其响应。 现在，它与第一张幻灯片上的响应部分一起工作，但当我转到下一张幻灯片（在本例中，任何不是第一个孩子的li）时，li的位置和宽度加起来都不正确，一切都会出错

这很难解释，我希望任何人都能看看这里：

我有一个宽度为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--;
    }
}

var slideLiWidth=$（'#slider'）.width（），
slideUl=$（“#slider ul”），
slideLi=$（slideUl.find（'li'），
幻灯片=$（slideLi）.length，
slideNav=$（'.slideNav'），
电流=1；
滑块宽度（滑块宽度）；
$（窗口）。调整大小（函数（）{
var slideLiWidth=$（'#slider'）.width（）；
滑块宽度（滑块宽度）；
});
slideNav.click（函数（）{
dir=$（this.data（'dir'）；
过渡（）；
});
函数转换（）{
var slideLiWidth=$（'#slider'）.width（）；
if（dir==='next'&¤t1）{
转换（{x:'+='+slidelWidth}，500，'ease'）；
当前--；
}
}

---

如果我遗漏了什么，请在此处检索逻辑：

问题在于计算平移距离的方法。添加和减去当前列表项宽度的“平移”值是正确的，但没有考虑到该值不会随着用户可能调整其视口大小而更新的事实。 诚然，这只是用户的一个问题，他们实际上会在浏览过程中调整视口大小。例如，任何使用平板电脑的人都不会有问题

不过，如果你真的在寻找一个完美的滑块，下面是我要做的： 创建一个变量以保持当前活动幻灯片的计数 使用该变量可根据已调整大小的视口调整“平移”值

下面是该代码的外观：

$(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.
    }
}

$（窗口）。调整大小（函数（）{
var slideCounter=1；//因为第一张幻灯片是……第一张。
var slideLiWidth=$（'#slider'）.width（）；
滑块宽度（滑块宽度）；
slidel.transition（{x:'-='+slideCounter*slidelWidth}，500，'ease'）；//调整UL的transition值以匹配当前幻灯片位置和宽度。
});
函数转换（）{
var slideLiWidth=$（'#slider'）.width（）；
if（dir==='next'&¤t1）{
转换（{x:'+='+slidelWidth}，500，'ease'）；
当前--；
slideCounter--；//递增计数器以保持不变。
}
}

我已经对添加的代码行进行了注释，虽然我无法实际测试上面的代码，但我非常确定它会起作用。如果没有，至少我给你指出了正确的方向

---

干杯

当您尝试在

%

中定义宽度时（例如，每个

都是

100%

宽），选择以像素为单位指定宽度和滑动偏移，并且在设置滑块动画时，您将对第二幅图像应用

变换：平移（-100%，0）

，然后

transform:translate（-200%，0）

用于第三个，依此类推

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

看看这个提琴，看看它的概念证明（在firefox和chrome上试用过）：（移动滑块并调整浏览器大小，然后再次移动滑块）

其他方法，如连续重新计算宽度和负偏移量，也可以很好地工作，但它们肯定太昂贵（通常，您需要为

resize

事件附加一些处理程序），并且由于引入了一些复杂性，使代码更容易出错

---

---

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

我认为这将有所帮助。这一款也将用于小型设备和平板电脑。您也可以在同一页面上有多个旋转木马。只需复制“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>

选择独特。
金属色调、多彩色调、实木和皮革，以及可定制的激光蚀刻签名，让您的Moto X独一无二。
选择独特。
金属色调、多彩色调、实木和皮革，以及可定制的激光蚀刻签名，让您的Moto X独一无二。
选择独特。
金属色调、多彩色调、实木和皮革，以及可定制的激光蚀刻签名，让您的Moto X独一无二。

<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>