goto.js 5.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200
  1. $('.designer-bannerslider').slick({
  2. slidesToShow: 1, //預設 1 幻燈片顯示幾張
  3. slidesToScroll: 1,//預設 1 幻灯片每次滑動幾張
  4. arrows: true, // 預設 true 左右箭頭是否顯示
  5. dots: true,
  6. prevArrow: '<button type="button" class="slick-prev"><div class="slick-arrow-slider d-flex justify-content-center align-items-center" style="width:50px; height:50px;"><img class="arrow-img" style="width: 15px;" src="./img/sec04/arrow-left.png" alt=""><div></button>',
  7. nextArrow: '<button type="button" class="slick-next"><div class="slick-arrow-slider d-flex justify-content-center align-items-center" style="width:50px; height:50px;"><img class="arrow-img" style="width: 15px;" src="./img/sec04/arrow.png" alt=""><div></button>',
  8. });
  9. $('.designer-bannerslider-mb').slick({
  10. slidesToShow: 1, //預設 1 幻燈片顯示幾張
  11. slidesToScroll: 1,//預設 1 幻灯片每次滑動幾張
  12. arrows: false, // 預設 true 左右箭頭是否顯示
  13. dots: true,
  14. prevArrow: '<button type="button" class="slick-prev"><div class="slick-arrow-slider d-flex justify-content-center align-items-center" style="width:50px; height:50px;"><img class="arrow-img" style="width: 15px;" src="./img/sec04/arrow.png" alt=""><div></button>',
  15. nextArrow: '<button type="button" class="slick-next"><div class="slick-arrow-slider d-flex justify-content-center align-items-center" style="width:50px; height:50px;"><img class="arrow-img" style="width: 15px;" src="./img/sec04/arrow.png" alt=""><div></button>',
  16. });
  17. $('designer-nav').hide();
  18. $(".item-down").click(function () {
  19. $('.designer-nav').slideToggle();
  20. });
  21. $(".playbutton").click(function () {
  22. var videosrc = $(this).data("info");
  23. $('.youtube-video').attr('src', `https://www.youtube.com/embed//${videosrc}?autoplay=1`);
  24. });
  25. $(".btn-close").click(function () {
  26. $('.youtube-video').attr('src', ``);
  27. });
  28. $('#yt-video').on('hidden.bs.modal', function () {
  29. $('.youtube-video').attr('src', ``);
  30. });
  31. $('#yt-video-mb').on('hidden.bs.modal', function () {
  32. $('.youtube-video').attr('src', ``);
  33. });
  34. let videoId = ['XlPxHa9BcKY', 'xc6SNElGDIM', 'xc6SNElGDIM'];
  35. var index = 0;
  36. function getSlideNNext() {
  37. index++
  38. if (index == videoId.length) index = 0;
  39. console.log(videoId[index]);
  40. };
  41. $(".designer-bannerslider2").on('beforeChange', function (event, slick, currentSlide, nextSlide) {
  42. $('.youtube-video2').each(function () {
  43. this.contentWindow.postMessage('{"event": "command", "func": "stopVideo", "args": ""}', '*');
  44. });
  45. });
  46. $(document).on("click", ".slick-next", function (event) {
  47. getSlideNNext();
  48. $('.youtube-video2').each(function () {
  49. this.contentWindow.postMessage('{"event": "command", "func": "stopVideo", "args": ""}', '*');
  50. });
  51. });
  52. $('#yt-video-mb1').on('hidden.bs.modal', function () {
  53. $('.youtube-video2').each(function () {
  54. this.contentWindow.postMessage('{"event": "command", "func": "stopVideo", "args": ""}', '*');
  55. });
  56. });
  57. $('#yt-video-mb2').on('hidden.bs.modal', function () {
  58. $('.youtube-video2').each(function () {
  59. this.contentWindow.postMessage('{"event": "command", "func": "stopVideo", "args": ""}', '*');
  60. });
  61. });
  62. $('#yt-video-mb3').on('hidden.bs.modal', function () {
  63. $('.youtube-video2').each(function () {
  64. this.contentWindow.postMessage('{"event": "command", "func": "stopVideo", "args": ""}', '*');
  65. });
  66. });
  67. function getSlidePrev() {
  68. index--
  69. if (index == -1) index = videoId.length - 1;
  70. console.log(videoId[index]);
  71. };
  72. $(document).on("click", ".slick-prev", function (event) {
  73. getSlidePrev();
  74. $('.youtube-video2').each(function () {
  75. this.contentWindow.postMessage('{"event": "command", "func": "stopVideo", "args": ""}', '*');
  76. });
  77. });
  78. $('.designer-bannerslider2').slick({
  79. slidesToShow: 1, //預設 1 幻燈片顯示幾張
  80. slidesToScroll: 1,//預設 1 幻灯片每次滑動幾張
  81. arrows: true, // 預設 true 左右箭頭是否顯示
  82. dots: true,
  83. prevArrow: '<button type="button" class="slick-prev""><div class="slick-arrow-slider d-flex justify-content-center align-items-center" style="width:50px; height:50px;"><img class="arrow-img" style="width: 15px;" src="./img/sec04/arrow-left.png" alt=""><div></button>',
  84. nextArrow: '<button type="button" class="slick-next"><div class="slick-arrow-slider d-flex justify-content-center align-items-center" style="width:50px; height:50px;"><img class="arrow-img" style="width: 15px;" src="./img/sec04/arrow.png" alt=""><div></button>',
  85. });
  86. $(".play-mb").click(function () {
  87. // $('.modal-box-mb').css('width','100%');
  88. var videosrc = $(this).data("info");
  89. var slidenumber = $(this).data("slide");
  90. console.log(slidenumber);
  91. console.log(videosrc);
  92. $('.designer-bannerslider2').slick('slickGoTo', 0);
  93. });
  94. // 手機選單彈跳視窗
  95. $("#menu-box2").hide();
  96. $("#menu-box").hide();
  97. $("#menu-btn1").click(function () {
  98. $("#menu-box").fadeToggle("slow");
  99. $("#menu-box2").fadeToggle("slow");
  100. });
  101. $(".link").click(function () {
  102. $("#menu-box").slideUp("slow", function () {
  103. $("#menu-box2").slideUp("slow");
  104. // Animation complete.
  105. });
  106. });
  107. // var flagX = 0;
  108. // var flagXM = 0;
  109. // function getFlag(){
  110. // flagX = event.touches[0].pageX;
  111. // flagXM = flagX;
  112. // }
  113. // function setFlag(){
  114. // flagXM = event.touches[0].pageX;
  115. // }
  116. // function change(){
  117. // var range = flagXM - flagX;
  118. // //如果水平滑動距離小於30,就不切換
  119. // if(Math.abs(range) < 30){
  120. // return false;
  121. // }
  122. // var direction = range < 0 ?'next':'prev';
  123. // $("#carousel-example-generic").carousel(direction);
  124. // }
  125. // function designer_img(){
  126. // for(var i=1; i<42; i++){
  127. // let designer_slide_img="";
  128. // var img_number=i;
  129. // if (i<10){
  130. // img_number="0"+i
  131. // }
  132. // designer_slide_img=`
  133. // <div class="carousel-item active">
  134. // <img src="https://images.hhh.com.tw/uploads/_hcase/designer337_66_'${img_number}'.jpg" class="d-block w-100"
  135. // alt="...">
  136. // </div>
  137. // `
  138. // }
  139. // $('.exampleModal3').html(designer_slide_img);
  140. // }
  141. // designer_img();