简单的Javascript滑块

Question

Im trying to find a very very simple javascript slider. 我试图找到一个非常简单的JavaScript滑块。 One that is the bare minimum, no fancy jquery, or other libraries involved. 一个是最低限度，没有花哨的jquery，或其他涉及的库。 The simplest possible slider. 最简单的滑块。 With the minimum amount of code possible. 尽可能少的代码。

Thanks for the attention! 感谢您的关注！

@ Roger Walsh: @Roger Walsh：

Below the HTML code: The .js and the .css are identical to the example in the tutorial you send me. HTML代码下方：.js和.css与您发送给我的教程中的示例相同。 I guess I have to add some more info in the body section, but I dont understand what exactly. 我想我必须在正文部分添加更多信息，但我不明白到底是什么。

<!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

The Carpe Slider is now at version 3.0, and there is documentation here: http://carpe.ambiprospect.com/slider/documentation.htm and a test page: http://carpe.ambiprospect.com/slider/test.htm Carpe Slider现在的版本是3.0，这里有文档： http ： //carpe.ambiprospect.com/slider/documentation.htm和测试页面： http ： //carpe.ambiprospect.com/slider/test.htm

The js code is 4 kB compressed. js代码压缩为4 kB。

Answer 2

If you want to code less and in quick time, I will recommend you to use an existing library for this. 如果您想在更短的时间内编写代码，我建议您使用现有的库。

Look at dhtmlx Slider 看看dhtmlx Slider

Simplest Slider Example 最简单的滑块示例

Answer 3

Here you go: jsfiddle 你去吧： jsfiddle

JS: 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: 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: 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;
}

Answer 4

Try this one: 试试这个：

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

简单的Javascript滑块

问题描述

4 个解决方案

解决方案1
1 2014-01-31 04:43:15

解决方案2
1 2010-09-09 09:20:26

解决方案3
0 2014-03-08 11:44:33

解决方案4
0 2010-09-09 09:05:31

简单的Javascript滑块

问题描述

4 个解决方案

解决方案1 1 2014-01-31 04:43:15

解决方案2 1 2010-09-09 09:20:26

解决方案3 0 2014-03-08 11:44:33

解决方案4 0 2010-09-09 09:05:31

解决方案1
1 2014-01-31 04:43:15

解决方案2
1 2010-09-09 09:20:26

解决方案3
0 2014-03-08 11:44:33

解决方案4
0 2010-09-09 09:05:31