可以在单个页面上多次使用的css js滑块

时间：2018-07-25 07:49:16

标签： javascript jquery html css slider

我想制作可在同一HTML页面上多次使用的CSS / jQuery滑块。

我有一个需要滑块作为类别链接的客户。到目前为止，我还没有设法使其在页面上作为单个滑块工作。有人可以检查代码并指出我做错了吗？我不知道如何组织项目。

如果有人可以写下要执行的步骤，那么我就不需要代码了，我将不胜感激如何最有效地完成此操作。 

var intervalid = {};

$(document).ready(function() {

  function slide(elem) {
    sliderid = $("#" + elem);
    //console.log(sliderid);

    //console.log(sliderid.find(".main_image"));

    sliderid.find(".main_image").on("mouseover", function() {
      //alert("hover");
      $(this).find(".main-desc").css("display", "block");
    });

    sliderid.find(".main_image").on("mouseleave", function() {
      //alert("hover");
      $(this).find(".main-desc").css("display", "none");
    });

    intervalid[elem] = setInterval(slidecycle(elem), 4500);
    //myinter = setInterval(testcycle(elem), 4500);
    //console.log(intervalid);
  }

  function testcycle(elem) {
    console.log("cycle");
  }

  function slidecycle(elem) {
    //console.log("slidecycle");
    sliderid = $("#" + elem); //id elementa
    //console.log(sliderid.find(".imgs_holder > .image"));

    var lastimage = sliderid.find(".imgs_holder > .image:last").hasClass("active"); // last image to cycle
    var currentimage = sliderid.find(".imgs_holder > .image.active"); // find current image

    // Check if last image, else use next()
    if (lastimage) {
      var nextimage = sliderid.find(".image_thumb > .image:first")
    } else {
      var nextimage = sliderid.find(".imgs_holder > .image.active").next();
    }

    // Switch active image from current to next()
    $(currentimage).removeClass("active");
    $(nextimage).addClass("active");

    // Duplicate code for animation
    var imgAlt = $(nextimage).find('img').attr("alt");
    var imgSrc = $(nextimage).find('img').attr("src");
    var imgTitle = $(nextimage).find('a').attr("href");
    var imgDesc = $(nextimage).find('.desc').html();
    var imgDescHeight = sliderid.find(".main_image").find('.main-desc').height();

    console.log(nextimage);

    $(nextimage).css("background-color", "#efefef");

    //Switch image 
    sliderid.find(".main_image .main-desc").animate({
      opacity: 0,
      marginBottom: -imgDescHeight
    }, 250, function() {
      sliderid.find(".main_image .main-desc").html(imgDesc).animate({
        opacity: 0.85,
        marginBottom: "0"
      }, 250);
      sliderid.find(".main_image img").attr({
        src: imgSrc,
        alt: imgAlt,
        name: imgAlt
      });
    });
  }

  slide("slider1");
  slide("slider2");
});
html {
  font-family: arial;
  font-size: 1em;
}

.imgs_holder {
  width: 100%;
}

.image {
  width: auto;
  height: 150px;
  display: inline-block;
  margin-right: 20px;
  line-height: 150px;
  padding: auto;
  margin: auto;
  background-color: black;
}

.image a>img {
  width: 200px;
  height: auto;
  margin: auto;
  padding: 0 10px;
  vertical-align: middle;
}

.main-desc {
  position: absolute;
  color: black;
  z-index: 100;
  padding: 10px;
  margin: 0;
  top: 65%;
  bottom: 0;
  width: 873px;
  background-color: black;
  opacity: .7;
  color: white;
  display: none;
}

.main_image {
  position: relative;
  width: 893px;
}

.main_image img {
  width: 893px;
}

.desc {
  display: none;
}

.slideshow {
  margin-bottom: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="slideshow" id="slider1">
  <div class="main_image">
    <img src="images/banner01.jpg" alt="slika 1" name="slika 1">
    <div class="main-desc">
      <h3>Subject</h3>
      <p>Aje, sem desc.</p>
    </div>
  </div>
  <div class="imgs_holder">
    <div class="image active">
      <a href="#"><img src="images/banner01.jpg" alt="Slika 1" name="Slika 1" /></a>
      <div class="desc">
        <h3>Subject</h3>
        <p>Aje, sem desc.</p>
      </div>
    </div>
    <div class="image">
      <a href="#"><img src="images/banner02.jpg" alt="Slika 2" name="Slika 2" /></a>
      <div class="desc">
        <h3>Subject</h3>
        <p>Aje, sem desc.</p>
      </div>
    </div>
    <div class="image">
      <a href="#"><img src="images/banner03.jpg" alt="Slika 3" name="Slika 3" /></a>
      <div class="desc">
        <h3>Subject</h3>
        <p>Aje, sem desc.</p>
      </div>
    </div>
    <div class="image">
      <a href="#"><img src="images/banner04.jpg" alt="Slika 4" name="Slika 4" /></a>
      <div class="desc">
        <h3>Subject</h3>
        <p>Aje, sem desc.</p>
      </div>
    </div>
  </div>
</div>
<div class="slideshow" id="slider2">
  <div class="main_image">
    <img src="images/banner01.jpg" alt="slika 1" name="slika 1">
    <div class="main-desc">
      <h3>Subject</h3>
      <p>Aje, sem desc.</p>
    </div>
  </div>
  <div class="imgs_holder">
    <div class="image">
      <a href="#"><img src="images/banner01.jpg" alt="Slika 1" name="Slika 1" /></a>
      <div class="desc">
        <h3>Subject</h3>
        <p>Aje, sem desc.</p>
      </div>
    </div>
    <div class="image">
      <a href="#"><img src="images/banner02.jpg" alt="Slika 2" name="Slika 2" /></a>
      <div class="desc">
        <h3>Subject</h3>
        <p>Aje, sem desc.</p>
      </div>
    </div>
    <div class="image">
      <a href="#"><img src="images/banner03.jpg" alt="Slika 3" name="Slika 3" /></a>
      <div class="desc">
        <h3>Subject</h3>
        <p>Aje, sem desc.</p>
      </div>
    </div>
    <div class="image">
      <a href="#"><img src="images/banner04.jpg" alt="Slika 4" name="Slika 4" /></a>
      <div class="desc">
        <h3>Subject</h3>
        <p>Aje, sem desc.</p>
      </div>
    </div>
  </div>
</div>

1 个答案:

答案 0 :(得分：1)

您的代码中有很多错误。

首先，我建议在开头$处使用美元符号命名jQuery变量。例如。 var $test = $(".test");
这样，您就不会进行不必要的jQuery调用

...
var nextimage = sliderid.find(".image_thumb > .image:first");
...
var imgAlt = $(nextimage).find('img').attr("alt");
...

nextimage变量已经是一个jQuery对象，因此$()是不必要的。

其次，您将当前元素检查为类active的元素，并将下一个元素检查为当前元素之后的下一个元素。但是，如果像您在第二个滑块中那样，开始时没有类active的元素怎么办？

您应该考虑这一点。

第三次，当您调用setInterval函数时，您应该这样做

setInterval(function() {
    slidecycle(elem);
}, 4500);

最后但并非最不重要请尽量消除jQuery调用，因为这会浪费时间和内存。不要重复自己-例如，如果您一次对同一元素进行某项操作，则将该元素保存为变量。

示例：

sliderid.find(".main_image").on("mouseover", function() {
  //alert("hover");
  $(this).find(".main-desc").css("display", "block");
});

sliderid.find(".main_image").on("mouseleave", function() {
  //alert("hover");
  $(this).find(".main-desc").css("display", "none");
});

收件人

var $main = sliderid.find(".main_image"),
    $mainDesc = $(this).find(".main-desc");

$main.on("mouseover", function() {
  //alert("hover");
  $mainDesc.css("display", "block");
});

$main.on("mouseleave", function() {
  //alert("hover");
  $mainDesc.css("display", "none");
});

或

var $mainDesc = $(this).find(".main-desc");

sliderid.find(".main_image").on("mouseover", function() {
    //alert("hover");
    $mainDesc.css("display", "block");
  })
  .on("mouseleave", function() {
    //alert("hover");
    $mainDesc.css("display", "none");
  });

这是一个有效的示例： 

var intervalid = {};

$(document).ready(function() {

  function slide(elem) {
    var $slider = $("#" + elem);
    var $description = $slider.find(".main-desc");

    $slider.find(".main_image").on("mouseover", function() {
        $description.show();
      })
      .on("mouseleave", function() {
        $description.hide();
      });

    intervalid[elem] = setInterval(function() {
      slidecycle($slider)
    }, 2000);
  }

  function slidecycle($slider) {

    var lastimage = $slider.find(".imgs_holder .image:last").hasClass("active");
    var $currentImage = $slider.find(".imgs_holder .image.active");

    if ($currentImage.length <= 0) {
      $currentImage = $slider.find(".imgs_holder .image:last");
      lastimage = true;
    }

    if (lastimage) {
      var $nextimage = $slider.find(".imgs_holder .image:first");
    } else {
      var $nextimage = $currentImage.next();
    }

    $currentImage.removeClass("active");
    $nextimage.addClass("active");


    var imgAlt = $nextimage.find('img').attr("alt");
    var imgSrc = $nextimage.find('img').attr("src");
    var imgTitle = $nextimage.find('a').attr("href");
    var imgDesc = $nextimage.find('.desc').html();
    var imgDescHeight = $slider.find(".main_image").find('.main-desc').height();

    $slider.find(".main_image .main-desc").animate({
      opacity: 0,
      marginBottom: -imgDescHeight
    }, 250, function() {
      $slider.find(".main_image .main-desc").html(imgDesc).animate({
        opacity: 0.85,
        marginBottom: "0"
      }, 250);
      $slider.find(".main_image img").attr({
        src: imgSrc,
        alt: imgAlt,
        name: imgAlt
      });
    });
  }

  slide("slider1");
  slide("slider2");
});
html {
  font-family: arial;
  font-size: 1em;
}

.imgs_holder {
  width: 100%;
}

.image {
  width: auto;
  height: 150px;
  display: inline-block;
  margin-right: 20px;
  line-height: 150px;
  padding: auto;
  margin: auto;
  background-color: black;
}

.image.active {
  background-color: #efefef
}

.image a>img {
  width: 200px;
  height: auto;
  margin: auto;
  padding: 0 10px;
  vertical-align: middle;
}

.main-desc {
  position: absolute;
  color: black;
  z-index: 100;
  padding: 10px;
  margin: 0;
  top: 65%;
  bottom: 0;
  width: 873px;
  background-color: black;
  opacity: .7;
  color: white;
  display: none;
}

.main_image {
  position: relative;
  width: 893px;
}

.main_image img {
  width: 893px;
}

.desc {
  display: none;
}

.slideshow {
  margin-bottom: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="slideshow" id="slider1">
  <div class="main_image">
    <img src="images/banner01.jpg" alt="Slika 1" name="Slika 1">
    <div class="main-desc">
      <h3>Subject 1</h3>
      <p>Aje, sem desc.</p>
    </div>
  </div>
  <div class="imgs_holder">
    <div class="image active">
      <a href="#"><img src="images/banner01.jpg" alt="Slika 1" name="Slika 1"></a>
      <div class="desc">
        <h3>Subject 1</h3>
        <p>Aje, sem desc.</p>
      </div>
    </div>
    <div class="image">
      <a href="#"><img src="images/banner02.jpg" alt="Slika 2" name="Slika 2"></a>
      <div class="desc">
        <h3>Subject 2</h3>
        <p>Aje, sem desc.</p>
      </div>
    </div>
    <div class="image">
      <a href="#"><img src="images/banner03.jpg" alt="Slika 3" name="Slika 3"></a>
      <div class="desc">
        <h3>Subject 3</h3>
        <p>Aje, sem desc.</p>
      </div>
    </div>
    <div class="image">
      <a href="#"><img src="images/banner04.jpg" alt="Slika 4" name="Slika 4"></a>
      <div class="desc">
        <h3>Subject 4</h3>
        <p>Aje, sem desc.</p>
      </div>
    </div>
  </div>
</div>

<div class="slideshow" id="slider2">
  <div class="main_image">
    <img src="images/banner01.jpg" alt="slika 1" name="slika 1">
    <div class="main-desc">
      <h3>Subject</h3>
      <p>Aje, sem desc.</p>
    </div>
  </div>
  <div class="imgs_holder">
    <div class="image">
      <a href="#"><img src="images/banner01.jpg" alt="Slika 1" name="Slika 1"></a>
      <div class="desc">
        <h3>Subject</h3>
        <p>Aje, sem desc.</p>
      </div>
    </div>
    <div class="image">
      <a href="#"><img src="images/banner02.jpg" alt="Slika 2" name="Slika 2"></a>
      <div class="desc">
        <h3>Subject</h3>
        <p>Aje, sem desc.</p>
      </div>
    </div>
    <div class="image">
      <a href="#"><img src="images/banner03.jpg" alt="Slika 3" name="Slika 3"></a>
      <div class="desc">
        <h3>Subject</h3>
        <p>Aje, sem desc.</p>
      </div>
    </div>
    <div class="image">
      <a href="#"><img src="images/banner04.jpg" alt="Slika 4" name="Slika 4"></a>
      <div class="desc">
        <h3>Subject</h3>
        <p>Aje, sem desc.</p>
      </div>
    </div>
  </div>
</div>

相关问题
最新问题