Question

我的所有图像都连续存在，比大多数屏幕都大。

因此，您可以在下面的代码中看到，由于this post，我使用jQuery循环显示图像。

但是我想做两件事，首先调整滚动的速度，但是如果我试图改变jQuery中的某些东西它就不再适用了。（我是jQuery和javascript的真正菜鸟）我想要做的第二件事是，从你将页面的右边部分悬停而不是整个页面开始滚动它。

我正在考虑的另一个解决方案是使用箭头，将鼠标悬停在上方或点击此箭头会将图库移动到右侧/左侧。取决于您选择的箭头。

到目前为止我的代码是这样的：

＆＃13;

var $content = $('#img-gallery'); // Cache your selectors!
$(".img-gallery").hover( function loop() {
    $content.stop().animate({  marginLeft: '-=1600' }, 5000, 'linear', function(){
        $content.css({ marginLeft : "0px" });
        loop();
    });
}, function stop() {
    $content.stop();
});

＆＃13;

#img-gallery {
    height:500px;
    overflow-x:auto;
    overflow-y:hidden;
    white-space: nowrap;
	padding-left: 50px;
	padding-right: 50px;
}
.column {
    display:inline-block;
    white-space: nowrap;
    width:auto;
	margin-top: 175px;
	margin-bottom:175px;
}
.post {
    height:150px;
}
.img-gal {
	height: 150px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="img-gallery" class="default-skin img-gallery" oncontextmenu="return false">
	<a href="images/studio/img1.jpg">
    	<div class="column">
			<div class="post">
				<img src="http://www.hdwallpapersimages.com/wp-content/uploads/2014/01/Winter-Tiger-Wild-Cat-Images.jpg" class="img-gal" oncontextmenu="return false"/>
	    	</div>
		</div>
	</a>
	<a href="images/studio/img2.jpg">
		<div class="column">
			<div class="post">
				<img src="https://www.ucl.ac.uk/news/news-articles/1213/muscle-fibres-heart.jpg" class="img-gal" oncontextmenu="return false"/>
			</div>
		</div>
	</a>
	<a href="images/studio/img3.jpg">
		<div class="column">
			<div class="post">
	    		<img src="http://www.hdwallpapersimages.com/wp-content/uploads/2014/01/Winter-Tiger-Wild-Cat-Images.jpg" class="img-gal" oncontextmenu="return false"/>
			</div>
		</div>
	</a>
	<a href="images/studio/img4.jpg">
		<div class="column">
  		    <div class="post">
				<img src="https://www.ucl.ac.uk/news/news-articles/1213/muscle-fibres-heart.jpg" class="img-gal" oncontextmenu="return false"/>
			</div>
		</div>
	</a>
    <a href="images/studio/img5.jpg">
		<div class="column">
			<div class="post">
				<img src="http://www.hdwallpapersimages.com/wp-content/uploads/2014/01/Winter-Tiger-Wild-Cat-Images.jpg" class="img-gal" oncontextmenu="return false"/>
			</div>
		</div>
	</a>
	<a href="images/studio/img6.jpg">
		<div class="column">
			<div class="post">
				<img src="https://www.ucl.ac.uk/news/news-articles/1213/muscle-fibres-heart.jpg" class="img-gal" oncontextmenu="return false"/>
			</div>
		</div>
	</a>
	<a href="images/studio/img7.jpg">
		<div class="column">
			<div class="post">
				<img src="http://www.hdwallpapersimages.com/wp-content/uploads/2014/01/Winter-Tiger-Wild-Cat-Images.jpg" class="img-gal" oncontextmenu="return false"/>
			</div>
		</div>
	</a>
	<a href="images/studio/img8.jpg">
		<div class="column">
			<div class="post">
				<img src="https://www.ucl.ac.uk/news/news-articles/1213/muscle-fibres-heart.jpg" class="img-gal" oncontextmenu="return false"/>
			</div>
		</div>
	</a>
	<a href="images/studio/img9.jpg">
		<div class="column">
			<div class="post">
				<img src="http://www.hdwallpapersimages.com/wp-content/uploads/2014/01/Winter-Tiger-Wild-Cat-Images.jpg" class="img-gal" oncontextmenu="return false"/>
			</div>
		</div>
	</a>
	<a href="images/studio/img10.jpg">
		<div class="column">
			<div class="post">
				<img src="https://www.ucl.ac.uk/news/news-articles/1213/muscle-fibres-heart.jpg" class="img-gal" oncontextmenu="return false"/>
			</div>
		</div>
	</a>
	<a href="images/studio/img11.jpg">
		<div class="column">
			<div class="post">
				<img src="http://www.hdwallpapersimages.com/wp-content/uploads/2014/01/Winter-Tiger-Wild-Cat-Images.jpg" class="img-gal" oncontextmenu="return false"/>
			</div>
		</div>
	</a>
	<a href="images/studio/img12.jpg">
		<div class="column">
			<div class="post">
				<img src="https://www.ucl.ac.uk/news/news-articles/1213/muscle-fibres-heart.jpg" class="img-gal" oncontextmenu="return false"/>
			</div>
		</div>
	</a>
</div>

＆＃13;

Answer 1

1）滚动速度

对于滚动速度，您需要更改5000对象中的值animate。

此值是您的图库需要从右向左移动一次的时间（以毫秒为单位），因此请减少此数字以更快地移动，将其增加以移动得更慢。

2）将鼠标悬停在右侧

我试图为悬停部分管理一些东西，但不确定是否是你需要的东西：我使用var来存储鼠标的左/左位置，并允许悬停与否：

var $content = $('#img-gallery'); // Cache your selectors!
var allowMove = false;
$(".img-gallery").on("mousemove", function (event) {
    allowMove = (event.pageX > ($(window).width() / 2)) ? true : false;
});
$(".img-gallery").hover(function loop() {
    if (allowMove) {
        $content.stop().animate({
            marginLeft: '-=1600'
        }, 2000, 'linear', function () {
            $content.css({
                marginLeft: "0px"
            });
            loop();
        });
    }
}, function stop() {
    $content.stop();
});

JSFIDDLE

Answer 2

这里有一个我很快。

    var $content = $('#img-gallery'); // Cache your selectors!
$(".buttonLeft").hover( function loop() {
    //speed of animation now is 10000
    $content.stop().animate({  marginLeft: '-=1600' }, 10000 , 'linear', function(){
        $content.css({ marginLeft : "0px" });
        loop();
    });

}, function stop() {
    $content.stop();
});
$(".buttonRight").hover( function loop() {
    //speed of animation now is 10000
    $content.stop().animate({  marginLeft: '+=1600' }, 10000 , 'linear', function(){
        $content.css({ marginLeft : "0px" });
        loop();
    });

}, function stop() {
    $content.stop();
});

已编辑： jsFiddle

我希望这会有所帮助。此外，您可以尝试使用少量代码来实现它。

将鼠标悬停在窗口的右侧，内容会显示在左侧

2 个答案: