Question

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

http://www.wistar.org/

我自己制作了一个，但是您可以看到的下一个/上一个图像大约是整个1/4，这让我感到疑惑。我所完成的只是下一个/上一个0循环时间，但下一个/上一个图像的淡入淡出让我感到疑惑。

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

提前致谢。

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

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

Answer 1

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

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

的 DEMO 的

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来拍摄最后一张图片，将它放在第一张图片的前面，然后逻辑地：移动整个SPANs容器的.css()（#gallery ）-960px再次显示第一张图片。

的 DEMO WITH 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 }); } } }); });

的 DEMO WITH AUTOSLIDE AND PAUSE ON HOVER 的

要使其自动滑行，您需要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(); });

FINAL DEMO EXAMPLE

Answer 2

试试这个：

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;

Answer 3

如果你谈论图像，它会交换B / W图像和彩色图像淡出它们

示例： 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和图像之间滑动。

他们是如何让滑块像这样工作的

3 个答案: