[英]Pure JavaScript horizontal slider
您好我正在制作帶縮略圖的幻燈片。 我的幻燈片有效,但我希望我的縮略圖水平滑動,因為我沒有足夠的空間來顯示它們。 它可以懸停或單擊按鈕prev / next。 我的代碼需要在javascript中只有沒有librairies。
這就是我所處的位置 ,整個代碼都在一個頁面中。
- 編輯
這是我的HTML
<div class="controls">
<a class="previous" href=""><img src="images/fleche_g.jpg" alt=""></a>
<div class="thumbs">
<ul id="thumbs">
</ul>
</div>
<a class="next" href=""><img src="images/fleche_d.jpg" alt=""></a>
</div>
我的CSS
.controls {
width: 658px;
height: 76px;
margin-top: 10px;
}
#thumbs {
display: inline-block;
overflow: hidden;
height: 76px;
position: relative;
z-index: 99;
}
.controls .previous, .controls .next {
float: left;
width: 51px;
height: 76px;
position: relative;
z-index: 999;
}
.controls .previous {
background: transparent url('images/fleche_g.jpg') 0 0 no-repeat;
}
.controls .next {
background: transparent url('images/fleche_d.jpg') 0 0 no-repeat;
}
我試過調用onClick / next按鈕的兩個簡單函數。
// Move thumbs to the left
function left() {
document.getElementById('thumbs').style.left = '-124px';
}
// Move thumbs to the right
function right() {
document.getElementById('thumbs').style.right = '-124px';
}
到目前為止一切都沒有用。 我錯過了什么?
我認為這就是解決問題所需要的。 1個新函數getLeft(); 其余的是現有功能和CSS的適應性。
我認為這應該適用於更多圖像,因此客戶端必須多次按下右鍵才能結束。 您可能還需要額外的計算來限制范圍; 因此所有圖像都不會超出.wrapper-thumbs的右側或左側(請隨意問我)。
注意:也許你想要左右相反(我見過兩者); 只需交換500 < - > -500
或者你只想要那么多的圖像,這樣只需按一下按鈕就可以讓你完全左或右?
CSS:
#slideshow .controls .wrapper-thumbs {
overflow: hidden;
position: relative; /* this means: the upper-left corner of <div class="wrapper-thumbs"> is now the the new base/zero (for style.left) for all the children with position: absolute */
float: left; /* this is so the left- and right-button are kept in place */
margin: 0;
width: 556px;
height: 76px;
}
#thumbs {
display: inline-block;
width: 900px;
height: 76px;
position: absolute; /* So now, the new base of #thumbs is set to the base/zero of <div class="wrapper-thumbs"> */
z-index: 99;
}
腳本:
// function reads style.left; removes 'px'; returns the numeric value.
function getLeft() {
var left = document.getElementById('thumbs').style.left;
return Number(left.substr(0, left.length - 2)); // .substr removes the 'px'
}
// Move thumbs to the left
function left() {
var currentLeft = getLeft();
var newLeft = currentLeft -500;
document.getElementById('thumbs').style.left = newLeft + 'px';
}
// Move thumbs to the right
function right() {
var currentLeft = getLeft();
var newLeft = currentLeft +500;
document.getElementById('thumbs').style.left = newLeft + 'px';
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.