对于摄影网站，想要显示在视口中左右移动的全景照片。目前，当页面加载时，它从左到右，但是当图像用完时，它停止了。与其停下来，我不希望它反转方向，然后从右到左，然后从左到右，从右到左无限。
这可能很简单，但我是jquery的完全新手（对不起）。
这是我从Arnault PACHOT改编的代码：
任何帮助将不胜感激。提前致谢。
/* =========================================================
// jquery.panorama.js
// Author: OpenStudio (Arnault PACHOT)
// Mail: [email protected]
// 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);
参考方案
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;
}
}
我是新手，正在写这篇文章，但是如果源上没有图像，那么我只有空白。有人可以告诉我，如果我正在获取背景图像，如何获取/images/no-image.jpg：url（）;这是我的代码：<div class="uk-clearfix uk-position-relative"> <div class="recipeb…
Javascript IF语句 - javascript嗨，我有这段代码可以正常工作，并将两个日历显示为一个日历。我还有一个php变量$login_session，其中包含登录电子邮件地址的用户。关于如何显示[email protected]日历的任何想法（伪代码）IF $login_session == "[email protected]&#…
提交初始化后删除某些帖子数据 - javascript在初始化提交之后但在将数据发送到处理页面之前，是否可以过滤$ _POST表单数据？我想象过程的方式：提交->收集$ _POST数据->发送数据我想做的事：提交->收集$ _POST数据->删除某些元素->发送数据这样就不必更改处理页面以过滤掉不希望接收的元素了吗？ javascript大神给出的解决方案 当然可以，您可以在JS …
Javascript历史记录。如果不是当前站点，请默认转到页面 - javascript我在搜索结果中使用以下history.go，并具有跨浏览器可接受的结果。我希望使用PHP解决方案，但这会满足需求，直到我意识到一个更大的问题。<a href="javascript:history.go(-1)">Return To Search Results</a> 我唯一的问题是查看者来自不是源自搜索页面ht…
获取JavaScript值到C＃字符串 - javascript是否可以在C＃中执行类似的操作？该值为“ 10/05/2014”string jsValue = javascript("$('#EstimatedStartDate').val()"); 参考方案 您能否更详细地阐明您要做什么。看来您正在尝试从javascript（客户…