https://www.opldisplaytec.com/templates/tradeSite/assets/js/product-detail.js?v=1.20

1(function (window){
2  /**
3   * 小商品图鼠标移入事件
4   */
5  function swiperShopMouseOver(){
6    var smallImg = document.getElementById("small-img")
7    var bigImg = document.getElementById("big_img")
8    var swiperWrapperDom = document.getElementById("shop-swiper-wrapper")
9  // console.log(swiperWrapperDom)
10    var childElements = swiperWrapperDom.querySelectorAll("li")
11    var childElementsLength = childElements.length
12  swiperWrapperDom.addEventListener("mouseover",function (e){
13    // console.log("e",e)
14    var targetElement = e.target
15    var targetSrc = targetElement.getAttribute("src")
16    var id = targetElement.getAttribute("id")
17    console.log("video:"+id);
18    if(id == 'video'){
19        $("#media").removeClass("hide");
20        $("#small-img").addClass("hide");
21        $('#show').hide();
22    }
23    else if(targetSrc){
24      for(var i=0; i<childElementsLength;i++){
25        childElements[i].classList.remove("item-cur")
26      }
27      var targetLiElement = e.target.parentElement
28      // console.log("targetLiElement",targetLiElement)
29      targetLiElement.classList.add("item-cur")
30      if(id != 'video'){
31          smallImg.setAttribute("src", targetSrc)
32          bigImg.setAttribute("src", targetSrc)
33      }
34       $("#media").addClass("hide");
35       $("#small-img").removeClass("hide");
36      
37    }
38  })
39}
40
41  /**
42   * 商品切换初始化
43   */
44  function thumbnailInit(){
45    var swiperWrapperDom = document.getElementById("shop-swiper-wrapper")
46    // console.log(swiperWrapperDom)
47    var childElements = swiperWrapperDom.querySelectorAll("li")
48    var shopBtnPrev = document.getElementById("shop-btn-prev")
49    var shopBtnNext = document.getElementById("shop-btn-next")
50    var firstHasDisabled = shopBtnPrev.classList.contains("btn_prev_disabled")
51    if(!firstHasDisabled){
52      // 设置前翻按钮不可点击
53      shopBtnPrev.classList.add("btn_prev_disabled")
54    }
55    if(childElements.length<=5){
56      shopBtnNext.classList.add("btn_next_disabled")
57    }
58  }
59
60  /**
61   * 上一个下一个按钮点击
62   */
63  function prevNextBtnClick(type){
64    var swiperWrapperDom = document.getElementById("shop-swiper-wrapper")
65    // console.log(swiperWrapperDom)
66    var shopBtnPrev = document.getElementById("shop-btn-prev")
67    var shopBtnNext = document.getElementById("shop-btn-next")
68    if(type === "prev"){
69      if(shopBtnPrev.classList.contains("btn_prev_disabled")){
70        return
71      }
72    } else {
73      if(shopBtnNext.classList.contains("btn_next_disabled")){
74        return
75      }
76    }
77    var childElements = swiperWrapperDom.querySelectorAll("li")
78    var childElementsLength = childElements.length
79    var moveX = type === "prev" ? 78 : -78
80    var warpperStyle = swiperWrapperDom.getAttribute("style")
81    // console.log("warpperStyle", warpperStyle)
82    if(!warpperStyle){
83      swiperWrapperDom.style.marginLeft = moveX + "px"
84      shopBtnPrev.classList.remove("btn_prev_disabled")
85    } else {
86      var oldMarginValue = warpperStyle.split(":")[1].replace("px","").replace(";","")
87      // console.log("oldMarginValue", oldMarginValue)
88      if(oldMarginValue*1 === 0){
89        shopBtnPrev.classList.remove("btn_prev_disabled")
90      } else {
91        shopBtnNext.classList.remove("btn_next_disabled")
92      }
93      var marginValue = moveX+oldMarginValue*1
94      if(marginValue === 0){
95        shopBtnPrev.classList.add("btn_prev_disabled")
96        shopBtnNext.classList.remove("btn_next_disabled")
97      } else {
98        // console.log("marginValue", marginValue)
99        // console.log("(childElementsLength - 5)*78", (childElementsLength - 5)*78)
100        if(Math.abs(marginValue) >= (childElementsLength - 5)*78){
101          shopBtnNext.classList.add("btn_next_disabled")
102        }
103      }
104      swiperWrapperDom.style.marginLeft = marginValue + "px"
105    }
106    for(var i=0; i<childElementsLength; i++){
107      var k = i
108      var isCurrent = childElements[k].classList.contains("item-cur")
109      if(isCurrent){
110        // console.log("k", k)
111        childElements[k].classList.remove("item-cur")
112        var nextCurrent = type === "prev" ? k-1 : k+1
113        childElements[nextCurrent].classList.add("item-cur")
114        var smallImg = document.getElementById("small-img")
115        var bigImg = document.getElementById("big_img")
116        smallImg.setAttribute("src", childElements[nextCurrent].querySelector("img").getAttribute("src"))
117        bigImg.setAttribute("src", childElements[nextCurrent].querySelector("img").getAttribute("src"))
118        break
119      }
120    }
121  }
122
123  /**
124   * 数据初始化
125   */
126  function dataInit(){
127    // console.log("数据初始化，如果有购物数据，就显示购物车")
128    // var localShopList = window.comparePanel.getCacheShopInfoFromLocalStorage()
129    // window.comparePanel.comparePanelTogetherShow(localShopList.length ? "show" : "hide")
130    // localShopList.length && localShopList.forEach(function (shop){
131    //   window.comparePanel.add(shop)
132    // })
133  }
134
135
136  swiperShopMouseOver()
137  dataInit()
138  thumbnailInit()
139  /**
140   * 暴露全局productDetail模块和方法
141   */
142  window.productDetail = {
143    thumbnailInit,
144    prevNextBtnClick,
145  }
146})(window)