javascript - 悬停在窗口右侧，内容向左移动

Question

我的所有图片都排成一排，比大多数屏幕都大。

所以就像你在下面的代码中看到的那样，感谢 this post，我使用 jQuery 将图像循环播放。 .

但我想做两件事，首先调整滚动速度，但如果我尝试更改 jQuery 中的某些内容，它就不再正常工作了。 (我是 jQuery 和 javascript 的菜鸟)我想做的第二件事是，从您将鼠标悬停在页面右侧而不是整个页面的那一刻起，它就开始滚动。

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

我目前的代码是这样的:

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();
});

#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;
}

<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>

Answer 1

我给你一个。

    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

希望对您有所帮助。你也可以尝试用更少的代码来实现它。