图像旋转器功能从第二个图像开始,而不是第一个

时间:2014-04-08 00:31:19

标签: jquery image gallery thumbnails rotator

我用简单的图像旋转器和缩略图设置了一个小提琴。但是,当页面加载时,脚本以第二个图像开始。

SO上提到的类似帖子将active类移动到最后一个图像和缩略图。这不是一个好的解决方案。

我需要修改什么才能从第一张图片和缩略图开始?

这是我的小提琴:http://jsfiddle.net/yCXka/4/

和代码:

HTML

<div id="bigImage">
    <img src="http://www.placehold.it/500x200&text=500" width="500" height="200" id="image1"  class="active"/>
    <img src="http://www.placehold.it/400x175&text=400" width="400" height="175" id="image2" />
    <img src="http://www.placehold.it/300x150&text=300" width="300" height="150" id="image3" />
    <img src="http://www.placehold.it/200x125&text=200" width="200" height="125" id="image4" />
</div>
<ul id="thumbnails">
    <li class="activeThumbnail"><img src="http://www.placehold.it/140x100&text=500" width="140" height="100" /></li>
    <li><img src="http://www.placehold.it/140x100&text=400" width="140" height="100" /></li>
    <li><img src="http://www.placehold.it/140x100&text=300" width="140" height="100" /></li>
    <li><img src="http://www.placehold.it/140x100&text=200" width="140" height="100" /></li>
</ul>

CSS:

* {
    margin:0;
    padding:0;
}

#bigImage {
    width:500px;
    height:200px;
    margin-bottom:30px;
    overflow:hidden;
}

#bigImage img {
    display:none;
}

#bigImage .active {
    display:inline;
}

#thumbnails {
    clear:both;
    width:610px;
    height:100px;
}

#thumbnails li {
    float:left;
    width:140px;
    height:100px;
    margin-right:10px;
    list-style-type:none;
}

.activeThumbnail {
    border:5px solid lime;
}

JS:

$(document).ready(function(){
    imageRotator();

    // inspiration:
    //http://aarontennyson.com/tutorials/demos/slide_show_fade/
});

function imageRotator() {

    var active = $('#bigImage .active'),
        thumbnails = $('#thumbnails li'),
        activeThumbnail = $('#thumbnails .activeThumbnail'),
        activeID = active.prop('id'),
        next = active.next().length ? active.next() : active.parent().children(':first'),
        nextThumb = activeThumbnail.next().length ? activeThumbnail.next() : activeThumbnail.parent().children(':first');

    active.fadeOut(800, function() {

        thumbnails.removeClass('activeThumbnail');
        nextThumb.addClass('activeThumbnail');

        next.fadeIn(800).addClass('active');
    }).removeClass('active');

    setTimeout(imageRotator, 5000);
}

谢谢!

1 个答案:

答案 0 :(得分:1)

尝试

$(document).ready(function(){
    imageRotator();

    // inspiration:
    //http://aarontennyson.com/tutorials/demos/slide_show_fade/
});

function imageRotator() {

    var active = $('#bigImage .active'),
        thumbnails = $('#thumbnails li'),
        activeThumbnail = $('#thumbnails .activeThumbnail'),
        activeID = active.prop('id'),
        next = active.next().length ? active.next() : active.parent().children(':first'),
        nextThumb = activeThumbnail.next().length ? activeThumbnail.next() : activeThumbnail.parent().children(':first');
    // `.show()` `$(active)`, `0` `duration`
    // `.delay()` `1200` `duration`,
    // for page load time, adjustable
    // continue to `.fadeOut()` method
    $(active).show(0).delay(1200).fadeOut(800, function() {

        thumbnails.removeClass('activeThumbnail');
        nextThumb.addClass('activeThumbnail');

        next.fadeIn(800).addClass('active');
    }).removeClass('active');

    setTimeout(imageRotator, 5000);
}

jsfiddle http://jsfiddle.net/guest271314/n868c/

修改

  

这确实有帮助!不是完美但完美无缺。关于什么   设置曾经为真的标志,然后旋转器启动?有办法吗?   去做这个? - JsusSalv

$(document).ready(function() {
    // `flag` = `started`, default `false`,
    // `.on()` `click` of `:first` `#bigImage`, 
    // or `:first` `#thumbnails` (`selectors`, `event`, adjustable)
    // `img`, `flag` set to `true`,
    // if `flag` === `true`,
    // call (start) `imageRotator()`
    var started = false;
    $("#bigImage img:first, #thumbnails li img:first")
    .on("click", function(e) {
    e.preventDefault();
        started = true;
        if ( started === true ) {
           imageRotator(); 
           started = false;
           console.log(started);
        };
    });

    // imageRotator();

    // inspiration:
    //http://aarontennyson.com/tutorials/demos/slide_show_fade/
});

jsfiddle:上面的链接,已更新,包括flagevent