ThreeSixty Degree Image Slider Поворот от одного индекса к другому - PullRequest
1 голос
/ 17 февраля 2020

var threesixty = new ThreeSixty(document.getElementById('threesixty'), {
    image: [
      'https://raw.githubusercontent.com/heartcode/360-Image-Slider/master/img/threesixty_1.jpg',
      'https://raw.githubusercontent.com/heartcode/360-Image-Slider/master/img/threesixty_2.jpg',
      'https://raw.githubusercontent.com/heartcode/360-Image-Slider/master/img/threesixty_3.jpg',
      'https://raw.githubusercontent.com/heartcode/360-Image-Slider/master/img/threesixty_4.jpg',
      'https://raw.githubusercontent.com/heartcode/360-Image-Slider/master/img/threesixty_5.jpg',
      'https://raw.githubusercontent.com/heartcode/360-Image-Slider/master/img/threesixty_6.jpg',
      'https://raw.githubusercontent.com/heartcode/360-Image-Slider/master/img/threesixty_7.jpg',
      'https://raw.githubusercontent.com/heartcode/360-Image-Slider/master/img/threesixty_8.jpg',
      'https://raw.githubusercontent.com/heartcode/360-Image-Slider/master/img/threesixty_9.jpg',
      'https://raw.githubusercontent.com/heartcode/360-Image-Slider/master/img/threesixty_10.jpg',
      'https://raw.githubusercontent.com/heartcode/360-Image-Slider/master/img/threesixty_11.jpg',  
      'https://raw.githubusercontent.com/heartcode/360-Image-Slider/master/img/threesixty_12.jpg',
      'https://raw.githubusercontent.com/heartcode/360-Image-Slider/master/img/threesixty_13.jpg',
      'https://raw.githubusercontent.com/heartcode/360-Image-Slider/master/img/threesixty_14.jpg',
      'https://raw.githubusercontent.com/heartcode/360-Image-Slider/master/img/threesixty_15.jpg',
      'https://raw.githubusercontent.com/heartcode/360-Image-Slider/master/img/threesixty_16.jpg',
      'https://raw.githubusercontent.com/heartcode/360-Image-Slider/master/img/threesixty_17.jpg',
      'https://raw.githubusercontent.com/heartcode/360-Image-Slider/master/img/threesixty_18.jpg',
      'https://raw.githubusercontent.com/heartcode/360-Image-Slider/master/img/threesixty_19.jpg',
      'https://raw.githubusercontent.com/heartcode/360-Image-Slider/master/img/threesixty_20.jpg',
      'https://raw.githubusercontent.com/heartcode/360-Image-Slider/master/img/threesixty_21.jpg',
      'https://raw.githubusercontent.com/heartcode/360-Image-Slider/master/img/threesixty_22.jpg',
      'https://raw.githubusercontent.com/heartcode/360-Image-Slider/master/img/threesixty_23.jpg',
      'https://raw.githubusercontent.com/heartcode/360-Image-Slider/master/img/threesixty_24.jpg',
      'https://raw.githubusercontent.com/heartcode/360-Image-Slider/master/img/threesixty_25.jpg',
      'https://raw.githubusercontent.com/heartcode/360-Image-Slider/master/img/threesixty_26.jpg',
      'https://raw.githubusercontent.com/heartcode/360-Image-Slider/master/img/threesixty_27.jpg',
      'https://raw.githubusercontent.com/heartcode/360-Image-Slider/master/img/threesixty_28.jpg',
      'https://raw.githubusercontent.com/heartcode/360-Image-Slider/master/img/threesixty_29.jpg',
      'https://raw.githubusercontent.com/heartcode/360-Image-Slider/master/img/threesixty_30.jpg',
      'https://raw.githubusercontent.com/heartcode/360-Image-Slider/master/img/threesixty_31.jpg',
      'https://raw.githubusercontent.com/heartcode/360-Image-Slider/master/img/threesixty_32.jpg',
      'https://raw.githubusercontent.com/heartcode/360-Image-Slider/master/img/threesixty_33.jpg',
      'https://raw.githubusercontent.com/heartcode/360-Image-Slider/master/img/threesixty_34.jpg',
      'https://raw.githubusercontent.com/heartcode/360-Image-Slider/master/img/threesixty_35.jpg',
      'https://raw.githubusercontent.com/heartcode/360-Image-Slider/master/img/threesixty_36.jpg',
      'https://raw.githubusercontent.com/heartcode/360-Image-Slider/master/img/threesixty_37.jpg',
          'https://raw.githubusercontent.com/heartcode/360-Image-Slider/master/img/threesixty_38.jpg',
          'https://raw.githubusercontent.com/heartcode/360-Image-Slider/master/img/threesixty_39.jpg',    'https://raw.githubusercontent.com/heartcode/360-Image-Slider/master/img/threesixty_40.jpg', 
       'https://raw.githubusercontent.com/heartcode/360-Image-Slider/master/img/threesixty_41.jpg', 'https://raw.githubusercontent.com/heartcode/360-Image-Slider/master/img/threesixty_42.jpg',    'https://raw.githubusercontent.com/heartcode/360-Image-Slider/master/img/threesixty_43.jpg',    'https://raw.githubusercontent.com/heartcode/360-Image-Slider/master/img/threesixty_44.jpg',    'https://raw.githubusercontent.com/heartcode/360-Image-Slider/master/img/threesixty_45.jpg',    'https://raw.githubusercontent.com/heartcode/360-Image-Slider/master/img/threesixty_46.jpg',    'https://raw.githubusercontent.com/heartcode/360-Image-Slider/master/img/threesixty_47.jpg',    'https://raw.githubusercontent.com/heartcode/360-Image-Slider/master/img/threesixty_48.jpg',    'https://raw.githubusercontent.com/heartcode/360-Image-Slider/master/img/threesixty_49.jpg',    'https://raw.githubusercontent.com/heartcode/360-Image-Slider/master/img/threesixty_50.jpg',    'https://raw.githubusercontent.com/heartcode/360-Image-Slider/master/img/threesixty_51.jpg',    'https://raw.githubusercontent.com/heartcode/360-Image-Slider/master/img/threesixty_52.jpg',    'https://raw.githubusercontent.com/heartcode/360-Image-Slider/master/img/threesixty_53.jpg',
          'https://raw.githubusercontent.com/heartcode/360-Image-Slider/master/img/threesixty_54.jpg',    'https://raw.githubusercontent.com/heartcode/360-Image-Slider/master/img/threesixty_55.jpg',    'https://raw.githubusercontent.com/heartcode/360-Image-Slider/master/img/threesixty_56.jpg',    'https://raw.githubusercontent.com/heartcode/360-Image-Slider/master/img/threesixty_57.jpg',    'https://raw.githubusercontent.com/heartcode/360-Image-Slider/master/img/threesixty_58.jpg',    'https://raw.githubusercontent.com/heartcode/360-Image-Slider/master/img/threesixty_59.jpg',    'https://raw.githubusercontent.com/heartcode/360-Image-Slider/master/img/threesixty_60.jpg',    'https://raw.githubusercontent.com/heartcode/360-Image-Slider/master/img/threesixty_61.jpg',    'https://raw.githubusercontent.com/heartcode/360-Image-Slider/master/img/threesixty_62.jpg',    'https://raw.githubusercontent.com/heartcode/360-Image-Slider/master/img/threesixty_63.jpg',    'https://raw.githubusercontent.com/heartcode/360-Image-Slider/master/img/threesixty_64.jpg',    'https://raw.githubusercontent.com/heartcode/360-Image-Slider/master/img/threesixty_65.jpg',    'https://raw.githubusercontent.com/heartcode/360-Image-Slider/master/img/threesixty_66.jpg',    'https://raw.githubusercontent.com/heartcode/360-Image-Slider/master/img/threesixty_67.jpg', 
      'https://raw.githubusercontent.com/heartcode/360-Image-Slider/master/img/threesixty_68.jpg', 
      'https://raw.githubusercontent.com/heartcode/360-Image-Slider/master/img/threesixty_69.jpg', 'https://raw.githubusercontent.com/heartcode/360-Image-Slider/master/img/threesixty_70.jpg',    'https://raw.githubusercontent.com/heartcode/360-Image-Slider/master/img/threesixty_71.jpg',    'https://raw.githubusercontent.com/heartcode/360-Image-Slider/master/img/threesixty_72.jpg',    'https://raw.githubusercontent.com/heartcode/360-Image-Slider/master/img/threesixty_73.jpg',    'https://raw.githubusercontent.com/heartcode/360-Image-Slider/master/img/threesixty_74.jpg',    'https://raw.githubusercontent.com/heartcode/360-Image-Slider/master/img/threesixty_75.jpg',    'https://raw.githubusercontent.com/heartcode/360-Image-Slider/master/img/threesixty_76.jpg',    'https://raw.githubusercontent.com/heartcode/360-Image-Slider/master/img/threesixty_77.jpg',    'https://raw.githubusercontent.com/heartcode/360-Image-Slider/master/img/threesixty_78.jpg',    'https://raw.githubusercontent.com/heartcode/360-Image-Slider/master/img/threesixty_79.jpg',    'https://raw.githubusercontent.com/heartcode/360-Image-Slider/master/img/threesixty_80.jpg',    'https://raw.githubusercontent.com/heartcode/360-Image-Slider/master/img/threesixty_81.jpg',    'https://raw.githubusercontent.com/heartcode/360-Image-Slider/master/img/threesixty_82.jpg',    'https://raw.githubusercontent.com/heartcode/360-Image-Slider/master/img/threesixty_83.jpg',    'https://raw.githubusercontent.com/heartcode/360-Image-Slider/master/img/threesixty_84.jpg',
          'https://raw.githubusercontent.com/heartcode/360-Image-Slider/master/img/threesixty_85.jpg',    'https://raw.githubusercontent.com/heartcode/360-Image-Slider/master/img/threesixty_86.jpg',    'https://raw.githubusercontent.com/heartcode/360-Image-Slider/master/img/threesixty_87.jpg',    'https://raw.githubusercontent.com/heartcode/360-Image-Slider/master/img/threesixty_88.jpg',    'https://raw.githubusercontent.com/heartcode/360-Image-Slider/master/img/threesixty_89.jpg',    'https://raw.githubusercontent.com/heartcode/360-Image-Slider/master/img/threesixty_90.jpg',    'https://raw.githubusercontent.com/heartcode/360-Image-Slider/master/img/threesixty_91.jpg',    'https://raw.githubusercontent.com/heartcode/360-Image-Slider/master/img/threesixty_92.jpg',    'https://raw.githubusercontent.com/heartcode/360-Image-Slider/master/img/threesixty_93.jpg',    'https://raw.githubusercontent.com/heartcode/360-Image-Slider/master/img/threesixty_94.jpg',    'https://raw.githubusercontent.com/heartcode/360-Image-Slider/master/img/threesixty_95.jpg',    'https://raw.githubusercontent.com/heartcode/360-Image-Slider/master/img/threesixty_96.jpg',    'https://raw.githubusercontent.com/heartcode/360-Image-Slider/master/img/threesixty_97.jpg',    'https://raw.githubusercontent.com/heartcode/360-Image-Slider/master/img/threesixty_98.jpg',    'https://raw.githubusercontent.com/heartcode/360-Image-Slider/master/img/threesixty_99.jpg',    'https://raw.githubusercontent.com/heartcode/360-Image-Slider/master/img/threesixty_100.jpg',
       'https://raw.githubusercontent.com/heartcode/360-Image-Slider/master/img/threesixty_101.jpg',
      'https://raw.githubusercontent.com/heartcode/360-Image-Slider/master/img/threesixty_102.jpg',
      'https://raw.githubusercontent.com/heartcode/360-Image-Slider/master/img/threesixty_103.jpg',
      'https://raw.githubusercontent.com/heartcode/360-Image-Slider/master/img/threesixty_104.jpg',
      'https://raw.githubusercontent.com/heartcode/360-Image-Slider/master/img/threesixty_105.jpg',
      'https://raw.githubusercontent.com/heartcode/360-Image-Slider/master/img/threesixty_106.jpg',
      'https://raw.githubusercontent.com/heartcode/360-Image-Slider/master/img/threesixty_107.jpg',
      'https://raw.githubusercontent.com/heartcode/360-Image-Slider/master/img/threesixty_108.jpg',
      'https://raw.githubusercontent.com/heartcode/360-Image-Slider/master/img/threesixty_109.jpg',
      'https://raw.githubusercontent.com/heartcode/360-Image-Slider/master/img/threesixty_110.jpg',
      'https://raw.githubusercontent.com/heartcode/360-Image-Slider/master/img/threesixty_111.jpg',  
      'https://raw.githubusercontent.com/heartcode/360-Image-Slider/master/img/threesixty_112.jpg',
      'https://raw.githubusercontent.com/heartcode/360-Image-Slider/master/img/threesixty_113.jpg',
      'https://raw.githubusercontent.com/heartcode/360-Image-Slider/master/img/threesixty_114.jpg',
      'https://raw.githubusercontent.com/heartcode/360-Image-Slider/master/img/threesixty_115.jpg',
      'https://raw.githubusercontent.com/heartcode/360-Image-Slider/master/img/threesixty_116.jpg',
      'https://raw.githubusercontent.com/heartcode/360-Image-Slider/master/img/threesixty_117.jpg',
      'https://raw.githubusercontent.com/heartcode/360-Image-Slider/master/img/threesixty_118.jpg',
      'https://raw.githubusercontent.com/heartcode/360-Image-Slider/master/img/threesixty_119.jpg',
      'https://raw.githubusercontent.com/heartcode/360-Image-Slider/master/img/threesixty_120.jpg',
      'https://raw.githubusercontent.com/heartcode/360-Image-Slider/master/img/threesixty_121.jpg',
      'https://raw.githubusercontent.com/heartcode/360-Image-Slider/master/img/threesixty_122.jpg',
      'https://raw.githubusercontent.com/heartcode/360-Image-Slider/master/img/threesixty_123.jpg',
      'https://raw.githubusercontent.com/heartcode/360-Image-Slider/master/img/threesixty_124.jpg',
      'https://raw.githubusercontent.com/heartcode/360-Image-Slider/master/img/threesixty_125.jpg',
      'https://raw.githubusercontent.com/heartcode/360-Image-Slider/master/img/threesixty_126.jpg',
      'https://raw.githubusercontent.com/heartcode/360-Image-Slider/master/img/threesixty_127.jpg',
      'https://raw.githubusercontent.com/heartcode/360-Image-Slider/master/img/threesixty_128.jpg',
      'https://raw.githubusercontent.com/heartcode/360-Image-Slider/master/img/threesixty_129.jpg',
      'https://raw.githubusercontent.com/heartcode/360-Image-Slider/master/img/threesixty_130.jpg',
      'https://raw.githubusercontent.com/heartcode/360-Image-Slider/master/img/threesixty_131.jpg',
      'https://raw.githubusercontent.com/heartcode/360-Image-Slider/master/img/threesixty_132.jpg',
      'https://raw.githubusercontent.com/heartcode/360-Image-Slider/master/img/threesixty_133.jpg',
      'https://raw.githubusercontent.com/heartcode/360-Image-Slider/master/img/threesixty_134.jpg',
      'https://raw.githubusercontent.com/heartcode/360-Image-Slider/master/img/threesixty_135.jpg',
      'https://raw.githubusercontent.com/heartcode/360-Image-Slider/master/img/threesixty_136.jpg',
      'https://raw.githubusercontent.com/heartcode/360-Image-Slider/master/img/threesixty_137.jpg',
          'https://raw.githubusercontent.com/heartcode/360-Image-Slider/master/img/threesixty_138.jpg',
          'https://raw.githubusercontent.com/heartcode/360-Image-Slider/master/img/threesixty_139.jpg',    'https://raw.githubusercontent.com/heartcode/360-Image-Slider/master/img/threesixty_140.jpg', 
       'https://raw.githubusercontent.com/heartcode/360-Image-Slider/master/img/threesixty_141.jpg',   'https://raw.githubusercontent.com/heartcode/360-Image-Slider/master/img/threesixty_142.jpg',    'https://raw.githubusercontent.com/heartcode/360-Image-Slider/master/img/threesixty_143.jpg',    'https://raw.githubusercontent.com/heartcode/360-Image-Slider/master/img/threesixty_144.jpg',    'https://raw.githubusercontent.com/heartcode/360-Image-Slider/master/img/threesixty_145.jpg',    'https://raw.githubusercontent.com/heartcode/360-Image-Slider/master/img/threesixty_146.jpg',    'https://raw.githubusercontent.com/heartcode/360-Image-Slider/master/img/threesixty_147.jpg',    'https://raw.githubusercontent.com/heartcode/360-Image-Slider/master/img/threesixty_148.jpg',    'https://raw.githubusercontent.com/heartcode/360-Image-Slider/master/img/threesixty_149.jpg',    'https://raw.githubusercontent.com/heartcode/360-Image-Slider/master/img/threesixty_150.jpg',    'https://raw.githubusercontent.com/heartcode/360-Image-Slider/master/img/threesixty_151.jpg',    'https://raw.githubusercontent.com/heartcode/360-Image-Slider/master/img/threesixty_152.jpg',    'https://raw.githubusercontent.com/heartcode/360-Image-Slider/master/img/threesixty_153.jpg',
          'https://raw.githubusercontent.com/heartcode/360-Image-Slider/master/img/threesixty_154.jpg',    'https://raw.githubusercontent.com/heartcode/360-Image-Slider/master/img/threesixty_155.jpg',    'https://raw.githubusercontent.com/heartcode/360-Image-Slider/master/img/threesixty_156.jpg',    'https://raw.githubusercontent.com/heartcode/360-Image-Slider/master/img/threesixty_157.jpg',    'https://raw.githubusercontent.com/heartcode/360-Image-Slider/master/img/threesixty_158.jpg',    'https://raw.githubusercontent.com/heartcode/360-Image-Slider/master/img/threesixty_159.jpg',    'https://raw.githubusercontent.com/heartcode/360-Image-Slider/master/img/threesixty_160.jpg',    'https://raw.githubusercontent.com/heartcode/360-Image-Slider/master/img/threesixty_161.jpg',    'https://raw.githubusercontent.com/heartcode/360-Image-Slider/master/img/threesixty_162.jpg',    'https://raw.githubusercontent.com/heartcode/360-Image-Slider/master/img/threesixty_163.jpg',    'https://raw.githubusercontent.com/heartcode/360-Image-Slider/master/img/threesixty_164.jpg',    'https://raw.githubusercontent.com/heartcode/360-Image-Slider/master/img/threesixty_165.jpg',    'https://raw.githubusercontent.com/heartcode/360-Image-Slider/master/img/threesixty_166.jpg',    'https://raw.githubusercontent.com/heartcode/360-Image-Slider/master/img/threesixty_167.jpg',  
      'https://raw.githubusercontent.com/heartcode/360-Image-Slider/master/img/threesixty_168.jpg',  
      'https://raw.githubusercontent.com/heartcode/360-Image-Slider/master/img/threesixty_169.jpg',  'https://raw.githubusercontent.com/heartcode/360-Image-Slider/master/img/threesixty_170.jpg',    'https://raw.githubusercontent.com/heartcode/360-Image-Slider/master/img/threesixty_171.jpg',    'https://raw.githubusercontent.com/heartcode/360-Image-Slider/master/img/threesixty_172.jpg',    'https://raw.githubusercontent.com/heartcode/360-Image-Slider/master/img/threesixty_173.jpg',    'https://raw.githubusercontent.com/heartcode/360-Image-Slider/master/img/threesixty_174.jpg',    'https://raw.githubusercontent.com/heartcode/360-Image-Slider/master/img/threesixty_175.jpg',    'https://raw.githubusercontent.com/heartcode/360-Image-Slider/master/img/threesixty_176.jpg',    'https://raw.githubusercontent.com/heartcode/360-Image-Slider/master/img/threesixty_177.jpg',    'https://raw.githubusercontent.com/heartcode/360-Image-Slider/master/img/threesixty_178.jpg',    'https://raw.githubusercontent.com/heartcode/360-Image-Slider/master/img/threesixty_179.jpg',    'https://raw.githubusercontent.com/heartcode/360-Image-Slider/master/img/threesixty_180.jpg'
        
    ],
  width: 1000,
  height: 500,
  speed: 100
});
 $("#services-menu li a").hover(function()
 {
   var $id=$(this).attr('id');     
   threesixty.goto($id);
 });
<script src="https://cdn.jsdelivr.net/npm/@mladenilic/threesixty.js/dist/threesixty.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="services-menu" id="services-menu">
  <li><a href="#" id="1" class="active">item1</a></li>
  <li><a href="#" id="36">item2</a></li>
  <li><a href="#" id="72">item3</a></li>
  <li><a href="#" id="108">item4</a></li>
  <li><a href="#" id="144">item5</a></li>
  <li><a href="#" id="180">item6</a></li>
</ul>

<div id="threesixty"></div>

Я использую ThreeSixty. js для поворота изображения. Когда над ссылками происходит наведение, изображение автоматически поворачивается к индексу (идентификатору) ссылки. Когда я использовал от threesixty.goto($id); до go к индексу изображения, изображение прямо поворачивалось к этому индексу. Мне было интересно, есть ли способ медленного поворота от одного индекса к другому?

Например, если на ссылке item2 происходит зависание, изображение поворачивает индекс от 1 до 36 (текущий индекс / идентификатор ссылка /)

...