Question

我想在我的小幻灯片中顺利过渡。我试图插入一个fadeIn（），但它不起作用。我希望有人能解决我的问题。

$('#pause').hide();
$('#play').click( function(){
   t = setInterval( function(){
      $('#next').trigger('click'), 2000
   }, 4000 );
});

画廊看起来像这样

function loadSlide(index){
    $('#gallery li').hide().eq(index).show();
}

$('#gallery').data('index',0).find('li').hide();
loadSlide(0);

$('#next, #navnext').on('click',function(e){
   var index = $('#gallery').data('index'),
      numSlides = $('#gallery li').length;
   index = (index + 1) % numSlides;   
   loadSlide(index);
   $('#gallery').data('index',index);
   e.preventDefault();            
});

$('#previous, #navprev').on('click',function(e){
   var index = $('#gallery').data('index'),
       numSlides = $('#gallery li').length;
   index = (index + numSlides - 1) % numSlides;
   loadSlide(index);
   $('#gallery').data('index',index);
   e.preventDefault();
});

HTML

<body>
<div id="nav_img">
    <a href="#" id="previous" style="cursor: url('../prev.png'); z-index: 800;" ><img src="trans.png"/></a> 
    <a href="#" id="next" style="cursor: url('../next.png'); z-index: 800;"><img src="trans.png"/></a> 
</div>
<div id="control" style="z-index: 998;">
        <div id="navnext"><img src="next.png"/> </div>
        <div id="navprev"><img src="prev.png"/> </div>
        <div id="play"><img src="play.png"/></div>
        <div id="pause"><img src="pause.png"/></div>
    </div>

<div id="Logo">
        <a href="index_test.html"><b>lorem</b> ipsum</a>
    </div>

    <div class="fade" id="Navigation">
        <ul id="sliding-navigation" style="list-style-type:none;">  
            <li class="sliding-element"><a href="women.html">Women</a></li>  
            <li class="sliding-element"><a href="men.html">Men</a></li>  
            <li class="sliding-element"><a href="beauty.html">Beauty</a></li>  
            <li class="sliding-element"><a href="advertising.html">Advertising</a></li>  
            <li class="sliding-element"><a href="biography.html">Biography</a></li>  
             <li class="sliding-element" id="contactbutton"><a href="#">Contact</a></li>
    </ul> 
</div>
<ul id="gallery">
       <li> <img style="margin-left:-25%;" src="images/a1.jpg" title="Title #0"/> </li>
       <li> <img src="images/a2.jpg"/> </li>
       <li> <img src="images/a3.jpg" title="Title #3"/> </li>
       <li> <img src="images/a4.jpg" title="Title #4"/> </li>
       <li> <img src="images/a5.jpg" title="Title #5"/> </li>
   </ul>

提前感谢！

Answer 1

要正确添加到li元素的转换，您必须像我一样使用position:absolute;将它们相互叠加。

demo jsBin

的jQuery

$('#pause').hide();

var numSlides = $('#gallery li').length;
var interv;

$('#play').click( function(){
    $(this).hide();
    $('#pause').show();
    interv = setInterval( function(){
         $('#next').trigger('click'); 
    }, 2000 );
});

// you forgot this?
$('#pause').click( function(){
     $('#pause').hide();
     $('#play').show();
     clearInterval(interv);
});

function loadSlide(index){
    $('#gallery li:not(:eq('+index+'))').fadeTo(400,0); // SMOOTH TRANSITION
    $('#gallery li').eq(index).fadeTo(400,1);           // SMOOTH TRANSITION
}

$('#gallery').data('index',0).find('li').hide();
loadSlide(0);

$('#next, #navnext').on('click',function(e){
   var index = $('#gallery').data('index');    
   index = (index + 1) % numSlides;   
   loadSlide(index);
   $('#gallery').data('index',index);
   e.preventDefault();            
});

$('#previous, #navprev').on('click',function(e){
   var index = $('#gallery').data('index');
   index = (index + numSlides - 1) % numSlides;
   loadSlide(index);
   $('#gallery').data('index',index);
   e.preventDefault();
});

我添加了过渡并修复了您的代码。

jQuery幻灯片使用setInterval和触发器平滑过渡

1 个答案:

demo jsBin