效果页面~ html代码如下:
<div class="ad">
<a href="" target="_blank"><img src="01.jpg" /></a>
<a href="" target="_blank"><img src="02.jpg" /></a>
<a href="" target="_blank"><img src="03.jpg" /></a>
</div>
jquery代码如下:
<script>
function swapImages(){
var $active = $('.ad .active');
var $next = ($('.ad .active').next().length > 0) ? $('.ad .active').next() : $('.ad a:first');
$active.fadeOut(function(){
$active.removeClass('active');
$next.fadeIn().addClass('active');
});
}
$(document).ready(function(){
$('.ad a:first').addClass('active');
// Run our swapImages() function every 3secs
setInterval('swapImages()', 3000);
});
</script>
CSS代码如下:
.ad a{
display:none;
}
.ad .active{
display:block;
}
- 原文作者: forecho
- 原文链接: https://blog.forecho.com/yi-ge-hen-jian-dan-de-jquery-tu-pian-zi-dong-qie-huan.html
- 版权声明:本作品采用 署名-非商业性使用 4.0 国际 (CC BY-NC 4.0)进行许可,非商业转载请注明出处(作者,原文链接),商业转载请联系作者获得授权。