簡單的Javascript滑塊
[英]Simple Javascript Slider
問題描述
我試圖找到一個非常簡單的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>
4 個解決方案
解決方案1
1 2014-01-31 04:43:15
Carpe Slider現在的版本是3.0，這里有文檔： http ： //carpe.ambiprospect.com/slider/documentation.htm和測試頁面： http ： //carpe.ambiprospect.com/slider/test.htm
js代碼壓縮為4 kB。
解決方案2
1 2010-09-09 09:20:26
解決方案3
0 2014-03-08 11:44:33
你去吧： 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"><Previous</a>
|
<a href="javascript:moveSlides('next');" id="next">Next></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;
}
解決方案4
0 2010-09-09 09:05:31
一個簡單的自定義JavaScript滑塊？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.