Question

问题在于，我正在开发一个响应式网站，这个网站有一个滑块，现在需要响应。 Jquery最初是为滑块开发的，可以在一个无响应的网站上工作。挑战是管理和修改控制滑块响应的Jquery，我想要的是滑块恰好适合屏幕尺寸，如经典示例中所示：width：100％height：auto。新项目包括移动设备，平板电脑和桌面设备的三个突破点，滑块应按比例适合每个屏幕。

<body onLoad="load_animations()">
<div id="slider_wrapper">
    <div id="header_images">
        <img src="#" class="header_image" color="#054065">
        <img src="#" class="header_image" color="#17191e">
        <img src="#" class="header_image" color="#3f0731">
    </div>
</div>

请访问我的小提琴： http://jsfiddle.net/renzocj/LwabhLsx/1/

或项目： http://www.abejanegra.com/index_t.php（调整浏览器大小）

Jquery：

function load_animations() {
    var $j = jQuery.noConflict();
    if (!$j.browser.msie) {
        $j('#header_images').css({
            height: '280px',
            opacity: '0'
        })
        $j('#slider_wrapper').css({
            height: '280px',
            opacity: '0'
        });
        $j('#overlay_bg').css({
            height: '468px'
        });
        $j('#header_controls_left').animate({
            opacity: '1'
        });
        $j('#header_controls_right').animate({
            opacity: '1'
        });
        $j('#header_images').stop().animate({
            opacity: '1'
        }, 400, 'easeOutQuad');
        $j('#header_images > .header_image:first-child').stop().animate({
            opacity: '1'
        }, 400, 'easeOutQuad');
        $j('#slider_wrapper').stop().animate({
            opacity: '1'
        }, 400, 'easeOutQuad');
    } else {        
        $j('#header_images').css({
            height: '280px'
        });
        $j('#slider_wrapper').css({
            height: '280px'
        });
        $j('#overlay_bg').css({
            height: '468px'
        });
        $j('#header_images .header_image').stop().animate({
            opacity: '0'
        }, 0);
        $j('#header_images .header_image:first-child').stop().animate({
            opacity: '1'
        }, 0);
    }
    var header_count = $j("#header_images > .header_image").size();
    var current_project = 1;
    var header_color = $j('.header_image').attr('color');
    $j('#slider_wrapper').css({
        'background-image': 'none',
        'background-color': header_color
    });
    if (!$j.browser.msie) {
        $j('#overlay_bg').click(function(event) {
            var link_target = $j('#header_images > img:nth-child(' + current_project + ')').attr('target');
            if (link_target == '_blank') {
                window.open($j('#header_images > img:nth-child(' + current_project + ')').attr('link'));
            } else {
                window.location = ($j('#header_images > img:nth-child(' + current_project + ')').attr('link'));
            }
        });
    } else {
        $j('.header_image').click(function(event) {
            var link_target = $j('#header_images > img:nth-child(' + current_project + ')').attr('target');
            if (link_target == '_blank') {
                window.open($j('#header_images > img:nth-child(' + current_project + ')').attr('link'));
            } else {
                window.location = ($j('#header_images > img:nth-child(' + current_project + ')').attr('link'));
            }
        });
    }
    $j('#slider_wrapper').hover(function(event) {
        $j('#header_controls_left').show();
        $j('#header_controls_right').show();
        if (!$j.browser.msie) {
            $j('#header_controls_left').stop().animate({
                left: '0px'
            }, 200, 'easeOutQuad');
            $j('#header_controls_right').stop().animate({
                right: '0px'
            }, 200, 'easeOutQuad');
        }
    }, function(event) {
        $j('#header_controls_left').hide();
        $j('#header_controls_right').hide();
        if (!$j.browser.msie) {
            $j('#header_controls_left').stop().animate({
                left: '10px'
            }, 300, 'easeOutQuad');
            $j('#header_controls_right').stop().animate({
                right: '10px'
            }, 300, 'easeOutQuad');
        }
    })
    $j('#header_controls_right').click(function(event) {
        animate_header('right', 0);
        clearInterval(interval_header);
    })
    $j('#header_controls_left').click(function(event) {
        animate_header('left', 0);
        clearInterval(interval_header);
    })
    document.onkeyup = handleArrowKeys;

    function handleArrowKeys(evt) {
        if (evt.keyCode == 37) {
            animate_header('left', 0);
            clearInterval(interval_header);
        }
        if (evt.keyCode == 39) {
            animate_header('right', 0);
            clearInterval(interval_header);
        }
    }

    function animate_header(direction, project) {
        if (!$j.browser.msie) {
            $j('#header_images > .header_image:nth-child(' + current_project + ')').stop().animate({
                opacity: '0',
                marginLeft: '-100px', 
                marginTop: '-20px', 
                width: '1140px', 
                height: '300px'
            }, 250, 'easeInQuad', function() {
                $j(this).css({
                    marginLeft: '0px',
                    marginTop: '0px',
                    width: '940px',
                    height: '280px'
                });
                if (direction == 'logo') {
                    current_project = project
                };
                if (direction == 'left') {
                    current_project--
                };
                if (direction == 'right') {
                    current_project++
                };
                if (current_project > header_count) {
                    current_project = 1
                };
                if (current_project < 1) {
                    current_project = header_count
                };
                var new_color = $j('#header_images > .header_image:nth-child(' + current_project + ')').attr('color');
                $j('#slider_wrapper').css({
                    backgroundColor: new_color
                });
                $j('#header_images > .header_image:nth-child(' + current_project + ')').css({
                    marginLeft: '',
                    marginTop: '',
                    width: '940px',
                    height: '320px'
                });
                $j('#header_images > .header_image:nth-child(' + current_project + ')').stop().animate({
                    opacity: '1',
                    marginLeft: '0',
                    marginTop: '0',
                    width: '940px',
                    height: '280px'
                }, 250, 'easeOutQuad');
            });
        } else {
            $j('#header_images > .header_image:nth-child(' + current_project + ')').stop().animate({
                opacity: '0'
            }, 150, 'easeInQuad', function() {
                if (direction == 'logo') {
                    current_project = project
                };
                if (direction == 'left') {
                    current_project--
                };
                if (direction == 'right') {
                    current_project++
                };
                if (current_project > header_count) {
                    current_project = 1
                };
                if (current_project < 1) {
                    current_project = header_count
                };
                var new_color = $j('#header_images > .header_image:nth-child(' + current_project + ')').attr('color');
                $j('#slider_wrapper').css({
                    backgroundColor: new_color
                }).css("filter", "none");
                $j('#header_images > .header_image:nth-child(' + current_project + ')').stop().animate({
                    opacity: '1'
                }, 150, 'easeInQuad');
            });
        }
    }
    var interval_header = setInterval(timerFunction, 10000);

    function timerFunction() {
        animate_header('right', 0);
    }
}

先谢谢您的帮助

Answer 1

我在你的主页上收到了404，所以可能先修复它们 enter image description here

尝试将标准滑块更改为响应式设计

1 个答案: