Jquery 使容器可在移动设备上滑动

我有一个包含图像的容器，它的宽度大于文档窗口的宽度。我添加了这个代码

$(window).on('load', function(){
        function loop_left(){
            $isotope_container.stop().animate({left:'+=50'}, 500, 'linear', loop_left);
        }  
        function loop_right(){
            $isotope_container.stop().animate({left:'-=50'}, 500, 'linear', loop_right);
        }        
        function stop(){
            $isotope_container.stop();
        }
        if ($isotope_container.width()>$(window).width()) {
            $isotope_container.parent().prepend('<div class="left_scroll"><div class="inner"></div></div>');
            $isotope_container.parent().append('<div class="right_scroll"><div class="inner"></div></div>');

            $isotope_container.parent().find('.left_scroll').hover(loop_left, stop);
            $isotope_container.parent().find('.right_scroll').hover(loop_right, stop);
        }
});

$（窗口）.on（'load'，function（））{
函数loop_left（）{
$Sototype_container.stop（）.animate（{left:'+=50'}，500，'linear'，loop_left）；
}  
函数循环_right（）{
$Sototype_container.stop（）.animate（{left:'-=50'}，500，'linear'，loop_right）；
}        
函数停止（）{
$isototype_container.stop（）；
}
如果（$u容器.width（）>$（窗口）.width（））{
$ISOTOX_container.parent（）.prepend（“”）；
$ISOTOX_container.parent（）.append（“”）；
$ISOTOX_container.parent（）.find（'.left_scroll'）.hover（loop_left，stop）；
$ISOTOX_container.parent（）.find（'.right_scroll'）.hover（loop_right，stop）；
}
});

它添加了一个div，当您将鼠标悬停在div上时，它将左右移动容器

现在，这在桌面上很酷，但当我在移动设备上时，这就不那么实用了。我在看移动jquery，但当我添加它时，包含的css改变了我网站的外观，所以我不得不删除它

---

有没有可能在没有mobile.js的情况下使该部分可以切换？

我认为最简单的方法是检查窗口宽度，并根据需要进行响应性修改（移动与桌面）。我强烈建议您首先为这个实现编写mobile代码。根据您的站点中的一切工作方式，您可能需要围绕此自定义构建，因此我相信向代码中添加以下函数将简化此过程（非常简单，但可高度扩展）：

$（文档）.ready（函数（）{
//将引用存储在事件处理程序外部以进行优化
变量$window=$（window）；
变量$pane=$（“#pane1”）；
var customWidth=400；//根据需要进行更改
var device=true；//默认值应为mobile，因此为true
函数checkWidth（）{
如果（$window.width（）

您是否考虑过通过检查窗口宽度，将手机和桌面的功能分开，从而实现这一点？我认为这样做会将功能局限于桌面，并允许您在移动版本中为其定制任何功能。我敢打赌，有很多事情要考虑不同的移动宽度，这将适合你自己的喜好。是的，我可以做到这一点，仍然必须检查这将如何看待移动THO。我只是想知道我是否还有其他选择。

$(document).ready(function() {
    // Store the references outside the event handler to optimize
    var $window = $(window);
    var $pane = $('#pane1');
    var customWidth = 400; // change to your needs
    var device = true; // default should be mobile, thus true

    function checkWidth() {
        if ($window.width() < customWidth) {
            //if the window is smaller than the desired width, then return true.
            return true;
        }
        else {
            //if the window is smaller than the desired width, then return false.
            return false;
        }
    }
    // Execute on load
    device = checkWidth();
    // SUGGESTION: Bind event listener to your custom behavior. 
    // If the above function 'resized' your screen instead, you could bind it to
    // the resize function by having it return a desired width instead.
    $(window).resize(checkWidth);
});