当前位置 : 主页 > 网页制作 > JQuery >

基于jquery的HTML内容幻灯片/转换

来源:互联网 收集:自由互联 发布时间:2021-06-15
搜索基于 JQuery的旋转器只能找到原始的旋转器插件和一堆我不想要的照片库.请建议其他旋转器.旋转器应该能够旋转HTML而不仅仅是图像(就像Glimmer工具,它可以创建用于旋转图像的JQuer
搜索基于 JQuery的旋转器只能找到原始的旋转器插件和一堆我不想要的照片库.请建议其他旋转器.旋转器应该能够旋转HTML而不仅仅是图像(就像Glimmer工具,它可以创建用于旋转图像的JQuery / HTML代码). 为什么要使用插件?使用这一个衬垫(为了便于阅读,我将它分成3行)

见demo

你的HTML应该是这样的

HTML

<div class="yourContainer">
 <div>some html</div>
 <div>other html</div>
</div>

JS / jQuery

$(function(){
    $('.yourContainer div:gt(0)').hide();
    setInterval(function(){$('.yourContainer :first-child').fadeOut().next().fadeIn().end().appendTo('.yourContainer');}, 3000);
});

CSS(可选=使转换更顺畅)

.yourContainer{ position:relative;}
.yourContainer div{ position:absolute; hight:300px; width:300px; background:red; }
网友评论