jFlow
发布时间:2014-07-18 编辑:jiaochengji.com
jFlow is a widget to make your content slides. One popular alternative that exists out there is coda-slider. jFlow is super lightweight because it is only 1.9kb minified!!!. $("#myController").jFlow({ slides: "#mySlides", width
jFlow is a widget to make your content slides. One popular alternative that exists out there is coda-slider. jFlow is super lightweight because it is only 1.9kb minified!!!.$("#myController").jFlow({
slides: "#mySlides",
width: "99%",
height: "200px",
duration: 400
});Explanation:#myController: the div where all the slide controller are nested in
slides: the div where all your sliding divs are nested in (note: you can define classes for each div inside slides)
width: can be specified in px or % (required)
height: can be specified in px (required)
duration: time in miliseconds to transition one slide (optional, default is 400)2 divs created by jFlow as containers, you can style them to your liking#jFlowSlide: This is the container where all the slides reside
.jFlowSelected: This is the current activated controllerSpecial div definition.jFlowPrev: Any element with this class will transition to previous slide upon clicking
.jFlowNext: Any element with this class will transition to next slide upon clicking
.jFlowControl: Any element inside the controlling div with this class will map to the corresponding slideExample<script language="javascript">
$(document).ready(function(){
$("#myController").jFlow({
slides: "#mySlides",
width: "99%",
height: "200px",
duration: 400
});
});
</script>
<div id="myController">
<span class="jFlowControl">No 1 </span>
<span class="jFlowControl">No 2 </span>
<span class="jFlowControl">No 3 </span>
<span class="jFlowControl">No 4 </span>
</div>
<div id="mySlides">
<div>First Slide</div>
<div>Second Slide </div>
<div>Third Slide </div>
<div>Fourth Slide </div>
</div>
<span class="jFlowPrev">Prev</span>
<span class="jFlowNext">Next</span>
slides: "#mySlides",
width: "99%",
height: "200px",
duration: 400
});Explanation:#myController: the div where all the slide controller are nested in
slides: the div where all your sliding divs are nested in (note: you can define classes for each div inside slides)
width: can be specified in px or % (required)
height: can be specified in px (required)
duration: time in miliseconds to transition one slide (optional, default is 400)2 divs created by jFlow as containers, you can style them to your liking#jFlowSlide: This is the container where all the slides reside
.jFlowSelected: This is the current activated controllerSpecial div definition.jFlowPrev: Any element with this class will transition to previous slide upon clicking
.jFlowNext: Any element with this class will transition to next slide upon clicking
.jFlowControl: Any element inside the controlling div with this class will map to the corresponding slideExample<script language="javascript">
$(document).ready(function(){
$("#myController").jFlow({
slides: "#mySlides",
width: "99%",
height: "200px",
duration: 400
});
});
</script>
<div id="myController">
<span class="jFlowControl">No 1 </span>
<span class="jFlowControl">No 2 </span>
<span class="jFlowControl">No 3 </span>
<span class="jFlowControl">No 4 </span>
</div>
<div id="mySlides">
<div>First Slide</div>
<div>Second Slide </div>
<div>Third Slide </div>
<div>Fourth Slide </div>
</div>
<span class="jFlowPrev">Prev</span>
<span class="jFlowNext">Next</span>
您可能感兴趣的文章:
jFlow
超级有用的13个基于jQuery的内容滚动插件和教程
分享十五个最佳jQuery 幻灯插件和教程
分享10篇优秀的jQuery幻灯片制作教程及应用案例
25个非常棒的jQuery滑块插件和教程小结
23个超流行的jQuery相册插件整理分享
上一篇:jQuery购物车插件 plum.Shop
下一篇:Select Chain
[关闭]