每个广告在Proudect页面中的滑块

时间:2018-08-06 04:44:46

标签: php jquery html ajax slider

您好,我正在一家初创公司工作,但是我的项目存在很大问题。 在搜索页面中,用户可以按不同的项目和显示的广告进行搜索。 我想在图片区域中的每个广告均按滑块显示图片。 让我通过Pic显示。 这是搜索页面 Searchin_Page

我想为显示的每个广告使用滑块,但其剂量不能正确显示。 。 。 这是我的Jquery代码

var slideIndex = 1;
showDivs(slideIndex);

function plusDivs(n) {
  showDivs(slideIndex += n);
}

function currentDiv(n) {
  showDivs(slideIndex = n);
}

function showDivs(n) {
  var i;
  var x = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("demo");
  if (n > x.length) {
    slideIndex = 1
  }
  if (n < 1) {
    slideIndex = x.length
  }
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
  for (i = 0; i < dots.length; i++) {
    dots[i].className = dots[i].className.replace(" w3-white", "");
  }
  x[slideIndex - 1].style.display = "block";
  dots[slideIndex - 1].className += " w3-white";
}

这是HTML边。 。 。

<div class="Image_Area_Panel">
  <div class="w3-content w3-display-container" style="max-width:800px">
    <img class="mySlides" src="http://localhost/Ajency/Public/456d6ef5aae4e33926a4c592aa5210a5--sexy-men-hot-men.jpg">
    <img class="mySlides" src="http://localhost/Ajency/Public/620b1b643b4d40bef759a386764fc630.jpg">
    <img class="mySlides" src="http://localhost/Ajency/Public/Brant-daugherty-cuff.jpg">
    <div class="w3-center w3-container w3-section w3-large w3-text-white w3-display-bottommiddle Aroos" style="width:100%">
      <div class="AreaBox">
        <div class="w3-left w3-hover-text-khaki" onclick="plusDivs(-1)">&#10094;</div>
        <div class="w3-right w3-hover-text-khaki" onclick="plusDivs(1)">&#10095;</div>
      </div>
      <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(1)"></span>
      <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(2)"></span>
      <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(3)"></span>
    </div>
  </div>

对不起,我的英语能力

0 个答案:

没有答案