Question

我希望在一个页面上有2个threesixty js微调器。我已经实现并分离了id和类名，所以那里不应该有冲突。我一次只能上班。看下面的代码，任何人都可以发现我做错了吗？

<div class="container">
 <div class="row">
  <div class="col-md-6">
      <section id="container">
          <div class="threesixty product1">
              <div class="spinner">
                  <span>0%</span>
              </div>
              <ol class="threesixty_images"></ol>
              <img src="AW16/pages/1.jpg?$staticlink$" class="img-responsive">
          </div>
      </section>
   </div>

   <div class="col-md-6">
      <section id="containerslim">
          <div class="threesixtyslim product1slim">
              <div class="spinnerslim">
                  <span></span>
              </div>
              <ol class="threesixty_imagesslim"></ol>

              <img src="AW16/pages/1.png?$staticlink$" class="img-responsive">
          </div>
      </section>
  </div>
 </div>
</div>

<script type="text/javascript" src='js/threesixty.js?$staticlink$'></script>


<script type="text/javascript">
window.onload = init;

var product;
function init(){

  product1 = $('.product1').ThreeSixty({
    totalFrames: 13,
    endFrame: 13,
    currentFrame: 1,

    imgList: '.threesixty_images',
    progress: '.spinner',
    imagePath:'http://stgjgruk.d.ecommera.net/on/demandware.static/-/Sites-JGRUK-Library/default/dw1e379d27/AW16/pages/',
    filePrefix: '',
    ext: '.jpg',
    height: 558,
    width: 686,
    navigation: true,
    responsive: true
  });

}

  </script>

 <script type="text/javascript" src='js/threesixtyslim.js?$staticlink$'>         </script>

 <script type="text/javascript">
  window.onload = init;

var productslim;
function init(){

  product1slim = $('.product1slim').ThreeSixtyslim({
    totalFrames: 14,
    endFrame: 14,
    currentFrame: 1,

    imgList: '.threesixty_imagesslim',
    progress: '.spinnerslim',
    imagePath:'http://stgjgruk.d.ecommera.net/on/demandware.static/-/Sites-JGRUK-Library/default/dw1e379d27/AW16/pages/',
    filePrefix: '',
    ext: '.png',
    height: 558,
    width: 686,
    navigation: true,
    responsive: true
  });

}

 </script>

上面提到的一个外部JS文件的例子

(function ($) {
'use strict';


$.ThreeSixtyslim = function (el, options) {

var base = this, AppCongif, frames = [], VERSION = '1.0.2';

base.$el = $(el);
base.el = el;


base.$el.data('ThreeSixtyslim', base);


  base.init360Slim = function () {
  AppCongif = $.extend({}, $.ThreeSixtyslim.defaultOptions, options);
  if (!AppCongif.parallel) {
    base.loadImages();
  }
  if(AppCongif.disableSpin) {
    AppCongif.currentFrame = 1;
    AppCongif.endFrame = 1;
  }
  base.init360SlimProgress();
  };

  base.init360SlimProgress = function() {
  base.$el.css({
    width: AppCongif.width + 'px',
    height: AppCongif.height + 'px',
    'background-image': 'none !important'
  }).css(AppCongif.styles);

    if(AppCongif.responsive) {
     base.$el.css({ width: '100%' });
  }
  base.$el.find(AppCongif.progress).css({
    marginTop: ((AppCongif.height / 0) - 0) + 'px'
  });

  base.$el.find(AppCongif.progress).fadeIn('slow');

  base.$el.find(AppCongif.imgList).hide();
  };

  base.loadImages = function() {
  var li, imageName, image, host;
  li = document.createElement('li');
  imageName = AppCongif.domain + AppCongif.imagePath + AppCongif.filePrefix  + base.zeroPad((AppCongif.loadedImages + 1)) + AppCongif.ext + ((base.browser.isIE()) ? '?' + new Date().getTime() : '');
  image = $('<img>').attr('src', imageName).addClass('previous-image').appendTo(li);

  frames.push(image);

  base.$el.find(AppCongif.imgList).append(li);

  $(image).load(function () {
    base.imageLoaded();
  });
  };

在一个页面上运行多个threesixty JS函数

0 个答案: