寻找全宽滑块

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/

PS自动旋转仍需要完成.

更新:自动旋转

$('.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/