1
我目前正在創建一個垂直滾動條，迄今爲止已經得到但就死在一些功能jQuery的垂直內容滾動
我的HTML看起來像這樣
<div class="outer">
<div class="slider-content clearfix">
<ul>
<li><img src="images/img1.jpg" width="200" height="200" alt="img1"></li>
<li><img src="images/img2.jpg" width="210" height="200" alt="img2"></li>
<li><img src="images/img3.jpg" width="220" height="210" alt="img3"></li>
<li><img src="images/img4.jpg" width="210" height="200" alt="img4"></li>
<li><img src="images/img5.jpg" width="200" height="200" alt="img5"></li>
<li><img src="images/img6.jpg" width="210" height="200" alt="img6"></li>
<li><img src="images/img7.jpg" width="220" height="153" alt="img7"></li>
<li><img src="images/img8.jpg" width="200" height="200" alt="img8"l></li>
<li><img src="images/img9.jpg" width="200" height="200" alt="img9"></li>
<li><img src="images/img10.jpg" width="200" height="200" alt="img10"></li>
<li><img src="images/img11.jpg" width="200" height="200" alt="img11"></li>
<li><img src="images/img12.jpg" width="200" height="200" alt="img12"></li>
<li><img src="images/img13.jpg" width="220" height="210" alt="img13"></li>
</ul>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="script.js"></script>
我的CSS是如下
*{margin:0px;padding:0px;}
li{list-style:none;float:left;height:200px;width:200px;}
.clearfix { overflow: hidden; display: inline-block; }
.clearfix { display: block; }
.outer{margin:45px auto;position:relative;height:500px;width:515px;border:1px solid #333;overflow:hidden;}
.slider-content{position:absolute;top:0px;left:0px;}
.top-hover, .bottom-hover{width:515px;height:50px;background:#ccc;}
.top-hover{position:absolute;top:0px;z-index:500;}
.bottom-hover{position:absolute;bottom:0px;}
，最後我的js
$(function(){
$('.outer').prepend('<div class="top-hover"></div>');
$('.slider-content').after('<div class="bottom-hover"></div>');
//Get height of outer container and slider
var outerHeight = $('div.outer').height();
var contentHeight = $('div.slider-content').height();
// Calculate cut off point of displayed contents
var contentExcess = contentHeight - outerHeight;
//store end point of scroll
var maxTopScroll = 0 - contentExcess
var speed = 45;
var hovered = false;
//Hover over top div
$('div.top-hover').hover(
function(){
//Get the position of the slider content div and store in sliderPositionTop
var sliderPositionTop = $('.slider-content').position().top;
// if slider position is less than 0 animate down
if(sliderPositionTop < 0){
// alert(sliderPositionTop);
$('.slider-content').animate({
top: sliderPositionTop + speed
});
} else {
//If slider is greater than 0 stop animation
if(sliderPositionTop > 0){
$('div.top-hover').stop();
$('.slider-content').css('top', '0px');
}
alert('No movement');
}
},
function(){
return false;
});
//Hover over bottom div
$('div.bottom-hover').hover(
function(){
//Get the position of the slider content div and store in sliderPositionBottom
var sliderPositionBottom = $('.slider-content').position().top;
// If slider is less/equal to 0 then animate slider
if(sliderPositionBottom <= 0){
// alert(sliderPositionBottom);
$('.slider-content').animate({
top: sliderPositionBottom - speed
});
} else {
//If scroll reaches max then stop
alert('No movement');
}
},
function(){
return false;
}
);
});
目前滾輪上下運動，當你將鼠標懸停在頂部和底部的按鈕，但是你必須保持，以獲得移動進出懸停區域的滾動條來移動
我的問題是你怎麼能使它會做滾動內容div連續滾動
此外，目前腳本沒有辦法限制滾動內容div的結束，我似乎無法讓它停止，一旦它得到這個div的底部
任何想法都不勝感激
乾杯