将 'Next' 和 'Previous' 单击叠加层添加到水平滚动图库。和一般的画廊推荐

Question

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

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

（对不起link中的space，只能post 2 links）

#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

我在此处找到了一个非常相似的 post，其中包含类似的查询：Add Previous/Next Buttons to Horizontal Content Scroller Targeting DIVS which resulted in this fiddle。主要区别在于，我不想要 prev/next 按钮。我想要它，所以屏幕的两半对应于 prev/next 按钮，就像我 link 编辑的示例一样。

如果这听起来令人困惑或啰嗦，我们深表歉意，但提前感谢任何可以帮助我或 link 我解决问题的人。或者，如果有人对生产我已经拥有的东西的更好方法有一些建议，将不胜感激。

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/

注
上面的代码适用于 fullscreen-width 图库，并且没有考虑 dom.ready 之后浏览器的大小调整。为了完成，应该添加 window.load 和 after-resize 事件

==========================编辑 2 滚动到中心 ==== ==============

滚动到 next/prev 图片的中心：首先，更改 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/

将 'Next' 和 'Previous' 单击叠加层添加到水平滚动图库。和一般的画廊推荐

Adding 'Next' and 'Previous' click overlays to horizontal scrolling gallery. And general gallery recommendations

html

css

jquery

scroll

gallery