jQuery图片文本滚动切换插件jCarousel

最新推荐文章于 2021-06-15 21:53:33 发布

duwei_D

最新推荐文章于 2021-06-15 21:53:33 发布

阅读量1.4k

点赞数

分类专栏： JS 文章标签：图片文本滚动切换 jquery

JS 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

jCarousel

jCarousel 是个非常好看又好用的内容滚动切换插件，可以实现按序水平或垂直,可以实现如新浪微博首页效果,

    Java代码   
    
  
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us">  
 <head>  
 <title>jCarousel Examples</title>  
 <link href="../style.css" rel="stylesheet" type="text/css" />  
   
 <!--  
   jQuery library  
 -->  
 <script type="text/javascript" src="../lib/jquery-1.4.2.min.js"></script>  
   
 <!--  
   jCarousel library  
 -->  
 <script type="text/javascript" src="../lib/jquery.jcarousel.min.js"></script>  
   
 <!--  
   jCarousel skin stylesheet  
 -->  
 <link rel="stylesheet" type="text/css" href="../skins/ie7/skin.css" />  
   
 <script type="text/javascript">  
   
 function mycarousel_itemLoadCallback(carousel, state)  
 {  
     // Since we get all URLs in one file, we simply add all items  
     // at once and set the size accordingly.  
     if (state != 'init')  
         return;  
   
     jQuery.get('dynamic_ajax.txt', function(data) {  
         mycarousel_itemAddCallback(carousel, carousel.first, carousel.last, data);  
     });  
 };  
   
 function mycarousel_itemAddCallback(carousel, first, last, data)  
 {  
     // Simply add all items at once and set the size accordingly.  
     var items = data.split('|');  
   
     for (i = 0; i < items.length; i++) {  
         carousel.add(i+1, mycarousel_getItemHTML(items[i]));  
     }  
   
     carousel.size(items.length);  
 };  
   
 /** 
  * Item html creation helper. 
  */  
 function mycarousel_getItemHTML(url)  
 {  
     return '<img src="' + url + '" width="75" height="75" alt="" />';  
 };  
   
 jQuery(document).ready(function() {  
     jQuery('#mycarousel').jcarousel({  
         itemLoadCallback: mycarousel_itemLoadCallback  
     });  
 });  
   
 </script>  
 </head>  
 <body>  
 <div id="wrap">  
   <h1>jCarousel</h1>  
   <h2>Riding carousels with jQuery</h2>  
   
   <h3>Carousel with dynamic content loading via Ajax</h3>  
   <p>  
     The data is loaded dynamically from a simple text file which contains the image urls.  
   </p>  
   
   <div id="mycarousel" class="jcarousel-skin-ie7">  
     <ul>  
       <!-- The content will be dynamically loaded in here -->  
     </ul>  
   </div>  
   
 </div>  
 </body>  
 </html>  

效果如下:

更多例子请参考
https://github.com/jsor/jcarousel

duwei_D

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery图片文本滚动切换插件jCarousel

jCarousel jCarousel 是个非常好看又好用的内容滚动切换插件，可以实现按序水平或垂直,可以实现如新浪微博首页效果, Java代码 "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
复制链接

扫一扫