以下代码用于将div左右悬停时自动水平滚动带有溢出的div。
当我在从右到左的RTL(阿拉伯语)网页上应用此代码时,该代码不起作用,我们能否确定如何使其起作用?
我还需要学习如何使其滚动速度变慢。
HTML
<div class="carousel-frame" id="carousel1">
<ul>
<li class="carousel-item">
<img src="http://placehold.it/200x150" />
</li>
<li class="carousel-item">
<img src="http://placehold.it/200x150" />
</li>
<li class="carousel-item">
<img src="http://placehold.it/200x150" />
</li>
<li class="carousel-item">
<img src="http://placehold.it/200x150" />
</li>
<li class="carousel-item">
<img src="http://placehold.it/200x150" />
</li>
<li class="carousel-item">
<img src="http://placehold.it/200x150" />
</li>
<li class="carousel-item">
<img src="http://placehold.it/200x150" />
</li>
<li class="carousel-item">
<img src="http://placehold.it/200x150" />
</li>
<li class="carousel-item">
<img src="http://placehold.it/200x150" />
</li>
<li class="carousel-item">
<img src="http://placehold.it/200x150" />
</li>
<li class="carousel-item">
<img src="http://placehold.it/200x150" />
</li>
<li class="carousel-item">
<img src="http://placehold.it/200x150" />
</li>
<li class="carousel-item">
<img src="http://placehold.it/200x150" />
</li>
</ul>
</div>
CSS
.carousel-frame {
width: 100%;
margin-bottom: 0.5em;
padding-bottom: 1em;
position: relative;
overflow-x: scroll;
white-space: nowrap;
}
.carousel-frame ul {
margin: 0;
padding: 0;
height: 100%;
list-style: none;
}
.carousel-frame li.carousel-item {
cursor: pointer;
display: inline-block;
margin: 0 5px 0 0;
padding: 0;
}
JQUERY
$.fn.make_carousel = function() {
var speed = 0;
var scroll = 0;
var container = $(this);
var container_w = container.width();
var max_scroll = container[0].scrollWidth - container.outerWidth();
var prev_frame = new Date().getTime();
container.on('mousemove', function(e) {
var mouse_x = e.pageX - container.offset().left;
var mouseperc = 100 * mouse_x / container_w;
speed = mouseperc - 50;
}).on ( 'mouseleave', function() {
speed = 0;
});
function updatescroll() {
var cur_frame = new Date().getTime();
var time_elapsed = cur_frame - prev_frame;
prev_frame = cur_frame;
if (speed !== 0) {
scroll += speed * time_elapsed / 50;
if (scroll < 0) scroll = 0;
if (scroll > max_scroll) scroll = max_scroll;
container.scrollLeft(scroll);
}
window.requestAnimationFrame(updatescroll);
}
window.requestAnimationFrame(updatescroll);
}
$("#carousel1").make_carousel();
$("#carousel2").make_carousel();
示例: