一、jCarouselLite 组件
源码地址:
https://github.com/ganeshmax/jcarousellite
在线demo地址:
http://www.gmarwaha.com/jquery/jcarousellite/demo.php
扩展演示:
https://demo.lanrenzhijia.com/2013/pic2678/
使用注意事项:
1.当前组件是老版本的封装,Jquery的版本需要时1.xxx
2.依赖jquery.easing-1.3.js 动画库
3.特点扩展性强
二、使用步骤
1.引用css,js
<link rel="stylesheet" media="all" type="text/css" href="style/style-demo.css">
<script src="./script//jquery-1.11.1.js"></script>
<script src="script/jquery.easing-1.3.js"></script>
<script src="script/jquery.jcarousellite.js"></script>
2.组织html结构
<div id="jcl-demo">
<div class="custom-container widget">
<div class="mid">
<img src="image/1.jpg" alt="1">
</div>
<a href="#" class="prev">‹</a>
<div class="carousel">
<ul>
<li><img src="http://beijing.gongjuji.net/imgdata/big/50577333-ce2b-4591-b5fb-50dafd8fc432.jpg"></li>
<li><img src="image/2.jpg"></li>
<li><img src="image/3.jpg"></li>
<li><img src="image/4.jpg"></li>
<li><img src="image/5.jpg"></li>
<li><img src="image/6.jpg"></li>
<li><img src="image/7.jpg"></li>
<li><img src="image/8.jpg"></li>
<li><img src="image/9.jpg"></li>
<li><img src="image/10.jpg"></li>
<li><img src="image/11.jpg"></li>
</ul>
</div>
<a href="#" class="next">›</a>
<div class="clear"></div>
</div>
</div>
3. js绑定
<script type="text/javascript">
$(function () {
$(".widget .carousel").jCarouselLite({
btnNext: ".widget .next",
btnPrev: ".widget .prev",
speed: 800,
easing: "easeOutBack"
});
$(".widget img").click(function () {
$(".widget .mid img").attr("src", $(this).attr("src")).hide().fadeIn('slow');
})
});
</script>
三、展示效果:
更多: