bhouse.js 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142
  1. $(".responsive").slick({
  2. dots: true,
  3. slidesToShow: 1,
  4. slidesToScroll: 1,
  5. autoplay: true,
  6. autoplaySpeed: 3000,
  7. arrows: false,
  8. });
  9. // 直式輪播圖動態更改高度
  10. function changeHeight() {
  11. let firstImg = $('.style_house_sec02_slide div:first-child img');
  12. let firstImgHeight = firstImg.css('height');
  13. $('.style_house_sec02_slide .vertical-img').css("height", `${firstImgHeight}`)
  14. }
  15. changeHeight();
  16. $(window).resize(function () {
  17. setTimeout(() => {
  18. changeHeight();
  19. }, 100)
  20. });
  21. let imgCount = $(".slide_single_img").length;
  22. let heightImg = [];
  23. $('.slide_single_img').each(function (i) { // jquery.each() 循環讀取所有圖片
  24. let height = $(this).height();
  25. let width = $(this).width();
  26. let x = (height / width);
  27. console.log('index', i);
  28. console.log('height / width = ', x);
  29. if (x >= 1 && i !== 0) {
  30. heightImg.push($(this));
  31. // 預設高度為 0
  32. $(this).css({
  33. 'height': 0 + 'px',
  34. "margin": 'auto',
  35. });
  36. }
  37. });
  38. let heightImgIndex = [];
  39. function getAllIndex(arr) {
  40. // 篩選符合條件 Index
  41. for (i = 0; i < arr.length; i++) {
  42. if (arr[i].height === 0)
  43. heightImgIndex.push(i);
  44. }
  45. return heightImgIndex;
  46. }
  47. let allSlideImg = document.querySelectorAll('.slide_single_img');
  48. getAllIndex(allSlideImg);
  49. // 取得 slick 當前的 Index
  50. $('.style_house_sec02 .slider').on('beforeChange', function (event, slick, currentSlide, nextSlide) {
  51. for (i = 0; i < heightImgIndex.length; i++) {
  52. console.log(heightImgIndex[i]);
  53. if (nextSlide == heightImgIndex[i]) {
  54. allSlideImg[nextSlide].style.height = '500px';
  55. } else {
  56. allSlideImg[heightImgIndex[i]].style.height = '0px';
  57. }
  58. }
  59. });
  60. $('.slide_img').each(function () { // jquery.each() 循環讀取所有圖片
  61. var height = $(this).height();
  62. var width = $(this).width();
  63. let x = (height / width);
  64. if (x > 1) {
  65. $(this).css({
  66. 'width': 100 + 'px',
  67. "margin": 'auto',
  68. "padding": "0px",
  69. });
  70. } else {
  71. $(this).css({
  72. "margin-top": '30px',
  73. "padding": "5px",
  74. });
  75. }
  76. });
  77. $('.style_house_sec02 .slider-for').slick({
  78. slidesToShow: 1,
  79. slidesToScroll: 1,
  80. arrows: false,
  81. fade: true,
  82. asNavFor: '.slider-nav'
  83. });
  84. $('.style_house_sec02 .slider-nav').slick({
  85. slidesToShow: 5,
  86. slidesToScroll: 3,
  87. asNavFor: '.slider-for',
  88. dots: false,
  89. arrows: false,
  90. // centerMode: true,
  91. focusOnSelect: true
  92. });
  93. $(document).on("click", ".article__readMore", function (event) {
  94. $('.bhouseweb_loc_sec02').css('height', 'auto');
  95. $('.article__readMore').hide();
  96. });
  97. $(document).on("click", ".bhouseweb_loc_type>a", function (event) {
  98. $(this).siblings().removeClass('select');
  99. $(this).toggleClass("select");
  100. });
  101. $(".bt_slogan_portfolio").click(function () {
  102. $(".bt_slogan_portfolio").fadeOut();
  103. });
  104. $(".bt_slogan").click(function () {
  105. $(".bt_slogan_portfolio").fadeIn();
  106. });
  107. // Navbar Icon
  108. function changeIcon(e) {
  109. const item = document.querySelector('[data-toggle-class]');
  110. item.className === "close-btn" ? item.className = "navbar-toggler-icon" : item.className = "close-btn";
  111. }
  112. $('.furniture_design_content .slider-for').slick({
  113. slidesToShow: 1,
  114. slidesToScroll: 1,
  115. arrows: false,
  116. fade: true,
  117. asNavFor: '.slider-nav'
  118. });
  119. $('.furniture_design_content .slider-nav').slick({
  120. slidesToShow: 3,
  121. slidesToScroll: 1,
  122. asNavFor: '.slider-for',
  123. focusOnSelect: true
  124. });