0

我无法让滑块在不进入多个实例的情况下进行更改。我希望能够单击一个链接，以便在需要时从特定幻灯片加载滑块。我已经尝试了一切。提前致谢 ：）

JS 小提琴：http: //jsfiddle.net/fVdzA/

    function Slider(interval, slide)
 {

     //Clear Qeue
     //Initialize Variables
        var slides;
        var titles;
        var desc;
        var amount;
        var amounttitle;
        var i;

     //Count Elements
        slides = $('#slider').children();
        titles = $('#slider li').children('.title');
        desc = $('#slider li').children('.desc');
        amount = slides.length;
        amounttitle = titles.length;
        amountdesc = desc.length;
        i=0;

        //hide first slide properly
        $(slides[0]).hide();

    //Choose Function
    if(slide==null){
        //Automatic Start from 0
    timer = setTimeout(automatic(0),4000);      
    }else{
        //Choose Slide to start at
        automatic(slide);
    }

    function automatic(i) {
            $(slides[i]).hide();
            $(titles[i]).hide();
            $(desc[i]).hide();
            $(slides[i]).fadeIn(1000, function(){
                $(titles[i]).fadeIn(1000, function(){
                    $(desc[i]).fadeIn(1000, function(){
                        $(slides[i]).delay(2000).fadeOut(1000, function(){
                                $(titles[i]).hide();
                                $(desc[i]).hide();
                                i++; if (i >= amount){ i = 0;}
                                timer = setTimeout(automatic(i), 4000);
                            });
                        });
                    });
                });

     }

 }

    //Load navigation
    slides = $('#slider').children();
    $(slides).each(function(index) {
             $("#slideControl").append(' <a href="#" class="button" ref="'+index+'">'+index+'</a> ');
        });

$('.button').live("click", function() {
        //clearTimeout(timer);  
        $('#slider li').hide();
         Slider(4000, null).clearTimeout(timer);
}); 

 Slider(4000, null).clearTimeout(timer);


    <div id="slide">
      <ul id="slider">
 <li><img src="images/slide/slide1/slide.png" width="870" height="330" alt="slide1" class="round" /><span class="title"><img src="images/slide/slide1/title.png" alt="title"  class="leftMidTitle" /></span><span class="desc"><img src="images/slide/slide1/desc.png" alt="desc" class="leftMidDesc"  /></span></li>
     <li><img src="images/slide/sample2.png" width="870" height="330" alt="sample" class="round" /><span class="title">karl text</span><span class="desc">Crazy Text</span></li>
     <li><img src="images/slide/sample3.png" width="870" height="330" alt="sample" class="round" /><span class="title">vgblv dfvd</span><span class="desc">Crazy Text</span></li>
      </ul>
      <div id="slideControl"></div>
      </div>
    </div>
4

1 回答 1

1

我使用jQuery Cycle Plugin修复了它。更清洁，非常灵活！

$(document).ready(function() {

    function fadeTextIn() {
        $(this).find('.title').stop().fadeIn(1000, function() {
            $('.desc').stop().fadeIn(1000);
        });
    }

    function fadeTextOut() {
        $('.title').stop().hide();
        $('.desc').stop().hide();
    }

    $('#slider').after('<div id="nav" class="inactive">').cycle({
        fx: 'fade',
        speed: 1000,
        timeout: 5000,
        pause: 1,
        pager: '#nav',
        onPageEvent: fadeTextOut,
        before: fadeTextOut,
        after: fadeTextIn
    });

    $('#nav a.inactive').click(function() {
        fadeTextOut();
    });

});
于 2012-07-14T01:48:10.637 回答