我想在我的小幻灯片中有一个平滑的过渡。我试图插入一个淡入淡出(),但它不起作用。我希望有人能解决我的问题。
$('#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>
</p>
提前致谢!