时间戳

首页 > 解决方案 > 更改变量属性 onclick javascript

javascript - 更改变量属性 onclick javascript

问题描述

我正在尝试使用 onclick 元素更改包含在 javascript 对象中的图像 URL，以便可以将图像换成不同的图像 - 它是全景图像，所以不幸的是不是简单的图像更改！

目标代码是：

<div id="img-251" style="width:100%;max-width:800px;height:80vh;max-height:600px;"></div>
</div>
<script>
var viewer251 = new PhotoSphereViewer({
 container: 'img-251',
 touchmove_two_fingers: false,
 time_anim: false,
 anim_speed: '1rpm',
 caption: 'Bedroom',
 panorama: 'http://pallighting.com.au/wp-content/uploads/2020/07/website-360-test0000.jpg',
navbar: [
 'autorotate',
 'zoom',
 'caption',
 {title: 'Normal Size',className: 'sps-icon',content: '&#xe801;',onClick: function() {document.getElementById('spscontent-251').setAttribute("style","padding:10px");document.getElementById('img-251').setAttribute("style","width:100%;max-width:800px;height:80vh;max-height:600px;");viewer251.resize({width:100,height:80});}},
 {title: 'Full Size',className: 'sps-icon',content: '&#xe800;',onClick: function() {document.getElementById('spscontent-251').setAttribute("style","position: fixed;top: 0;left: 0;right: 0;bottom: 0;background: rgba(0,0,0,.5);z-index: 700;");document.getElementById('img-251').setAttribute("style","width:100%;height:100%");document.getElementById('spscontent-251').setAttribute("style","max-width:100%;position: fixed;top: 0;left: 0;right: 0;bottom: 0;background: rgba(0,0,0,.5);z-index: 99999;margin: 0;width: 100%;");viewer251.resize({width:100,height:80});}}
],
lang: {
 autorotate: 'Automatic rotation',
 zoom: 'Zoom',
 zoomOut: 'Zoom Out',
 zoomIn: 'Zoom In',
 two_fingers: ['Use two fingers to navigate']
}
});

我正在尝试使用图像 onclick 使用此代码更改图像。我尝试了各种写东西的方法，例如有无 viewer251 或 PhotoSphereViewer 变量名......

<img src="http://pallighting.com.au/wp-content/uploads/2020/06/logo.png"  onClick="viewer251.PhotoSphereViewer.panorama: 'http://pallighting.com.au/wp-content/uploads/2020/07/website-360-test0001.jpg'">

这种方法没有运气，任何帮助将不胜感激！

标签： javascriptjquery

解决方案

您可以使用该setPanorama方法

<img src="http://pallighting.com.au/wp-content/uploads/2020/06/logo.png"  
      onClick="viewer.setPanorama('http://pallighting.com.au/wp-content/uploads/2020/07/website-360-test0001.jpg')">

推荐阅读