特效描述:7种按钮类型 图片滚动。jquery jcarousellite7种按钮类型图片滚动插件
代码结构
1. 引入JS
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script> <script type="text/javascript" src="js/jcarousellite.js"></script> <script type="text/javascript" src="js/easing.js"></script>
2. HTML代码
<div class="carousel"> <a href="javascript:void(0);" class="prev" id="prev-01">  </a> <div class="jCarouselLite" id="demo-01"> <ul> <li><a href="http://www.51qianduan.com/" target="_blank"><img height="150" width="150" alt="jquery图片滚动设置序号导航按钮和左右按钮控制单排图片滚动" src="images/1.jpg" /></a></li> <li><a href="http://www.51qianduan.com/" target="_blank"><img height="150" width="150" alt="jquery flow 图片切换滚动插件 带分页索引按钮控制图片左右滚动" src="images/2.jpg" /></a></li> <li><a href="http://www.51qianduan.com/" target="_blank"><img height="150" width="150" alt="jquery 图片滚动 xslider 插件 按钮控制自动图片左右滚动、上下滚动" src="images/3.jpg" /></a></li> <li><a href="http://www.51qianduan.com/" target="_blank"><img height="150" width="150" alt="jquery 图片切换特效 鼠标点击左右按钮焦点图切换滚动" src="images/4.jpg" /></a></li> </ul> </div> <a href="javascript:void(0);" class="next" id="next-01">  </a> <div class="clear"></div> </div><!--carousel end--> <script type="text/javascript"> $(document).ready(function(){ $('#demo-01').jCarouselLite({ btnPrev: '#prev-01', btnNext: '#next-01', visible:2 }); }); </script> <div class="carousel"> <a href="javascript:void(0);" class="prev" id="prev-02">  </a> <div class="jCarouselLite" id="demo-02"> <ul> <li><a href="http://www.51qianduan.com/" target="_blank"><img height="150" width="150" alt="jquery图片滚动设置序号导航按钮和左右按钮控制单排图片滚动" src="images/1.jpg" /></a></li> <li><a href="http://www.51qianduan.com/" target="_blank"><img height="150" width="150" alt="jquery flow 图片切换滚动插件 带分页索引按钮控制图片左右滚动" src="images/2.jpg" /></a></li> <li><a href="http://www.51qianduan.com/" target="_blank"><img height="150" width="150" alt="jquery 图片滚动 xslider 插件 按钮控制自动图片左右滚动、上下滚动" src="images/3.jpg" /></a></li> <li><a href="http://www.51qianduan.com/" target="_blank"><img height="150" width="150" alt="jquery 图片切换特效 鼠标点击左右按钮焦点图切换滚动" src="images/4.jpg" /></a></li> </ul> </div> <a href="javascript:void(0);" class="next" id="next-02">  </a> <div class="clear"></div> </div><!--carousel end--> <script type="text/javascript"> $(document).ready(function(){ $('#demo-02').jCarouselLite({ btnPrev: '#prev-02', btnNext: '#next-02', auto: 800, speed: 1000 }); }); </script> <div class="carousel"> <a href="javascript:void(0);" class="prev disabled" id="prev-03">  </a> <div class="jCarouselLite" id="demo-03"> <ul> <li><a href="http://www.51qianduan.com/" target="_blank"><img height="150" width="150" alt="jquery图片滚动设置序号导航按钮和左右按钮控制单排图片滚动" src="images/1.jpg" /></a></li> <li><a href="http://www.51qianduan.com/" target="_blank"><img height="150" width="150" alt="jquery flow 图片切换滚动插件 带分页索引按钮控制图片左右滚动" src="images/2.jpg" /></a></li> <li><a href="http://www.51qianduan.com/" target="_blank"><img height="150" width="150" alt="jquery 图片滚动 xslider 插件 按钮控制自动图片左右滚动、上下滚动" src="images/3.jpg" /></a></li> <li><a href="http://www.51qianduan.com/" target="_blank"><img height="150" width="150" alt="jquery 图片切换特效 鼠标点击左右按钮焦点图切换滚动" src="images/4.jpg" /></a></li> <li><a href="http://www.51qianduan.com/" target="_blank"><img height="150" width="150" alt="jquery图片滚动设置序号导航按钮和左右按钮控制单排图片滚动" src="images/1.jpg" /></a></li> </ul> </div> <a href="javascript:void(0);" class="next" id="next-03">  </a> <div class="clear"></div> </div><!--carousel end--> <script type="text/javascript"> $(document).ready(function(){ $('#demo-03').jCarouselLite({ btnPrev: '#prev-03', btnNext: '#next-03', circular: false, scroll: 2 }); }); </script> <div class="carousel"> <a href="javascript:void(0);" class="prev" id="prev-04">  </a> <div class="jCarouselLite" id="demo-04"> <ul> <li><a href="http://www.51qianduan.com/" target="_blank"><img height="150" width="150" alt="jquery图片滚动设置序号导航按钮和左右按钮控制单排图片滚动" src="images/1.jpg" /></a></li> <li><a href="http://www.51qianduan.com/" target="_blank"><img height="150" width="150" alt="jquery flow 图片切换滚动插件 带分页索引按钮控制图片左右滚动" src="images/2.jpg" /></a></li> <li><a href="http://www.51qianduan.com/" target="_blank"><img height="150" width="150" alt="jquery 图片滚动 xslider 插件 按钮控制自动图片左右滚动、上下滚动" src="images/3.jpg" /></a></li> <li><a href="http://www.51qianduan.com/" target="_blank"><img height="150" width="150" alt="jquery 图片切换特效 鼠标点击左右按钮焦点图切换滚动" src="images/4.jpg" /></a></li> </ul> </div> <a href="javascript:void(0);" class="next" id="next-04">  </a> <div class="clear"></div> </div><!--carousel end--> <script type="text/javascript"> $(document).ready(function(){ $('#demo-04').jCarouselLite({ btnPrev: '#prev-04', btnNext: '#next-04', easing: "bounceout", speed: 1000 }); }); </script> <div class="carousel-01"> <a href="javascript:void(0);" class="prev" id="prev-05">  </a> <div class="jCarouselLite-01" id="demo-05"> <ul> <li><a href="http://www.51qianduan.com/" target="_blank"><img height="150" width="150" alt="jquery图片滚动设置序号导航按钮和左右按钮控制单排图片滚动" src="images/1.jpg" /></a></li> <li><a href="http://www.51qianduan.com/" target="_blank"><img height="150" width="150" alt="jquery flow 图片切换滚动插件 带分页索引按钮控制图片左右滚动" src="images/2.jpg" /></a></li> <li><a href="http://www.51qianduan.com/" target="_blank"><img height="150" width="150" alt="jquery 图片滚动 xslider 插件 按钮控制自动图片左右滚动、上下滚动" src="images/3.jpg" /></a></li> <li><a href="http://www.51qianduan.com/" target="_blank"><img height="150" width="150" alt="jquery 图片切换特效 鼠标点击左右按钮焦点图切换滚动" src="images/4.jpg" /></a></li> </ul> </div> <div style="clear:both;"></div> <a href="javascript:void(0);" class="next" id="next-05">  </a> </div><!--carousel end--> <script type="text/javascript"> $(document).ready(function(){ $('#demo-05').jCarouselLite({ btnPrev: '#prev-05', btnNext: '#next-05', visible: 3, vertical: true, easing: "bounceout", speed: 1000 }); }); </script> <div class="carousel-01"> <a href="javascript:void(0);" class="prev" id="prev-06">  </a> <div class="jCarouselLite-01" id="demo-06"> <ul> <li><a href="http://www.51qianduan.com/" target="_blank"><img height="150" width="150" alt="jquery图片滚动设置序号导航按钮和左右按钮控制单排图片滚动" src="images/1.jpg" /></a></li> <li><a href="http://www.51qianduan.com/" target="_blank"><img height="150" width="150" alt="jquery flow 图片切换滚动插件 带分页索引按钮控制图片左右滚动" src="images/2.jpg" /></a></li> <li><a href="http://www.51qianduan.com/" target="_blank"><img height="150" width="150" alt="jquery 图片滚动 xslider 插件 按钮控制自动图片左右滚动、上下滚动" src="images/3.jpg" /></a></li> <li><a href="http://www.51qianduan.com/" target="_blank"><img height="150" width="150" alt="jquery 图片切换特效 鼠标点击左右按钮焦点图切换滚动" src="images/4.jpg" /></a></li> </ul> </div> <a href="javascript:void(0);" class="next" id="next-06">  </a> </div><!--carousel end--> <script type="text/javascript"> $(document).ready(function(){ $('#demo-06').jCarouselLite({ btnPrev: '#prev-06', btnNext: '#next-06', visible: 3, vertical: true }); }); </script> <div class="carousel"> <a href="javascript:void(0);" class="prev" id="prev-07">  </a> <div class="jCarouselLite" id="demo-07"> <ul> <li><a href="http://www.51qianduan.com/" target="_blank"><img height="150" width="150" alt="jquery图片滚动设置序号导航按钮和左右按钮控制单排图片滚动" src="images/1.jpg" /></a></li> <li><a href="http://www.51qianduan.com/" target="_blank"><img height="150" width="150" alt="jquery flow 图片切换滚动插件 带分页索引按钮控制图片左右滚动" src="images/2.jpg" /></a></li> <li><a href="http://www.51qianduan.com/" target="_blank"><img height="150" width="150" alt="jquery 图片滚动 xslider 插件 按钮控制自动图片左右滚动、上下滚动" src="images/3.jpg" /></a></li> <li><a href="http://www.51qianduan.com/" target="_blank"><img height="150" width="150" alt="jquery 图片切换特效 鼠标点击左右按钮焦点图切换滚动" src="images/4.jpg" /></a></li> </ul> </div> <a href="javascript:void(0);" class="next" id="next-07">  </a> <div><button class="0">0</button><button class="1">1</button><button class="2">2</button></div> </div><!--carousel end--> <script type="text/javascript"> $(document).ready(function(){ $('#demo-07').jCarouselLite({ btnPrev: '#prev-07', btnNext: '#next-07', btnGo:[".0", ".1", ".2"] }); }); </script>