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

最新推荐文章于 2020-09-29 00:26:48 发布

pthill

最新推荐文章于 2020-09-29 00:26:48 发布

阅读量158

点赞数

文章标签： javascript ViewUI

本文展示了如何在网页上使用自定义字体和FlexSlider插件创建滑动图片展示，包括HTML、CSS和JavaScript代码实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

本例的案例一共有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>

 