Javascript 使用jquery使全景从一侧移动到另一侧

对于摄影网站，并希望在视口中显示左右移动的全景照片。此时，当页面加载时，它会从左向右移动，但当图像用完时，它会停止。我不想停下来，而是想让它倒转方向，从右向左，然后从左向右，从右向左。 这可能很简单，但我对jquery完全是新手（对不起）

这是我从Arnault PACHOT改编的代码：

任何帮助都将不胜感激。提前谢谢

/* =========================================================
// jquery.panorama.js
// Author: OpenStudio (Arnault PACHOT)
// Mail: apachot@openstudio.fr
// Web: http://www.openstudio.fr
// Copyright (c) 2008 Arnault Pachot
// licence : GPL
========================================================= */

(function($) {
$.fn.panorama = function(options) {
    this.each(function(){ 
        var settings = {
            viewport_width: 669,
            speed: 20000,
            direction: 'left',
            control_display: 'auto',
            start_position: 0,
            auto_start: true,
            mode_360: false
        };
        if(options) $.extend(settings, options);

        var elemWidth = parseInt($(this).attr('width'));
        var elemHeight = parseInt($(this).attr('height'));
        var currentElement = this;
        var panoramaViewport, panoramaContainer;
        var bMouseMove = false;
        var mouseMoveStart = 0;
        var mouseMoveMarginStart = 0;

        $(this).attr('unselectable','on')
            .css('position', 'relative')
            .css('-moz-user-select','none')
            .css('-webkit-user-select','none')
            .css('margin', '0')
            .css('padding', '0')
            .css('border', 'none')
            .wrap("<div class='panorama-container'></div>");
        if (settings.mode_360) 
            $(this).clone().insertAfter(this);

        panoramaContainer = $(this).parent();
        panoramaContainer.css('height', elemHeight+'px').css('overflow', 'hidden').wrap("<div class='panorama-viewport'></div>").parent().css('width',settings.viewport_width+'px')
            .append("<div class='panorama-control'><a href='#' class='panorama-control-left'><<</a> <a href='#' class='panorama-control-pause'>x</a> <a href='#' class='panorama-control-right'>>></a> </div>");

        panoramaViewport = panoramaContainer.parent();

        panoramaViewport.mousedown(function(e){
              if (!bMouseMove) {
            bMouseMove = true;
            mouseMoveStart = e.clientX;
              }
              return false;
        }).mouseup(function(){
              bMouseMove = false;
              mouseMoveStart = 0;
              return false;
        }).mousemove(function(e){
              if (bMouseMove){
              var delta = parseInt((mouseMoveStart - e.clientX)/30);
              if ((delta>10) || (delta<10)) {
                  var newMarginLeft = parseInt(panoramaContainer.css('marginLeft')) + (delta);
                  if (settings.mode_360) {
                    if (newMarginLeft > 0) {newMarginLeft = -elemWidth;}
                    if (newMarginLeft < -elemWidth) {newMarginLeft = 0;}
                  } else {
                    if (newMarginLeft > 0) {newMarginLeft = 0;}
                    if (newMarginLeft < -elemWidth) {newMarginLeft = -elemWidth;}
                  }
                  panoramaContainer.css('marginLeft', newMarginLeft+'px');
              }

              }
        }).bind('contextmenu',function(){return false;});

        panoramaViewport.css('height', elemHeight+'px').css('overflow', 'hidden').find('a.panorama-control-left').bind('click', function() {
            $(panoramaContainer).stop();
            settings.direction = 'right';
            panorama_animate(panoramaContainer, elemWidth, settings);
            return false;
        });
        panoramaViewport.bind('click', function() {
            $(panoramaContainer).stop();
        });
        panoramaViewport.find('a.panorama-control-right').bind('click', function() {
            $(panoramaContainer).stop();
            settings.direction = 'left';
            panorama_animate(panoramaContainer, elemWidth, settings);
            return false;
        });
        panoramaViewport.find('a.panorama-control-pause').bind('click', function() {
            $(panoramaContainer).stop();
            return false;
        });

        if (settings.control_display == 'yes') {
            panoramaViewport.find('.panorama-control').show();
        } else if (settings.control_display == 'auto') {
            panoramaViewport.bind('mouseover', function(){
                $(this).find('.panorama-control').show();
                return false;
            }).bind('mouseout', function(){
                $(this).find('.panorama-control').hide();
                return false;
            });

        }

        $(this).parent().css('margin-left', '-'+settings.start_position+'px');

        if (settings.auto_start) 
            panorama_animate(panoramaContainer, elemWidth, settings);

    });
    function panorama_animate(element, elemWidth, settings) {
        currentPosition = 0-parseInt($(element).css('margin-left'));

        if (settings.direction == 'right') {

            $(element).animate({marginLeft: 0}, ((settings.speed / elemWidth) * (currentPosition)) , 'linear', function (){ 
                if (settings.mode_360) {
                    $(element).css('marginLeft', '-'+(parseInt(parseInt(elemWidth))+'px'));
                    panorama_animate(element, elemWidth, settings);
                }
            });
        } else {

            var rightlimit;
            if (settings.mode_360) 
                rightlimit = elemWidth;
            else
                rightlimit = elemWidth-settings.viewport_width;

            $(element).animate({marginLeft: -rightlimit}, ((settings.speed / rightlimit) * (rightlimit - currentPosition)), 'linear', function (){ 
                if (settings.mode_360) {
                    $(element).css('margin-left', 0); 
                    panorama_animate(element, elemWidth, settings);
                }
            });
        }


    }

};

$(document).ready(function(){
$("img.panorama").panorama();
});
in})(jQuery);

/*=========================================================
//jquery.panorama.js
//作者：OpenStudio（Arnault PACHOT）
//邮寄：apachot@openstudio.fr
//网站：http://www.openstudio.fr
//版权所有（c）2008阿尔诺帕肖
//牌照：GPL
========================================================= */
（函数（$）{
$.fn.panorama=功能（选项）{
此.each（function（）{
变量设置={
视口宽度：669，
速度：20000，
方向：'左'，
控制显示：“自动”，
起始位置：0，
自动启动：正确，
模式360：错误
};
如果（选项）$.extend（设置、选项）；
var elemWidth=parseInt（$（this.attr（'width'））；
var elemHeight=parseInt（$（this.attr（'height'））；
var currentElement=此；
var全景视口，全景容器；
var bMouseMove=false；
var mouseMoveStart=0；
var mouseMoveMarginStart=0；
$（this.attr（'unselectable'，'on'））
.css（'位置'，'相对'）
.css（'-moz用户选择'，'none'）
.css（'-webkit用户选择'，'none'）
.css（'margin'，'0'）
.css（'padding'，'0'）
.css（'边框'，'无'）
.wrap（“”）；
如果（设置。模式_360）
$（this.clone（）.insertAfter（this）；
全景容器=$（this.parent（）；
PanoramContainer.css（'height'，elemHeight+'px'）.css（'overflow'，'hidden'）.wrap（“”.parent（）.css（'width'，settings.viewport_width+'px'））
.附加（“”）；
panoramaViewport=panoramaContainer.parent（）；
全景视口。鼠标向下（函数（e）{
如果（！bMouseMove）{
bMouseMove=true；
mouseMoveStart=e.clientX；
}
返回false；
}).mouseup（函数（）{
bMouseMove=false；
mouseMoveStart=0；
返回false；
}).mousemove（函数（e）{
如果（b移动）{
var delta=parseInt（（mouseMoveStart-e.clientX）/30）；
如果（（delta>10）|（delta 0）{newMarginLeft=-elemWidth；}
如果（newMarginLeft<-elemWidth）{newMarginLeft=0；}
}否则{
如果（newMarginLeft>0）{newMarginLeft=0；}
如果（newMarginLeft<-elemWidth）{newMarginLeft=-elemWidth；}
}
css（'marginLeft'，newMarginLeft+'px'）；
}
}
}).bind（'contextmenu'，function（）{return false；}）；
PanoramViewport.css（'height'，elemHeight+'px'）.css（'overflow'，'hidden'）.find（'a.panorama-control-left'）.bind（'click'，function（））{
$（全景容器）.stop（）；
settings.direction='right'；
全景动画（全景容器、元素宽度、设置）；
返回false；
});
panoramaViewport.bind（'单击'，函数（））{
$（全景容器）.stop（）；
});
全景视口。查找（'a.panorama-control-right'）。绑定（'click'，function（））{
$（全景容器）.stop（）；
settings.direction='left'；
全景动画（全景容器、元素宽度、设置）；
返回false；
});
全景视口。查找（'a.panorama-control-pause'）。绑定（'click'，function（））{
$（全景容器）.stop（）；
返回false；
});
如果（settings.control_display=='yes'）{
全景视口。查找（'.panorama控件'）.show（）；
}else if（settings.control_display=='auto'）{
panoramaViewport.bind（'mouseover'，function（）{
$（this.find（'.panorama控件'）.show（）；
返回false；
}).bind（'mouseout'，function（）{
$（this.find（'.panorama控件'）.hide（）；
返回false；
});
}
$（this.parent（）.css（'margin-left'，'-'+settings.start_position+'px'）；
如果（设置。自动启动）
全景动画（全景容器、元素宽度、设置）；
});
全景动画功能（元素、元素宽度、设置）{
currentPosition=0-parseInt（$（元素）.css（'margin-left'）；
如果（settings.direction=='right'）{
$（元素）。动画（{marginLeft:0}，（（settings.speed/elemWidth）*（currentPosition）），“线性”，函数（）{
如果（设置。模式_360）{
css（'marginLeft'，'-'+（parseInt（parseInt（elemWidth））+'px'）；
全景动画（元素、元素宽度、设置）；
}
});
}否则{
var权利限制；
如果（设置。模式_360）
rightlimit=elemWidth；
其他的
rightlimit=elemWidth-settings.viewport\u width；
$（元素）。动画（{marginLeft:-rightlimit}，（（settings.speed/rightlimit）*（rightlimit-currentPosition）），“线性”，函数（）{
如果（设置。模式_360）{
$（元素）.css（'margin-left'，0）；
全景动画（元素、元素宽度、设置）；
}
});
}
}
};
$（文档）.ready（函数（）{
$（“img.panorama”）.panorama（）；
});
in}（jQuery）；

您可以使用css动画编写代码

HTML

CSS

W

#img_container {
  width:400px;
  height: 200px;
  overflow: hidden;
  background: url('http://www.the-farm.net/piccies/pano2.jpg');
  background-size: auto 100%;
  background-position: right;
  animation: back-and-forth 5s infinite;
}

@keyframes back-and-forth {
  0% {
    background-position: right;
  }
  50% {
    background-position: left;
  }
  100% {
    background-position: right;
  }
}