3

http://jsfiddle.net/2RE3f/6/embedded/result/

我正在尝试制作一个响应式 js 滑块，但在媒体查询之间进行时，我似乎无法找出断点故障。

例如，如果您查看我的 jsFiddle，并将您的窗口设置为 iPad 尺寸（屏幕尺寸为 1024 像素宽），然后拉出到 1200 像素宽，滑块会中断，并且有一个边距应用于新的网格尺寸（突出显示红色），偏移滑块。但是，如果您拉回 iPad 尺寸，则滑块不会将边距应用到右侧偏移它并正常工作。如果以 1200 像素的宽度加载网格，则滑块可以正常工作，但是当您缩小到 iPad 尺寸时，它会在您点击向右箭头时在右侧添加一个边距。

出于某种原因，我无法弄清楚它是如何以及为什么将这个填充边距添加到网格中的。

您必须使用箭头键（左右，在两个网格画廊之间导航）。jsFiddle 中有更多代码，但不适用于 rwd。

这是CSS

@media screen (max-width: 1400px) {
#portfolio img {
    height: 400px;
    width: 400px;
}
#slider ul li {
    width: 1200px;
}
}

@media screen and (max-width: 1030px) {
.uni_con {
    width: 1024px
}
.shell {
    width: 1024px;
}
.container {
    width: 1024px;
}
#portfolio img {
    height: 512px;
    width: 512px;
}
#slider ul li {
    width: 1024px;
}
#slider .caption {
    width: 512px;
    height: 512px;
}
#slider .caption::before {
    width: 514px;
    height: 514px;
    line-height: 508px;
}
#slider .caption::after {
    width: 512px;
}
#slider .caption:hover::before {
    width: 512px;
    height: 512px;
}
#slider .caption:hover::after {
    width: 512px;
}
}

jQuery

jQuery(function ($) {

var $sl = $('#slider'),
    $ul = $('ul', $sl),
    $li = $('li', $ul),
    slideCount = $li.length,
    c = 0, // current
    slideWidth = $li.width(),
    slideHeight = $li.height(),
    sliderUlWidth = slideCount * slideWidth;

$sl.css({
    width: slideWidth,
    height: slideHeight
});
$ul.css({
    width: sliderUlWidth
});

function move() {
    if (c == slideCount) {
        c = slideCount - 1;
        // fade out #next btn
        $('#next').stop().fadeTo(200, 0.5);
    }
    if (c == slideCount - 1) {
        $('#next').stop().fadeTo(200, 0.5);
        $('#back').fadeTo(200, 1);
    } else if (c < 0) {
        c = 0;
        $('#back').stop().fadeTo(200, 0.5);
    } else {
        $('#next').fadeTo(200, 1);
        $('#back').fadeTo(200, 0.5);
    }
    $ul.stop().animate({
        left: -c * slideWidth
    }, 500);
}

$('#back, #next').click(function () {
    return move(this.id == 'next' ? c++ : c--);
});

$(document).keydown(function (e) {
    var k = e.which;
    if (k == 39 || k == 37) {
        e.preventDefault();
        return move(k == 39 ? c++ : c--);
    }
});

});

示例图像

在第二个 LI（使用右键）上，此边距不断增加，并将网格从与容器内联中推开。

谢谢。

4

2 回答 2

2

我想我明白了！#slider 应用了一些奇怪的样式。

    #slider {
overflow: hidden;
position: relative;
margin: 0 auto;
}

overflow:hidden;正在切断图像，并且正在margin:0 auto;推动图像。

我认为这些样式是由 jquery 添加并从#portfolio 继承的。

解决方案是将其添加到 css 中：

    #slider { /* ADDED SOLUTION*/
    margin:0 !important;
    overflow:visible !important;
}

在这里查看：http: //jsfiddle.net/2RE3f/10/

在这里测试解决方案：http: //jsfiddle.net/2RE3f/10/show/light/# using: View Port Resizer Bookmarklet（给它一个谷歌，因为我不能发布两个以上的链接）这将让你测试使用浏览器的所有设备的尺寸。

您仍然有一个问题，即在图像之间以及在某些宽度的顶部或底部应用薄间隙以及当您将鼠标悬停在某些图像上时..不确定那里发生了什么，但它是次要的。

于 2013-11-06T12:57:36.433 回答
2

似乎我找到了解决方案。您在右侧看到奇怪的红色边距的原因是您正在使用 javascript 代码控制滑块 ul 元素的宽度和高度。在调整窗口大小或更改屏幕分辨率时，媒体查询正在更改其他元素的大小，但这（ul 边宽度和高度）保持不变。

我添加了处理这个问题的代码，带有注释，这里是 jSFiddle：

http://jsfiddle.net/2RE3f/12/embedded/result/

这是更新的 JS 代码：

    $(document).ready(function(e) {

jQuery(function ($) {

var $sl = $('#slider'),
    $ul = $('ul', $sl),
    $li = $('li', $ul),
    slideCount = $li.length,
    c = 0; // current

var slideWidth; // global so can be used in move()

// wrap the slider width and height settings in a function
function slider_fit()
{
    slideWidth = $li.width(),
    slideHeight = $li.height(),
    sliderUlWidth = slideCount * slideWidth;

    $ul.css({
        width: sliderUlWidth
    });
    $sl.css({
       width: slideWidth,
       height: slideHeight
    }); 
}

slider_fit(); // call slider_fit on window load also

// below is the function to make sure window resizing has been done
$(window).resize(function() {
    if(this.resizeTO) clearTimeout(this.resizeTO);
    this.resizeTO = setTimeout(function() {
        $(this).trigger('resizeEnd');
    }, 250);
});

// once window is resized and media queries (if any) have been applied
// we can fit our slider elements to this new size
$(window).bind('resizeEnd', function() {
    slider_fit(); // fit slider widths and heights due to screen size change
    move(); // make adjustments to the left margins of ul
});


function move() {

    //alert(slideWidth);

    if (c == slideCount) {
        c = slideCount - 1;
        // fade out #next btn
        $('#next').stop().fadeTo(200, 0.5);
    }
    if (c == slideCount - 1) {
        $('#next').stop().fadeTo(200, 0.5);
        $('#back').fadeTo(200, 1);
    } else if (c < 0) {
        c = 0;
        $('#back').stop().fadeTo(200, 0.5);
    } else {
        $('#next').fadeTo(200, 1);
        $('#back').fadeTo(200, 0.5);
    }
    $ul.stop().animate({
        left: -c * slideWidth
    }, 500);
}

$('#back, #next').click(function () {
    return move(this.id == 'next' ? c++ : c--);
});

$(document).keydown(function (e) {
    var k = e.which;
    if (k == 39 || k == 37) {
        e.preventDefault();
        return move(k == 39 ? c++ : c--);
    }
});

});
});

我希望这有帮助 ：）

于 2013-11-15T17:12:18.720 回答