1
私は現在、垂直スクロールバーを作成するに取り組んでいますし、これまで持っているが、このjQueryの垂直コンテンツスクロール
<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のようにあるように私のHTMLに見える機能の一部
に捕まってしまっています
*{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の終わりを制限する方法がありません。この部門の下部
すべてのアイデアは感謝しています
乾杯