1

这个网站是如何让滑块像这样工作的？

http://www.wistar.org/

我自己制作了一个，但你可以看到大约 1/4 的下一张/上一张图像让我想知道。我所完成的只是以 0 周期时间只到下一个/上一个，但是下一个/上一个图像的褪色让我感到疑惑。

有人对如何处理这种方法有建议吗？

提前致谢。

Jsfiddle 不是原始的，因为我无法发布它，因为它是 wordpress php（快速制作）：

jsfiddle.net/RkgrG/40/（没有足够的代表链接抱歉）

4

3 回答 3

0

尝试这个：

pastebin.com/ga3CGtH4

<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/20130801/jquery.cycle2.min.js"></script>
        <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/20130409/jquery.cycle2.carousel.min.js"></script>
    </head>
    <body>
        <style>
            #home-rotator-container { width:100%; overflow:hidden; position:relative; }
            #home-rotator .cycle-slideshow { width:3300px; }
            #home-rotator .cycle-slideshow img  { width: 1100px; height: 400px; }
            #home-rotator .cycle-slideshow {
                position:absolute;
                top:0;
                left:0;
            }
        </style>

        <div id="home-rotator-container">
            <div id="home-rotator">    
                <div class="cycle-slideshow" data-cycle-fx="carousel" data-cycle-speed="800" data-cycle-carousel-visible="3">
                    <img src="http://jquery.malsup.com/cycle2/images/beach1.jpg">
                    <img src="http://jquery.malsup.com/cycle2/images/beach2.jpg">
                    <img src="http://jquery.malsup.com/cycle2/images/beach3.jpg">
                    <img src="http://jquery.malsup.com/cycle2/images/beach4.jpg">
                    <img src="http://jquery.malsup.com/cycle2/images/beach5.jpg">
                    <img src="http://jquery.malsup.com/cycle2/images/beach6.jpg">  
                </div>            
            </div><!-- /#home-rotator -->
        </div><!-- /#home-rotator-container -->
        <script type="text/javascript">
            // function that determines offset
            function positionRotator()
            {
                var rotator_size = 1100;
                var initial_width = $(window).width();          
                var offset = (rotator_size - ((initial_width - rotator_size) / 2)) * -1;
                $("#home-rotator .cycle-slideshow").css("left",offset);            
            }          

            // do initial positioning
            positionRotator();      

            // re-position if screen is resized
            $(window).resize(function() {
              positionRotator();                      
            });

        </script>

    </body>
</html>

编辑：如果您更改尺寸，请记住也要更改偏移量：

var rotator_size = 1100;
于 2014-01-23T12:41:39.723 回答
0

我将从头开始创建一个，因为我现在正在做的项目需要它

仍在制作 JS 逻辑，但向您展示第一步：

演示

HTML：

<div id="galleryOverflow">  
  <div id="galleryCenter">    
    <div id="gallery">

      <span style="background-image:url(//placehold.it/960x540/ada);">1</span>
      <span style="background-image:url(//placehold.it/960x540/fbi);">2</span>
      <span style="background-image:url(//placehold.it/960x540/fof);">3</span>
      <span style="background-image:url(//placehold.it/960x540/ie5);">4</span>

    </div>    
  </div>

</div>

CSS：

#galleryOverflow{
  position:relative;
  width:100%;
  height:540px;
  overflow:hidden;
  background:#ddd;
}
#galleryCenter{
  position:relative;
  margin:0 auto;
  width:960px;
  background:#eee;
  height:540px;
}
#gallery{
  position:absolute;
  height:540px;
  width:100%;
  top:0;
  left:0;
  white-space:nowrap;
  font-size:0; /* remove right 4px margin */
}
#gallery span{
  font-size:18px; /* reset font */
  vertical-align:top;
  display:inline-block;
  height:540px;
  width:100%;
  background: transparent none no-repeat center center;
  background-size:cover;
}
  • 基础是有一个 100% 宽度的元素，overflow:hidden它可以防止页面显示水平滚动条，
  • 比在那个里面放一个居中的 960px 元素
  • 在那个居中的元素内，你绝对定位一个可以容纳所有 SPAN幻灯片的元素。
  • 要水平放置 SPAN，您需要将其设置为它们的父级，white-space:nowrap;并删除 4px 的边距间隙，字体大小为0
  • 与您的 SPAN 相比，您需要重置字体大小并允许其中的文本设置vertical-align属性。
  • 现在，您的SPAN幻灯片在右侧扩展了 faaar，但即使在页面调整大小时，中间的（当前是第一个）也将始终与页面居中。
  • 现在，您需要使用 JS 获取最后一张图像，将其放在第一个图像的前面，并且在逻辑上：移动.css()整个 SPAN 容器（#gallery）以-960px使第一张图像再次可见。

使用 JS/jQuery 进行演示

$(function(){ // DOM ready

    var $gallery = $('#gallery');
    var $slide   = $("span", $gallery);
    var W = $('#galleryCenter').width(); // 960
    var N = $slide.length; // number of slides     

    // Prepare gallery:
    // Take last slide and set in front of all
    $slide.last().prependTo($gallery); 
    // Now move gallery to show again the first slide
    $gallery.css({left:-W}); 


    $('#prev, #next').click(function(){

      $slide = $("span", $gallery); // recatch all elements

      if( !$gallery.is(':animated') ){ // Prevent clicks if gall is animated

        if(this.id == "next"){

          var $first = $slide.eq( 0 );
          $first.clone().appendTo( $gallery );
          $gallery.animate({ left: '-='+W },800, function(){
            $first.remove(); // we don't need it any more
            // but now we have a 960px gap so:
            $(this).css({left: -W }); // reset to -960
          });

        }else{ // == "prev"

          var $last = $slide.eq( N-1 ); // N-1 is the last one
          $last.clone().prependTo( $gallery );
          // now that we prepended the lasts element the gallery jumped 
          // to +960 cause of that insertion, let's reset it:
          $gallery.css({ left: -W*2 });
          // and let's animate
          $gallery.animate({left:'+='+W},800, function(){
            $last.remove(); // we don't need it any more
          });

        }
      }

    });

});

带有自动滑行和悬停暂停的演示

为了让它自动滑动，你需要一个setInverval所以我们需要一个新的var

var intv;

在“prev next clicks function”下面这段代码：

  // //////////////////////
  // LOOP AUTOMATICALLY
  function auto(){
    intv = setInterval(function(){
      $('#next').click(); // Do a "next" click
    }, 3200 );// every 3200ms
  }
  auto(); // start loop

要在mouseenter上暂停循环，请添加：

  $('#galleryOverflow').hover(function(e){
    return e.type=="mouseenter" ? clearinterval(intv) : auto();
  });

最终演示示例

于 2014-01-23T12:17:02.683 回答
-1

如果您谈论图像，它会交换黑白图像和彩色图像，使其淡出

示例： http: //www.wistar.org/sites/default/files/imagecache/desat/home/masthead_images/cell.jpg http://www.wistar.org/sites/default/files/home/masthead_images/cell .jpg

对于滑动内容的框：它同时在 div 和图像之间滑动。

于 2014-01-23T11:16:16.097 回答