Question

我试图找到一个非常简单的javascript滑块。一个是最低限度，没有花哨的jquery，或其他涉及的库。最简单的滑块。尽可能少的代码。

感谢您的关注！

@ Roger Walsh：

HTML代码下方： .js和.css与您发送给我的教程中的示例相同。我想我必须在正文部分添加更多信息，但我不明白到底是什么。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<html>
<head>

<title> Slider </title> 

<script type="JavaScript" src="slider.js"></script>
<link href="default.css" rel="stylesheet" type="text/css" />

</head>

<body>

<html>
<head>

<title> </title> 
<script type="text/javascript">
</script>

</head>

<body>

<div class="carpe_slider_display_holder">
<!-- Default value: 0 -->
<input class="carpe_slider_display" id="display1" type="text" value="100" />
</div>
<div class="carpe_horizontal_slider_track">

    <div class="carpe_slider_slit"> </div>
    <div class="carpe_slider" id="my_id" orientation="horizontal" distance="100" display="my_id" style="left: 100px;"> </div>
</div>

<!--<div class="carpe_horizontal_slider_track">
    <div class="carpe_slider_slit"> </div>
    <div class="carpe_slider"
        id="my_id"
        orientation="horizontal"
        distance="100"
        display="my_id"
        style="left: 100px;"> </div>
</div>
-->
</body>
</html>

Answer 1

如果您想在更短的时间内编写代码，我建议您使用现有的库。

查看dhtmlx Slider

Simplest Slider Example

Answer 2

Carpe Slider现在的版本为3.0，此处有文档：http://carpe.ambiprospect.com/slider/documentation.htm和测试页：http://carpe.ambiprospect.com/slider/test.htm

js代码压缩为4 kB。

Answer 3

试试这个：

http://carpe.ambiprospect.com/slider/

Answer 4

在这里：jsfiddle

<强> JS：

//init
slides = document.getElementsByClassName("slide");
containerWidth = 500;

Array.prototype.forEach.call(slides, function (el, i) {//set the initial position of each slide
  el.style.left = (i * containerWidth) + "px";
});

window.moveSlides = function (direction) {
  run = true;
  tracker = containerWidth; //500 in this example. We make a separate variable so we can decrement it

  if (((direction == "next" && (parseInt(slides[0].style.left) <= (0 - (containerWidth * (slides.length - 1)))))) //compare against 2nd-to-last slide's index, otherwise it'll go 1 slide too far
     || (direction == "prev" && (parseInt(slides[0].style.left) >= 0))) { run = false; }

  if (run) {
    var slideInterval = setInterval(function () {
      moveRate = 4; //set the speed here (use numbers that the container's width can be divided by without a remainder)
        Array.prototype.forEach.call(slides, function (el, i) {
          if (tracker <= 0) {
             clearInterval(slideInterval)
          } else {
            el.style.left = (direction == "next") ? (parseInt(el.style.left) - moveRate) + "px" : (parseInt(el.style.left) + moveRate) + "px";
          }
        });
        tracker -= moveRate;
    }, 1);
  }
}

<强> HTML：

<div id="slider-container">
  <div id="slider-mask">
     <div class="slide one">slide 1</div>
     <div class="slide two">slide 2</div>
     <div class="slide three">slide 3</div>
     <div id="buttons">
       <a href="javascript:moveSlides('prev');" id="prev">&lt;Previous</a>
       | 
       <a href="javascript:moveSlides('next');" id="next">Next&gt;</a>
     </div>
  </div>
</div>

<强> CSS：

#slider-container {
  width: 999999px;
  height: 300px; //set to the height you want
  position:relative;
}
#slider-mask {
  width:500px;  //set slide width. must be equal to slide width
  height:300px;
  overflow:hidden;
  position:relative;
}
.slide {
  width:500px;
  height:100%;
  top:0;
  position:absolute;
}
#buttons {
  position:absolute;
  bottom:5px;
  left:50%;
  width: 150px;
  height:30px;
  margin-left:-75px;
}

简单的Javascript滑块

4 个答案: