图片轮换 滚动

简介:

jcarousellite是一款jQuery插件,可以控制文档元素滚动,丰富的参数设置可以控制滚动的更多细节,是一款不可多得的滚动插件,使用非常方便,目前支持jquery1.2和以上版本

官网:http://www.gmarwaha.com/jquery/jcarousellite/

btnPrev     string 上一个按钮的class名, 比如  btnPrev: ".prev"
btnNext     string 下一个按钮的class名, 比如  btnPrev: ".prev"
btnGo       array  自定义滚动位置,类似幻灯片效果置,有选项卡,按照数组顺序,依次为按钮1按钮2按钮N,如以下,class名为1的按钮是第一个按钮:[".1", ".2"]
mouseWheel  bool   鼠标滑是否可以轮控制上下滚动,可选:false,true,默认false
auto        int    指定多少秒内容定期自动滚动。默认为空(null),是不滚动,如果设定的,单位为毫秒,如1秒为1000
speed       int    滑动的速度,可以尝试800 1000 1500,设置成0将删除效果
easing      string 缓冲效果名称,如:easing: "bounceout",需要jquery中的easing pluin(缓冲插件实现),只适用于jq1.2
vertical    bool   是否垂直滚动,可选:false,true,默认false
circular    bool   是否循环滚动,默认为true,如果为false,滚动到最后一个将停止滚动
visible     int    可见数量,可以为小数,如2.5为2.5个li
start       int    开始的地方,默认是0
scroll      int    每次滚动的li数量
beforeStart func   滚动开始时回调的函数,可以传入对象参数 beforeStart: function(a) { alert("开始的对象是:" + a)}
afterEnd    func   滚动结束时回调的函数,使用方法同上

Java代码   收藏代码
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5.     <title>jcarousellite图片滚动插件7种带按钮jquery图片滚动</title>  
  6.     <meta name="description" content="jquery图片滚动用jcarousellite图片滚动插件制作7种带按钮的图片滚动效果总一种合适您,支持左右图片滚动、上下图片滚动、自动图片滚动。jquery插件、jquery插件 jquery下载。" />  
  7.   
  8.     <script type="text/javascript" src="http://www.jsfoot.com/skin/js/jquery.js"></script>  
  9.     <script type="text/javascript" src="http://www.gmarwaha.com/jquery/jcarousellite/js/jcarousellite_1.0.1.js"></script>  
  10.     <script type="text/javascript" src="http://gsgd.co.uk/js/jquery.easing.1.1.js"></script>  
  11.     <style type="text/css">  
  12.         body,ul,li,div{padding:0;margin:0;list-style-type:none;}  
  13.         a,img {border:none;}  
  14.         .clear {clear:both;display:block;}  
  15.         .carousel {width:625px; margin:30px auto;}  
  16.         .carousel .prev , .carousel .next {height:23px;width:23px;overflow:hidden;display:block;margin-top:40px;text-decoration:none;cursor:pointer;}  
  17.         .carousel .prev {float:left;background:url(images/imageNavLeft.gif) no-repeat;}  
  18.         .carousel .next {float:left;background:url(images/imageNavRight.gif) no-repeat;}  
  19.         .carousel #prev-03.disabled{background:url(images/imageNavLeft-disabled.gif) no-repeat;cursor:default;}  
  20.         .carousel #next-03.disabled{background:url(images/imageNavRight-disabled.gif) no-repeat;cursor:default;}  
  21.   
  22.         .jCarouselLite {float:left;width:486px;height:152px;overflow:hidden;/*必要元素*/}  
  23.         .jCarouselLite li{height:152px;width:162px;text-align:center;}  
  24.         .jCarouselLite li img,.jCarouselLite-01 li img{border:solid 1px #ddd;}  
  25.   
  26.         .carousel-01 {width:152px;margin:30px auto;}  
  27.         .carousel-01 .prev , .carousel-01 .next {height:23px;width:23px;overflow:hidden;display:block;margin-left:60px;text-decoration:none;cursor:pointer;}  
  28.         .carousel-01 .prev {background:url(images/imageNavLeft.gif) no-repeat;}  
  29.         .carousel-01 .next {background:url(images/imageNavRight.gif) no-repeat;}  
  30.         .jCarouselLite-01 {height:385px;width:152px;overflow:hidden;/*必要元素*/}  
  31.         .jCarouselLite-01 li{height:152px;width:152px;text-align:center;padding:5px 0;}  
  32.     </style>  
  33. </head>  
  34.   
  35. <body>  
  36. <div class="carousel">  
  37.     <a href="javascript:void(0);" class="prev" id="prev-01">&nbsp </a>  
  38.     <div class="jCarouselLite" id="demo-01">  
  39.         <ul>  
  40.             <li><a href="http://www.jsfoot.com/jquery/images/cj/2012-03-30/512.html" target="_blank"><img height="150" width="150" alt="jquery图片滚动设置序号导航按钮和左右按钮控制单排图片滚动" src="http://www.jsfoot.com/d/file/jquery/images/cj/2012-03-30/smallc7fb1818b3a9ae6770422992d6df7b45.jpg" /></a></li>  
  41.             <li><a href="http://www.jsfoot.com/jquery/images/cj/2011-10-20/219.html" target="_blank"><img height="150" width="150" alt="jquery flow 图片切换滚动插件 带分页索引按钮控制图片左右滚动" src="http://www.jsfoot.com/d/file/jquery/items/2011-10-20/smalld120ac28adc7863174531e90ca30fb35.jpg" /></a></li>  
  42.             <li><a href="http://www.jsfoot.com/jquery/images/cj/2011-10-19/217.html" target="_blank"><img height="150" width="150" alt="jquery 图片滚动 xslider 插件 按钮控制自动图片左右滚动、上下滚动" src="http://www.jsfoot.com/d/file/jquery/items/2011-10-19/small861fb36ea5b2491877623752f84c1297.jpg" /></a></li>  
  43.             <li><a href="http://www.jsfoot.com/jquery/images/cj/2011-09-18/189.html" target="_blank"><img height="150" width="150" alt="jquery 图片切换特效 鼠标点击左右按钮焦点图切换滚动" src="http://www.jsfoot.com/d/file/jquery/items/2011-09-18/small64e64c223150aacadf239d25c4f96440.jpg" /></a></li>  
  44.             <li><a href="http://www.jsfoot.com/jquery/images/cj/2011-09-05/167.html" target="_blank"><img height="150" width="150" alt="jquery 滚动 kxbdSuperMarquee插件支持图片与文字无缝滚动 图片翻滚 焦点图左右切换 banner广告制作" src="http://www.jsfoot.com/d/file/jquery/items/2011-09-05/small60e10976234830bb2f715dc2b6438479.jpg" /></a></li>  
  45.             <li><a href="http://www.jsfoot.com/jquery/images/cj/2011-08-20/135.html" target="_blank"><img height="150" width="150" alt="jquery图片特效 slide banner焦点图片切换图片上下翻滚、图片左右翻滚、图片淡隐淡现3种图片滚动特效" src="http://www.jsfoot.com/d/file/jquery/items/2011-08-20/smallcef595d06b263f623b878c41a9640f5b.jpg" /></a></li>  
  46.             <li><a href="http://www.jsfoot.com/jquery/images/cj/2011-08-15/124.html" target="_blank"><img height="150" width="150" alt="jquery 图片切换滚动特效带分页索引按钮控制左右图片切换滚动" src="http://www.jsfoot.com/d/file/jquery/items/2011-08-15/smallc2081239df287adc9fff1cf991e62b2e.jpg" /></a></li>  
  47.             <li><a href="http://www.jsfoot.com/jquery/images/cj/2011-07-26/82.html" target="_blank"><img height="150" width="150" alt="jquery 图片滚动特效制作 slide 图片类似窗帘式滚动" src="http://www.jsfoot.com/d/file/jquery/items/2011-07-26/smallbb276cedeaeb0438ed3275a9711b1d69.jpg" /></a></li>  
  48.             <li><a href="http://www.jsfoot.com/jquery/images/cj/2011-02-21/38.html" target="_blank"><img height="150" width="150" alt="jquery 3D图片滚动一个漂亮的手机软件网站图片展示" src="http://www.jsfoot.com/d/file/jquery/items/2011-02-21/smallc9cfb68c13cbe925d3c9a03912f3b1de.jpg" /></a></li>  
  49.         </ul>  
  50.     </div>  
  51.     <a href="javascript:void(0);" class="next" id="next-01">&nbsp </a>  
  52.     <div class="clear"></div>  
  53. </div><!--carousel end-->  
  54. <script type="text/javascript">  
  55.     $(document).ready(function(){  
  56.         $('#demo-01').jCarouselLite({  
  57.             btnPrev: '#prev-01',  
  58.             btnNext: '#next-01',  
  59.             visible:2  
  60.         });  
  61.     });  
  62. </script>  
  63.   
  64. <div class="carousel">  
  65.     <a href="javascript:void(0);" class="prev" id="prev-02">&nbsp </a>  
  66.     <div class="jCarouselLite" id="demo-02">  
  67.         <ul>  
  68.             <li><a href="http://www.jsfoot.com/jquery/images/cj/2012-03-30/512.html" target="_blank"><img height="150" width="150" alt="jquery图片滚动设置序号导航按钮和左右按钮控制单排图片滚动" src="http://www.jsfoot.com/d/file/jquery/images/cj/2012-03-30/smallc7fb1818b3a9ae6770422992d6df7b45.jpg" /></a></li>  
  69.             <li><a href="http://www.jsfoot.com/jquery/images/cj/2011-10-20/219.html" target="_blank"><img height="150" width="150" alt="jquery flow 图片切换滚动插件 带分页索引按钮控制图片左右滚动" src="http://www.jsfoot.com/d/file/jquery/items/2011-10-20/smalld120ac28adc7863174531e90ca30fb35.jpg" /></a></li>  
  70.             <li><a href="http://www.jsfoot.com/jquery/images/cj/2011-10-19/217.html" target="_blank"><img height="150" width="150" alt="jquery 图片滚动 xslider 插件 按钮控制自动图片左右滚动、上下滚动" src="http://www.jsfoot.com/d/file/jquery/items/2011-10-19/small861fb36ea5b2491877623752f84c1297.jpg" /></a></li>  
  71.             <li><a href="http://www.jsfoot.com/jquery/images/cj/2011-09-18/189.html" target="_blank"><img height="150" width="150" alt="jquery 图片切换特效 鼠标点击左右按钮焦点图切换滚动" src="http://www.jsfoot.com/d/file/jquery/items/2011-09-18/small64e64c223150aacadf239d25c4f96440.jpg" /></a></li>  
  72.             <li><a href="http://www.jsfoot.com/jquery/images/cj/2011-09-05/167.html" target="_blank"><img height="150" width="150" alt="jquery 滚动 kxbdSuperMarquee插件支持图片与文字无缝滚动 图片翻滚 焦点图左右切换 banner广告制作" src="http://www.jsfoot.com/d/file/jquery/items/2011-09-05/small60e10976234830bb2f715dc2b6438479.jpg" /></a></li>  
  73.             <li><a href="http://www.jsfoot.com/jquery/images/cj/2011-08-20/135.html" target="_blank"><img height="150" width="150" alt="jquery图片特效 slide banner焦点图片切换图片上下翻滚、图片左右翻滚、图片淡隐淡现3种图片滚动特效" src="http://www.jsfoot.com/d/file/jquery/items/2011-08-20/smallcef595d06b263f623b878c41a9640f5b.jpg" /></a></li>  
  74.             <li><a href="http://www.jsfoot.com/jquery/images/cj/2011-08-15/124.html" target="_blank"><img height="150" width="150" alt="jquery 图片切换滚动特效带分页索引按钮控制左右图片切换滚动" src="http://www.jsfoot.com/d/file/jquery/items/2011-08-15/smallc2081239df287adc9fff1cf991e62b2e.jpg" /></a></li>  
  75.             <li><a href="http://www.jsfoot.com/jquery/images/cj/2011-07-26/82.html" target="_blank"><img height="150" width="150" alt="jquery 图片滚动特效制作 slide 图片类似窗帘式滚动" src="http://www.jsfoot.com/d/file/jquery/items/2011-07-26/smallbb276cedeaeb0438ed3275a9711b1d69.jpg" /></a></li>  
  76.             <li><a href="http://www.jsfoot.com/jquery/images/cj/2011-02-21/38.html" target="_blank"><img height="150" width="150" alt="jquery 3D图片滚动一个漂亮的手机软件网站图片展示" src="http://www.jsfoot.com/d/file/jquery/items/2011-02-21/smallc9cfb68c13cbe925d3c9a03912f3b1de.jpg" /></a></li>  
  77.         </ul>  
  78.     </div>  
  79.     <a href="javascript:void(0);" class="next" id="next-02">&nbsp </a>  
  80.     <div class="clear"></div>  
  81. </div><!--carousel end-->  
  82. <script type="text/javascript">  
  83.     $(document).ready(function(){  
  84.         $('#demo-02').jCarouselLite({  
  85.             btnPrev: '#prev-02',  
  86.             btnNext: '#next-02',  
  87.             auto: 800,  
  88.             speed: 1000  
  89.         });  
  90.     });  
  91. </script>  
  92.   
  93. <div class="carousel">  
  94.     <a href="javascript:void(0);" class="prev disabled" id="prev-03">&nbsp </a>  
  95.     <div class="jCarouselLite" id="demo-03">  
  96.         <ul>  
  97.             <li><a href="http://www.jsfoot.com/jquery/images/cj/2012-03-30/512.html" target="_blank"><img height="150" width="150" alt="jquery图片滚动设置序号导航按钮和左右按钮控制单排图片滚动" src="http://www.jsfoot.com/d/file/jquery/images/cj/2012-03-30/smallc7fb1818b3a9ae6770422992d6df7b45.jpg" /></a></li>  
  98.             <li><a href="http://www.jsfoot.com/jquery/images/cj/2011-10-20/219.html" target="_blank"><img height="150" width="150" alt="jquery flow 图片切换滚动插件 带分页索引按钮控制图片左右滚动" src="http://www.jsfoot.com/d/file/jquery/items/2011-10-20/smalld120ac28adc7863174531e90ca30fb35.jpg" /></a></li>  
  99.             <li><a href="http://www.jsfoot.com/jquery/images/cj/2011-10-19/217.html" target="_blank"><img height="150" width="150" alt="jquery 图片滚动 xslider 插件 按钮控制自动图片左右滚动、上下滚动" src="http://www.jsfoot.com/d/file/jquery/items/2011-10-19/small861fb36ea5b2491877623752f84c1297.jpg" /></a></li>  
  100.             <li><a href="http://www.jsfoot.com/jquery/images/cj/2011-09-18/189.html" target="_blank"><img height="150" width="150" alt="jquery 图片切换特效 鼠标点击左右按钮焦点图切换滚动" src="http://www.jsfoot.com/d/file/jquery/items/2011-09-18/small64e64c223150aacadf239d25c4f96440.jpg" /></a></li>  
  101.             <li><a href="http://www.jsfoot.com/jquery/images/cj/2011-09-05/167.html" target="_blank"><img height="150" width="150" alt="jquery 滚动 kxbdSuperMarquee插件支持图片与文字无缝滚动 图片翻滚 焦点图左右切换 banner广告制作" src="http://www.jsfoot.com/d/file/jquery/items/2011-09-05/small60e10976234830bb2f715dc2b6438479.jpg" /></a></li>  
  102.             <li><a href="http://www.jsfoot.com/jquery/images/cj/2011-08-20/135.html" target="_blank"><img height="150" width="150" alt="jquery图片特效 slide banner焦点图片切换图片上下翻滚、图片左右翻滚、图片淡隐淡现3种图片滚动特效" src="http://www.jsfoot.com/d/file/jquery/items/2011-08-20/smallcef595d06b263f623b878c41a9640f5b.jpg" /></a></li>  
  103.             <li><a href="http://www.jsfoot.com/jquery/images/cj/2011-08-15/124.html" target="_blank"><img height="150" width="150" alt="jquery 图片切换滚动特效带分页索引按钮控制左右图片切换滚动" src="http://www.jsfoot.com/d/file/jquery/items/2011-08-15/smallc2081239df287adc9fff1cf991e62b2e.jpg" /></a></li>  
  104.             <li><a href="http://www.jsfoot.com/jquery/images/cj/2011-07-26/82.html" target="_blank"><img height="150" width="150" alt="jquery 图片滚动特效制作 slide 图片类似窗帘式滚动" src="http://www.jsfoot.com/d/file/jquery/items/2011-07-26/smallbb276cedeaeb0438ed3275a9711b1d69.jpg" /></a></li>  
  105.             <li><a href="http://www.jsfoot.com/jquery/images/cj/2011-02-21/38.html" target="_blank"><img height="150" width="150" alt="jquery 3D图片滚动一个漂亮的手机软件网站图片展示" src="http://www.jsfoot.com/d/file/jquery/items/2011-02-21/smallc9cfb68c13cbe925d3c9a03912f3b1de.jpg" /></a></li>  
  106.         </ul>  
  107.     </div>  
  108.     <a href="javascript:void(0);" class="next" id="next-03">&nbsp </a>  
  109.     <div class="clear"></div>  
  110. </div><!--carousel end-->  
  111. <script type="text/javascript">  
  112.     $(document).ready(function(){  
  113.         $('#demo-03').jCarouselLite({  
  114.             btnPrev: '#prev-03',  
  115.             btnNext: '#next-03',  
  116.             circular: false,  
  117.             scroll: 2  
  118.         });  
  119.     });  
  120. </script>  
  121.   
  122. <div class="carousel">  
  123.     <a href="javascript:void(0);" class="prev" id="prev-04">&nbsp </a>  
  124.     <div class="jCarouselLite" id="demo-04">  
  125.         <ul>  
  126.             <li><a href="http://www.jsfoot.com/jquery/images/cj/2012-03-30/512.html" target="_blank"><img height="150" width="150" alt="jquery图片滚动设置序号导航按钮和左右按钮控制单排图片滚动" src="http://www.jsfoot.com/d/file/jquery/images/cj/2012-03-30/smallc7fb1818b3a9ae6770422992d6df7b45.jpg" /></a></li>  
  127.             <li><a href="http://www.jsfoot.com/jquery/images/cj/2011-10-20/219.html" target="_blank"><img height="150" width="150" alt="jquery flow 图片切换滚动插件 带分页索引按钮控制图片左右滚动" src="http://www.jsfoot.com/d/file/jquery/items/2011-10-20/smalld120ac28adc7863174531e90ca30fb35.jpg" /></a></li>  
  128.             <li><a href="http://www.jsfoot.com/jquery/images/cj/2011-10-19/217.html" target="_blank"><img height="150" width="150" alt="jquery 图片滚动 xslider 插件 按钮控制自动图片左右滚动、上下滚动" src="http://www.jsfoot.com/d/file/jquery/items/2011-10-19/small861fb36ea5b2491877623752f84c1297.jpg" /></a></li>  
  129.             <li><a href="http://www.jsfoot.com/jquery/images/cj/2011-09-18/189.html" target="_blank"><img height="150" width="150" alt="jquery 图片切换特效 鼠标点击左右按钮焦点图切换滚动" src="http://www.jsfoot.com/d/file/jquery/items/2011-09-18/small64e64c223150aacadf239d25c4f96440.jpg" /></a></li>  
  130.             <li><a href="http://www.jsfoot.com/jquery/images/cj/2011-09-05/167.html" target="_blank"><img height="150" width="150" alt="jquery 滚动 kxbdSuperMarquee插件支持图片与文字无缝滚动 图片翻滚 焦点图左右切换 banner广告制作" src="http://www.jsfoot.com/d/file/jquery/items/2011-09-05/small60e10976234830bb2f715dc2b6438479.jpg" /></a></li>  
  131.             <li><a href="http://www.jsfoot.com/jquery/images/cj/2011-08-20/135.html" target="_blank"><img height="150" width="150" alt="jquery图片特效 slide banner焦点图片切换图片上下翻滚、图片左右翻滚、图片淡隐淡现3种图片滚动特效" src="http://www.jsfoot.com/d/file/jquery/items/2011-08-20/smallcef595d06b263f623b878c41a9640f5b.jpg" /></a></li>  
  132.             <li><a href="http://www.jsfoot.com/jquery/images/cj/2011-08-15/124.html" target="_blank"><img height="150" width="150" alt="jquery 图片切换滚动特效带分页索引按钮控制左右图片切换滚动" src="http://www.jsfoot.com/d/file/jquery/items/2011-08-15/smallc2081239df287adc9fff1cf991e62b2e.jpg" /></a></li>  
  133.             <li><a href="http://www.jsfoot.com/jquery/images/cj/2011-07-26/82.html" target="_blank"><img height="150" width="150" alt="jquery 图片滚动特效制作 slide 图片类似窗帘式滚动" src="http://www.jsfoot.com/d/file/jquery/items/2011-07-26/smallbb276cedeaeb0438ed3275a9711b1d69.jpg" /></a></li>  
  134.             <li><a href="http://www.jsfoot.com/jquery/images/cj/2011-02-21/38.html" target="_blank"><img height="150" width="150" alt="jquery 3D图片滚动一个漂亮的手机软件网站图片展示" src="http://www.jsfoot.com/d/file/jquery/items/2011-02-21/smallc9cfb68c13cbe925d3c9a03912f3b1de.jpg" /></a></li>  
  135.         </ul>  
  136.     </div>  
  137.     <a href="javascript:void(0);" class="next" id="next-04">&nbsp </a>  
  138.     <div class="clear"></div>  
  139. </div><!--carousel end-->  
  140. <script type="text/javascript">  
  141.     $(document).ready(function(){  
  142.         $('#demo-04').jCarouselLite({  
  143.             btnPrev: '#prev-04',  
  144.             btnNext: '#next-04',  
  145.             easing: "bounceout",  
  146.             speed: 1000  
  147.         });  
  148.     });  
  149. </script>  
  150.   
  151. <div class="carousel-01">  
  152.     <a href="javascript:void(0);" class="prev" id="prev-05">&nbsp </a>  
  153.     <div class="jCarouselLite-01" id="demo-05">  
  154.         <ul>  
  155.             <li><a href="http://www.jsfoot.com/jquery/images/cj/2012-03-30/512.html" target="_blank"><img height="150" width="150" alt="jquery图片滚动设置序号导航按钮和左右按钮控制单排图片滚动" src="http://www.jsfoot.com/d/file/jquery/images/cj/2012-03-30/smallc7fb1818b3a9ae6770422992d6df7b45.jpg" /></a></li>  
  156.             <li><a href="http://www.jsfoot.com/jquery/images/cj/2011-10-20/219.html" target="_blank"><img height="150" width="150" alt="jquery flow 图片切换滚动插件 带分页索引按钮控制图片左右滚动" src="http://www.jsfoot.com/d/file/jquery/items/2011-10-20/smalld120ac28adc7863174531e90ca30fb35.jpg" /></a></li>  
  157.             <li><a href="http://www.jsfoot.com/jquery/images/cj/2011-10-19/217.html" target="_blank"><img height="150" width="150" alt="jquery 图片滚动 xslider 插件 按钮控制自动图片左右滚动、上下滚动" src="http://www.jsfoot.com/d/file/jquery/items/2011-10-19/small861fb36ea5b2491877623752f84c1297.jpg" /></a></li>  
  158.             <li><a href="http://www.jsfoot.com/jquery/images/cj/2011-09-18/189.html" target="_blank"><img height="150" width="150" alt="jquery 图片切换特效 鼠标点击左右按钮焦点图切换滚动" src="http://www.jsfoot.com/d/file/jquery/items/2011-09-18/small64e64c223150aacadf239d25c4f96440.jpg" /></a></li>  
  159.             <li><a href="http://www.jsfoot.com/jquery/images/cj/2011-09-05/167.html" target="_blank"><img height="150" width="150" alt="jquery 滚动 kxbdSuperMarquee插件支持图片与文字无缝滚动 图片翻滚 焦点图左右切换 banner广告制作" src="http://www.jsfoot.com/d/file/jquery/items/2011-09-05/small60e10976234830bb2f715dc2b6438479.jpg" /></a></li>  
  160.             <li><a href="http://www.jsfoot.com/jquery/images/cj/2011-08-20/135.html" target="_blank"><img height="150" width="150" alt="jquery图片特效 slide banner焦点图片切换图片上下翻滚、图片左右翻滚、图片淡隐淡现3种图片滚动特效" src="http://www.jsfoot.com/d/file/jquery/items/2011-08-20/smallcef595d06b263f623b878c41a9640f5b.jpg" /></a></li>  
  161.             <li><a href="http://www.jsfoot.com/jquery/images/cj/2011-08-15/124.html" target="_blank"><img height="150" width="150" alt="jquery 图片切换滚动特效带分页索引按钮控制左右图片切换滚动" src="http://www.jsfoot.com/d/file/jquery/items/2011-08-15/smallc2081239df287adc9fff1cf991e62b2e.jpg" /></a></li>  
  162.             <li><a href="http://www.jsfoot.com/jquery/images/cj/2011-07-26/82.html" target="_blank"><img height="150" width="150" alt="jquery 图片滚动特效制作 slide 图片类似窗帘式滚动" src="http://www.jsfoot.com/d/file/jquery/items/2011-07-26/smallbb276cedeaeb0438ed3275a9711b1d69.jpg" /></a></li>  
  163.             <li><a href="http://www.jsfoot.com/jquery/images/cj/2011-02-21/38.html" target="_blank"><img height="150" width="150" alt="jquery 3D图片滚动一个漂亮的手机软件网站图片展示" src="http://www.jsfoot.com/d/file/jquery/items/2011-02-21/smallc9cfb68c13cbe925d3c9a03912f3b1de.jpg" /></a></li>  
  164.         </ul>  
  165.     </div>  
  166.     <div style="clear:both;"></div>  
  167.     <a href="javascript:void(0);" class="next" id="next-05">&nbsp </a>  
  168. </div><!--carousel end-->  
  169.   
  170. <script type="text/javascript">  
  171.     $(document).ready(function(){  
  172.         $('#demo-05').jCarouselLite({  
  173.             btnPrev: '#prev-05',  
  174.             btnNext: '#next-05',  
  175.             visible: 3,  
  176.             vertical: true,  
  177.             easing: "bounceout",  
  178.             speed: 1000  
  179.         });  
  180.     });  
  181. </script>  
  182.   
  183.   
  184. <div class="carousel-01">  
  185.     <a href="javascript:void(0);" class="prev" id="prev-06">&nbsp </a>  
  186.     <div class="jCarouselLite-01" id="demo-06">  
  187.         <ul>  
  188.             <li><a href="http://www.jsfoot.com/jquery/images/cj/2012-03-30/512.html" target="_blank"><img height="150" width="150" alt="jquery图片滚动设置序号导航按钮和左右按钮控制单排图片滚动" src="http://www.jsfoot.com/d/file/jquery/images/cj/2012-03-30/smallc7fb1818b3a9ae6770422992d6df7b45.jpg" /></a></li>  
  189.             <li><a href="http://www.jsfoot.com/jquery/images/cj/2011-10-20/219.html" target="_blank"><img height="150" width="150" alt="jquery flow 图片切换滚动插件 带分页索引按钮控制图片左右滚动" src="http://www.jsfoot.com/d/file/jquery/items/2011-10-20/smalld120ac28adc7863174531e90ca30fb35.jpg" /></a></li>  
  190.             <li><a href="http://www.jsfoot.com/jquery/images/cj/2011-10-19/217.html" target="_blank"><img height="150" width="150" alt="jquery 图片滚动 xslider 插件 按钮控制自动图片左右滚动、上下滚动" src="http://www.jsfoot.com/d/file/jquery/items/2011-10-19/small861fb36ea5b2491877623752f84c1297.jpg" /></a></li>  
  191.             <li><a href="http://www.jsfoot.com/jquery/images/cj/2011-09-18/189.html" target="_blank"><img height="150" width="150" alt="jquery 图片切换特效 鼠标点击左右按钮焦点图切换滚动" src="http://www.jsfoot.com/d/file/jquery/items/2011-09-18/small64e64c223150aacadf239d25c4f96440.jpg" /></a></li>  
  192.             <li><a href="http://www.jsfoot.com/jquery/images/cj/2011-09-05/167.html" target="_blank"><img height="150" width="150" alt="jquery 滚动 kxbdSuperMarquee插件支持图片与文字无缝滚动 图片翻滚 焦点图左右切换 banner广告制作" src="http://www.jsfoot.com/d/file/jquery/items/2011-09-05/small60e10976234830bb2f715dc2b6438479.jpg" /></a></li>  
  193.             <li><a href="http://www.jsfoot.com/jquery/images/cj/2011-08-20/135.html" target="_blank"><img height="150" width="150" alt="jquery图片特效 slide banner焦点图片切换图片上下翻滚、图片左右翻滚、图片淡隐淡现3种图片滚动特效" src="http://www.jsfoot.com/d/file/jquery/items/2011-08-20/smallcef595d06b263f623b878c41a9640f5b.jpg" /></a></li>  
  194.             <li><a href="http://www.jsfoot.com/jquery/images/cj/2011-08-15/124.html" target="_blank"><img height="150" width="150" alt="jquery 图片切换滚动特效带分页索引按钮控制左右图片切换滚动" src="http://www.jsfoot.com/d/file/jquery/items/2011-08-15/smallc2081239df287adc9fff1cf991e62b2e.jpg" /></a></li>  
  195.             <li><a href="http://www.jsfoot.com/jquery/images/cj/2011-07-26/82.html" target="_blank"><img height="150" width="150" alt="jquery 图片滚动特效制作 slide 图片类似窗帘式滚动" src="http://www.jsfoot.com/d/file/jquery/items/2011-07-26/smallbb276cedeaeb0438ed3275a9711b1d69.jpg" /></a></li>  
  196.             <li><a href="http://www.jsfoot.com/jquery/images/cj/2011-02-21/38.html" target="_blank"><img height="150" width="150" alt="jquery 3D图片滚动一个漂亮的手机软件网站图片展示" src="http://www.jsfoot.com/d/file/jquery/items/2011-02-21/smallc9cfb68c13cbe925d3c9a03912f3b1de.jpg" /></a></li>  
  197.         </ul>  
  198.     </div>  
  199.     <a href="javascript:void(0);" class="next" id="next-06">&nbsp </a>  
  200. </div><!--carousel end-->  
  201.   
  202. <script type="text/javascript">  
  203.     $(document).ready(function(){  
  204.         $('#demo-06').jCarouselLite({  
  205.             btnPrev: '#prev-06',  
  206.             btnNext: '#next-06',  
  207.             visible: 3,  
  208.             vertical: true  
  209.         });  
  210.     });  
  211. </script>  
  212.   
  213. <div class="carousel">  
  214.     <a href="javascript:void(0);" class="prev" id="prev-07">&nbsp </a>  
  215.     <div class="jCarouselLite" id="demo-07">  
  216.         <ul>  
  217.             <li><a href="http://www.jsfoot.com/jquery/images/cj/2012-03-30/512.html" target="_blank"><img height="150" width="150" alt="jquery图片滚动设置序号导航按钮和左右按钮控制单排图片滚动" src="http://www.jsfoot.com/d/file/jquery/images/cj/2012-03-30/smallc7fb1818b3a9ae6770422992d6df7b45.jpg" /></a></li>  
  218.             <li><a href="http://www.jsfoot.com/jquery/images/cj/2011-10-20/219.html" target="_blank"><img height="150" width="150" alt="jquery flow 图片切换滚动插件 带分页索引按钮控制图片左右滚动" src="http://www.jsfoot.com/d/file/jquery/items/2011-10-20/smalld120ac28adc7863174531e90ca30fb35.jpg" /></a></li>  
  219.             <li><a href="http://www.jsfoot.com/jquery/images/cj/2011-10-19/217.html" target="_blank"><img height="150" width="150" alt="jquery 图片滚动 xslider 插件 按钮控制自动图片左右滚动、上下滚动" src="http://www.jsfoot.com/d/file/jquery/items/2011-10-19/small861fb36ea5b2491877623752f84c1297.jpg" /></a></li>  
  220.             <li><a href="http://www.jsfoot.com/jquery/images/cj/2011-09-18/189.html" target="_blank"><img height="150" width="150" alt="jquery 图片切换特效 鼠标点击左右按钮焦点图切换滚动" src="http://www.jsfoot.com/d/file/jquery/items/2011-09-18/small64e64c223150aacadf239d25c4f96440.jpg" /></a></li>  
  221.             <li><a href="http://www.jsfoot.com/jquery/images/cj/2011-09-05/167.html" target="_blank"><img height="150" width="150" alt="jquery 滚动 kxbdSuperMarquee插件支持图片与文字无缝滚动 图片翻滚 焦点图左右切换 banner广告制作" src="http://www.jsfoot.com/d/file/jquery/items/2011-09-05/small60e10976234830bb2f715dc2b6438479.jpg" /></a></li>  
  222.             <li><a href="http://www.jsfoot.com/jquery/images/cj/2011-08-20/135.html" target="_blank"><img height="150" width="150" alt="jquery图片特效 slide banner焦点图片切换图片上下翻滚、图片左右翻滚、图片淡隐淡现3种图片滚动特效" src="http://www.jsfoot.com/d/file/jquery/items/2011-08-20/smallcef595d06b263f623b878c41a9640f5b.jpg" /></a></li>  
  223.             <li><a href="http://www.jsfoot.com/jquery/images/cj/2011-08-15/124.html" target="_blank"><img height="150" width="150" alt="jquery 图片切换滚动特效带分页索引按钮控制左右图片切换滚动" src="http://www.jsfoot.com/d/file/jquery/items/2011-08-15/smallc2081239df287adc9fff1cf991e62b2e.jpg" /></a></li>  
  224.             <li><a href="http://www.jsfoot.com/jquery/images/cj/2011-07-26/82.html" target="_blank"><img height="150" width="150" alt="jquery 图片滚动特效制作 slide 图片类似窗帘式滚动" src="http://www.jsfoot.com/d/file/jquery/items/2011-07-26/smallbb276cedeaeb0438ed3275a9711b1d69.jpg" /></a></li>  
  225.             <li><a href="http://www.jsfoot.com/jquery/images/cj/2011-02-21/38.html" target="_blank"><img height="150" width="150" alt="jquery 3D图片滚动一个漂亮的手机软件网站图片展示" src="http://www.jsfoot.com/d/file/jquery/items/2011-02-21/smallc9cfb68c13cbe925d3c9a03912f3b1de.jpg" /></a></li>  
  226.         </ul>  
  227.     </div>  
  228.     <a href="javascript:void(0);" class="next" id="next-07">&nbsp </a>  
  229.     <div><button class="0">0</button><button class="1">1</button><button class="2">2</button></div>  
  230. </div><!--carousel end-->  
  231. <script type="text/javascript">  
  232.     $(document).ready(function(){  
  233.         $('#demo-07').jCarouselLite({  
  234.             btnPrev: '#prev-07',  
  235.             btnNext: '#next-07',  
  236.             btnGo:[".0"".1"".2"]  
  237.         });  
  238.     });  
  239. </script>  
  240. </body>  
  241. </html>  

 

相关文章
|
6月前
|
小程序 JavaScript
小程序自定义弹窗禁止底部内容滚动(滚动穿透问题)
小程序自定义弹窗禁止底部内容滚动(滚动穿透问题)
836 0
爬取图片,以及对图片筛选,以及切换系统背景图片
爬取图片,以及对图片筛选,以及切换系统背景图片
|
C++
Qt图片定时滚动播放器+透明过渡动画
解决:[QWidget::paintEngine: Should no longer be called QPainter::begin: Paint device returned engine == 0, type: 1] 需要在哪个控件上绘制,就要在哪个控件类中重写 paintEvent() ,所以本项目 需要使用自定义的MyQLabel继承QLabel
137 0
|
6月前
|
前端开发 JavaScript
在一张图片上添加鼠标移入和移出事件,并定位图片中的内容
在一张图片上添加鼠标移入和移出事件,并定位图片中的内容
104 1
滚动截取页面图片
滚动截取页面图片
60 0
图片和文件预览组件(部分源码),可拖动,缩小,放大。 #41
图片和文件预览组件(部分源码),可拖动,缩小,放大。 #41
145 0
|
前端开发 JavaScript
【前端三分钟】锚点自动跟随滚动定位
【前端三分钟】锚点自动跟随滚动定位
784 0
|
前端开发
如何使背景照片覆盖全屏不会随屏幕滚动
如何使背景照片覆盖全屏不会随屏幕滚动
76 0
|
前端开发
CSS实现鼠标移动到图片或按钮上缓慢变大,添加过渡动画效果,自定义动画时间
CSS实现鼠标移动到图片或按钮上缓慢变大,添加过渡动画效果,自定义动画时间
2210 0
小程序 - swiper除了左右切换还有上下滚动超出屏幕的内容
本来呢,我是有专门整理小程序恶心bug的文章的,每次只要添加汇总就好, 但是呢,鉴于这个问题的恶心程度,所以我把他单独拿出来说了。 ——————————————--------------------------------------------------产品经理都说恶心的需求---------...
2372 0