添加“下一个”和“上一个”点击覆盖到水平滚动画廊。和一般画廊推荐

Question

我目前正在为我的网站构建一个简单的水平滚动画廊，其中包含（接近）全屏图像。目前它只是使用 html 和 css。

这是一个示例构建： http://blackecho.co.uk/test-scroll/scroll-gallery.html

（对不起，链接中的空间，只能发布2个链接）

#scroll_container{
	 margin:0px;
	 width:100%;
	 position:fixed;
	 top:0px;
	 left:0;
	 bottom:50px;
	 white-space:nowrap;
	 overflow-x:auto;
	 overflow-y:hidden;
}

#scroll_images{
	height:100%; 
	overflow:none;
	white-space:nowrap;

}

.pic{
	height:98%;
	padding:0px;
	margin:0px;
}

<div class="wrapper">

    <div id="scroll_container" >
        <div id="scroll_images">
        	<img src="../assets/a.jpg" class="pic">
            <img src="../assets/d.jpg" class="pic">
            <img src="../assets/e.jpg" class="pic">
        	<img src="../assets/10.jpg" class="pic">
            <img src="../assets/9.jpg" class="pic">
            <img src="../assets/1.jpg" class="pic">
            <img src="../assets/0.jpg" class="pic">
            <img src="../assets/2.jpg" class="pic">
            <img src="../assets/3.jpg" class="pic">
            <img src="../assets/4.jpg" class="pic">
                        
        </div>
    
    </div>
    
 
 </div> 

我希望完成的内容在视觉上与我已有的内容相同，但增加了能够单击与当前屏幕上的内容相关的下一张和上一张图像的功能。
一个完美的例子是这样的：http://format.com/themes#panorama

我在这里找到了一个非常相似的帖子，其中包含一个类似的查询：Add Previous/Next Buttons to Horizontal Content Scroller Targeting DIVS，这导致了这个fiddle。主要区别是，我不想要上一个/下一个按钮。我想要它，所以屏幕的两半对应于上一个/下一个按钮，就像我链接到的示例一样。

抱歉，如果这听起来令人困惑或冗长，但提前感谢任何可以帮助我或将我链接到一些解决方案的人。或者，如果有人对更好的方法来生产我已经拥有的东西有一些建议，将不胜感激。

Answer 1

您可以使用 jQuery 侦听器轻松检测鼠标位置。 这样做：

$(document).ready(function() {

  $(document).mousemove(function(e) {
    var w = $(window).width();
    if ((e.pageX) <= (w/2)) {
          console.log("left");
          // code for changing the mouse cursor
          // ....
          // code for calling prev/next slide
          $(document).on("click", function(){
              // slide.next/prev
          });  
      } 
      else {
          console.log("right");
          // code for changing the mouse cursor
          // ....
          // code for calling prev/next slide
          $(document).on("click", function(){
              // slide.next/prev
          });
      }
    });

});

改变光标的代码： How to set a cursor image via jQuery?

=================================编辑 ======= =====================

我上面发布的代码可以作为一般用途使用，但不能与图库滑块顺利运行。

我对画廊的代码进行了快速重构以使其正常工作。 （为了清楚起见，我当然删掉了一些东西）。

$(document).ready(function(){
    // cache here reusable elements
    var container = $("#sg-scroll"),
        child = $(".sg-pic_wrap"),
        current;  

    // CURRENT ELEMENT CHECK
    function currentElem () {
        // .each() instead of for(i = 0; i < var;i++)
        child.each(function(){ 

            // these variables must  be updated each time
            // we launch the function, so we cache them inside 
            var x = $(this).offset().left, 
                w = $(this).width();

            if (x <= 0 && x < w ) {
                current = $(this);
            }
        })
    }

    // MOVE TO ELEM
    function scrollTo (elem) {
        container.scrollLeft(elem);
    }


    // CLICK
    container.on("click", function(e){
        var _w = $(window).width();
        if ((e.pageX) <= (_w/2)) { // LEFT
            // we only need to check the current element each time we click, not on scroll
            // doing this will result in faster js
            currentElem(); // 
                if (current.prev().length > 0) { // otherwise we get undefined error
                    scrollTo( parseInt((container.scrollLeft()) + (current.prev().offset().left) + 5) );
                }
        }
        else { // RIGHT
                currentElem();
                scrollTo( parseInt((container.scrollLeft()) + (current.next().offset().left) + 5) );
        }
    });


    // CURSOR ...
    container.on("mousemove", function(e){
        var _w = $(window).width();
        if ((e.pageX) <= (_w/2)) { // LEFT
            //change cursor here
        }
        else { // RIGHT
            // or here
        }
    });



});//document.ready

这里更新了 jsfiddle --> https://jsfiddle.net/naa4qwyk/7/

注意
上面的代码适用于全屏宽度的画廊，并且不考虑在 dom.ready 之后浏览器调整大小。 为了完成，应该添加 window.load 和 after-resize 事件

===========================EDIT 2 滚动到中心 ========= =========

滚动到下一张/上一张图片的中心： 一、改变currentElem函数

function currentElem () {
    child.each(function(){

        var x = $(this).offset().left,
            w = $(this).width(),
            center = (container.width())/2;

        //if (x <= 0 && x < w ) {
          // current = $(this);
        //}
        if (x <= center && (x + w) >= center ) {
            current = $(this);
        }
    })
}

然后，在点击监听器中调用 ScrollTo

var pos1 = ( (container.scrollLeft()) + (current.prev().offset().left)),
    pos2 = ( ((container.width()) - current.prev().width() )/2);
          scrollTo( parseInt( pos1 - pos2) +5 );

这里还有一个 jsfiddle --> https://jsfiddle.net/naa4qwyk/8/