代码之家 › 专栏 › 技术社区 › burtonium76

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

slider css html jquery javascript

-3

burtonium76 · 技术社区 · 6 年前

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

我有一个客户需要滑块作为类别链接。到目前为止,我还没有设法让它作为一个页面上的单一滑块工作。有人能检查一下密码并指出我做错了什么吗?我不知道如何组织这个项目。

如果有人能写下要采取的步骤,我不需要代码,如何才能最有效地做到这一点我会非常感激。

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 回复 | 直到 6 年前

Krzysztof Janiszewski 6 年前

你的代码中有很多错误。

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

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

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

其次 ,则将当前元素作为具有类的元素进行检查 active 下一个元素是当前元素之后的下一个元素。但是如果类中没有元素 积极的 就像你在第二个滑杆的情况一样?

你应该考虑一下。

第三 ,当你打电话 setInterval 你应该这样做

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

最后但并非最不重要 尽量减少jQuery调用,因为它耗费时间和内存。不要重复自己的操作——例如,如果对同一个元素mopre执行了多次操作,请将该元素保存到变量中。

例子:

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>