jQuery 几种不同的slide滑动banner，包括自动播放和带缩略图

pthill

浏览: 393361 次
性别:
来自: 长春

最近访客更多访客>>

凌语星

lindow

u012363178

anonyjack

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

本例的上下项目用的是自定义字体

本例的案例一共有6个，演示页面左侧导航条可以看到

演示

XML/HTML Code
<divid="main"role="main">
<sectionclass="slider">
<divclass="flexslider">
<ulclass="slides">
<li>
<imgsrc="images/kitchen_adventurer_cheesecake_brownie.jpg"/>
</li>
<li>
<imgsrc="images/kitchen_adventurer_lemon.jpg"/>
</li>
<li>
<imgsrc="images/kitchen_adventurer_donut.jpg"/>
</li>
<li>
<imgsrc="images/kitchen_adventurer_caramel.jpg"/>
</li>
</ul>
</div>
</section>
<aside>
<divclass="cf">
<h3>BasicSlider</h3>
<ulclass="togglecf">
<liclass="js"><ahref="#view-js">JS</a></li>
<liclass="html"><ahref="#view-html">HTML</a></li>
</ul>
</div>
<divid="view-js"class="code">
<preclass="brush:js;toolbar:false;gutter:false;">
//Canalsobeusedwith$(document).ready()
$(window).load(function(){
$('.flexslider').flexslider({
animation:"slide"
});
});
</pre>
</div>
<divid="view-html"class="code">
<preclass="brush:xml;toolbar:false;gutter:false;">
<!--Placesomewhereinthe<body>ofyourpage-->
<divclass="flexslider">
<ulclass="slides">
<li>
<imgsrc="slide1.jpg"/>
</li>
<li>
<imgsrc="slide2.jpg"/>
</li>
<li>
<imgsrc="slide3.jpg"/>
</li>
<li>
<imgsrc="slide4.jpg"/>
</li>
</ul>
</div>
</pre>
</div>
</aside>
</div>
</div>
<divclass="xx">111</div>
<!--jQuery-->
<scripttype="text/javascript"src="../../js/jquery-1.9.1.min.js"></script>
<!--FlexSlider-->
<scriptdefersrc="jquery.flexslider.js"></script>
<scripttype="text/javascript">
$(function(){
SyntaxHighlighter.all();
});
$(window).load(function(){
$('.flexslider').flexslider({
animation:"slide",
start:function(slider){
$('body').removeClass('loading');
}
});
});
</script>