goto.js 2.0 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980
  1. $(".banner-slider").slick({
  2. speed: 1000,
  3. swipe: true,
  4. });
  5. $(".content1-right").slick({
  6. dotsClass: 'slick-dots',
  7. dots: true,
  8. speed: 1000,
  9. swipe: true,
  10. });
  11. $(".text-1").addClass("contant-toggle");
  12. $(".content1-right").on('beforeChange', function (event, slick, currentSlide, nextSlide) {
  13. console.log('beforeChangeEvent: currenSlide=' + currentSlide + ', nextSlide= ' + nextSlide);
  14. var nextSlide;
  15. if (nextSlide=1) {
  16. $(".text-1").removeClass("contant-toggle");
  17. $(".text-2").toggleClass("contant-toggle");
  18. }else if (nextSlide=2) {
  19. $(".text-3").addClass("contant-toggle");
  20. }else if(nextSlide=0){
  21. $(".text-2").removeClass("contant-toggle");
  22. $(".text-1").addClass("contant-toggle");
  23. $(".text-3").removeClass("contant-toggle");
  24. }
  25. });
  26. $("*").each(function (index, element) {
  27. // 此元素被點選後執行
  28. $(this).click(function (e) {
  29. // 取得被點選元素的屬性:data-gt-target
  30. var target = $(this).attr("data-gt-target");
  31. var duration = $(this).attr("data-gt-duration");
  32. var offset = $(this).attr("data-gt-offset");
  33. // JS 語法:判斷式
  34. // if (條件) {程式區塊}
  35. // 當條件成立,會執行程式區塊
  36. // 如果 目標有資料 才會執行 { } 內的程式
  37. // 避免出現 undefine (未定義 - 不存在的資料)
  38. if (target) {
  39. //console.log("目標:" + target);
  40. //console.log("時間:" + duration);
  41. //console.log("位移:" + offset);
  42. // 上方位置 = 目標區塊.位移().上方位置
  43. var top = $(target).offset().top;
  44. //console.log("要前往元素的上方位置:" + top);
  45. // 網頁元素.停止().動畫({ 上方捲動:指定元素 - 位移},持續時間)
  46. // parseInt() 將文字轉為數字
  47. $("html").stop().animate({
  48. scrollTop: top - offset
  49. }, parseInt(duration));
  50. }
  51. });
  52. });
  53. // 避免動畫與使用者滾輪衝突
  54. // html 在滾動滾輪時 停止 html 所有效果
  55. $("html").on("mousewheel", function () {
  56. $("html").stop();
  57. });