制作一个全景从一侧移动到另一侧与jquery

Question

对于一个摄影网站，并希望显示在一个视口内移动到一边的全景照片。目前它在页面加载时从左到右，但在图像用完时停止。我不想停下来，而是想让它逆转方向，从右到左，然后从左到右，从右到左infintum。 这可能是非常简单的事情，但我是一个jquery的完全新手（对不起）。

这是我改编自阿尔诺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); 

Answer 1

https://jsfiddle.net/pm6swLxa/

你代码中使用CSS动画

HTML

<div id="img_container" class="pano slide"></div>

CSS

#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; 
    } 
}