Question

您好，我希望在此网站上实现类似滑块的功能：

http://www.egoargentina.com/en/

滑块应跨越页面的整个宽度。我一直在寻找，我似乎无法找到一个。 Ego Argentina上的那个似乎是定制的，所以我不想使用它以防许可问题再次发生在我身上。

高度需要保持固定，但宽度需要是流动的。图像不需要缩放，因为它们会在边缘淡出。

Answer 1

它看起来像：

HTML：

<div class="header wrapper">
    <h1>Site header</h1>
</div>
<div class="slider">
    <div class="slide">1</div>
    <div class="slide">2</div>
    <div class="slide">3</div>
    <div class="slide">4</div>
</div>
<ul class="slider-nav">
    <li><a href="#" >1</a></li>
    <li><a href="#" >2</a></li>
    <li><a href="#" >3</a></li>
    <li><a href="#" >4</a></li>
</ul>
<div class="clear"></div>
<div class="content">
    <div class="wrapper">
        <p>Some site content will be here</p>
        <p>Some site content will be here</p>
        <p>Some site content will be here</p>
        <p>Some site content will be here</p>
        <p>Some site content will be here</p>
    </div>
</div>
<div class="footer">
    <div class="wrapper">&copy; www.mysite.com</div>
</div>

的CSS：

.clear { clear:both; }
.wrapper { width:980px; margin:0 auto; }
.slider { margin:20px 0; height:100px; position:relative;  }
.slider .slide { display:none; background:red; position:absolute; height:100px; width:100%; }
.header { background:#eee; font-size:18pt; }
.content { }
.footer { background:#eee; text-align:center; }

.slider-nav { margin: 0 auto; width:100px; clear:both; } 
.slider-nav li { float:left; margin:0 5px; }

JS：

$('.slider .slide:eq(0)').addClass('active').fadeIn(200);

$('.slider-nav li a').click(function() {    
    var index = $(this).parent().index('li');
    console.log(index);
    $('.slider .slide.active').removeClass('active').fadeOut(200, function() { 
            $('.slider .slide:eq(' + index + ')').addClass('active').fadeIn(200);
        });

    return false;
});

代码：http://jsfiddle.net/GPuh6/16/

全屏演示：http://jsfiddle.net/GPuh6/16/embedded/result/

P.S。自动旋转仍需要完成。

更新：自动旋转

$('.slider .slide:first').addClass('active').fadeIn(200);

function rotate(index) {
     $('.slider .slide.active').removeClass('active').fadeOut(200, function() { 
         $('.slider .slide:eq(' + index + ')').addClass('active').fadeIn(200);
     });   
}

$('.slider-nav li a').click(function() {    
    var index = $(this).parent().index('li');
    rotate(index);
    return false;
});

setInterval(function() {
    var $next = $('.slider .slide.active').next();

    if ($next.length == 0)
        $next = $('.slider .slide:first');

    rotate($next.index());
}, 2000);

代码：http://jsfiddle.net/GPuh6/23/

全屏演示：http://jsfiddle.net/GPuh6/23/embedded/result/

Answer 2

尝试Nivo Slider-它是一个流行的jQuery插件，我已经多次使用它并发现它很棒（http://nivo.dev7studios.com/demos/）。请在此处查看：http://nivo.dev7studios.com/

宽度和高度设置取决于您在CSS中提供的值。您可以在css文件中提供以下值：

.nivoSlider {
             .........
             width:auto; /* Keeps the width fluid, depending on image width */
             height:246px; /* Change this to your images height */
             ..........
}

请查看此处的使用说明：http://nivo.dev7studios.com/support/jquery-plugin-usage/

Answer 3

你试过Flow Slider吗？我认为创造你想要的效果应该很容易。

Flow Slider Gallery

寻找全宽滑块

3 个答案: