闲着无聊做一个jquery图片滚动插件

没事的时候研究了下jquery插件开发，就顺手写了点插件。未经过严谨额测试，权当玩玩......

分为 两个方向的滚动：
首先引入jquery库：
Java代码  
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>  

<script type="text/javascript" src="jquery-1.4.2.min.js"></script>

上下方向：

引入js和css：
Java代码  
<link href="css/imgScoll-tm-1.0.css" rel="stylesheet" type="text/css"></link>   
<script type="text/javascript" src="imgScoll-mt-1.0.js"></script>  

<link href="css/imgScoll-tm-1.0.css" rel="stylesheet" type="text/css"></link>
<script type="text/javascript" src="imgScoll-mt-1.0.js"></script>

如何使用：
Java代码  
<script type="text/javascript">   
$(function(){   
      // 文档就绪   
      $("#view").imgScoll({   
            width:240,   
            height:315,   
            speed:10,   
            delay:1000,   
            direction:'mtt',   
            data:{"totalCount" : 7,   
                "result" : [{"src":'images/1.jpg',"describe":'test1test1test1',"href":'#'},   
                            {"src":'images/2.jpg',"describe":'test2test2test2',"href":'#'},   
                            {"src":'images/3.jpg',"describe":'test3test3test3test3',"href":'#'},   
                            {"src":'images/4.jpg',"describe":'4444444444',"href":'#'},   
                            {"src":'images/5.jpg',"describe":'55555555555555',"href":'#'},   
                            {"src":'images/6.jpg',"describe":'6666666666666',"href":'#'},   
                            {"src":'images/1.jpg',"describe":'7777777777777',"href":'#'}   
                      ]   
            }   
          });   
     　     
         
});   
</script>   
  
<div id="view" ></div>   
      

<script type="text/javascript">
$(function(){
          // 文档就绪
          $("#view").imgScoll({
                          width:240,
                          height:315,
                          speed:10,
                          delay:1000,
                          direction:'mtt',
                          data:{"totalCount" : 7,
                                "result" : [{"src":'images/1.jpg',"describe":'test1test1test1',"href":'#'},
                                                        {"src":'images/2.jpg',"describe":'test2test2test2',"href":'#'},
                                                  {"src":'images/3.jpg',"describe":'test3test3test3test3',"href":'#'},
                                                  {"src":'images/4.jpg',"describe":'4444444444',"href":'#'},
                                                  {"src":'images/5.jpg',"describe":'55555555555555',"href":'#'},
                                                  {"src":'images/6.jpg',"describe":'6666666666666',"href":'#'},
                                                 {"src":'images/1.jpg',"describe":'7777777777777',"href":'#'}
                                      ]
                        }
                  });
         　       
          
});
</script>

<div id="view" ></div>
       


左右方向：

引入js和css：
Java代码  
<link href="css/imgScoll-rl-1.0.css" rel="stylesheet" type="text/css"></link>   
<script type="text/javascript" src="imgScoll-rl-1.0.js"></script>  

<link href="css/imgScoll-rl-1.0.css" rel="stylesheet" type="text/css"></link>
<script type="text/javascript" src="imgScoll-rl-1.0.js"></script>

如何使用：
Java代码  
<script type="text/javascript">   
$(function(){   
      // 文档就绪   
      $("#view").imgScoll({   
            width:1002,   
            height:263,   
            speed:20,   
            delay:1000,   
            direction:'ltr',   
            data:{"totalCount" : 7,   
                "result" : [{"src":'images/1.jpg',"describe":'test1test1test1',"href":'#'},   
                            {"src":'images/2.jpg',"describe":'test2test2test2',"href":'#'},   
                            {"src":'images/3.jpg',"describe":'test3test3test3test3',"href":'#'},   
                            {"src":'images/4.jpg',"describe":'4444444444',"href":'#'},   
                            {"src":'images/5.jpg',"describe":'55555555555555',"href":'#'},   
                            {"src":'images/6.jpg',"describe":'6666666666666',"href":'#'},   
                            {"src":'images/5.jpg',"describe":'7777777777777',"href":'#'}   
                      ]   
            }   
          });   
     　     
      var p = $("p:first");   
      $("#view").scrollLeft(500);   
});   
</script>   
<div id="view" ></div>  

<script type="text/javascript">
$(function(){
          // 文档就绪
          $("#view").imgScoll({
                          width:1002,
                          height:263,
                          speed:20,
                          delay:1000,
                          direction:'ltr',
                          data:{"totalCount" : 7,
                                "result" : [{"src":'images/1.jpg',"describe":'test1test1test1',"href":'#'},
                                                        {"src":'images/2.jpg',"describe":'test2test2test2',"href":'#'},
                                                  {"src":'images/3.jpg',"describe":'test3test3test3test3',"href":'#'},
                                                  {"src":'images/4.jpg',"describe":'4444444444',"href":'#'},
                                                  {"src":'images/5.jpg',"describe":'55555555555555',"href":'#'},
                                                  {"src":'images/6.jpg',"describe":'6666666666666',"href":'#'},
                                                 {"src":'images/5.jpg',"describe":'7777777777777',"href":'#'}
                                      ]
                        }
                  });
         　       
          var p = $("p:first");
          $("#view").scrollLeft(500);
});
</script>
<div id="view" ></div>


imgScoll-1.0.rar (219.4 KB)
下载次数: 189

推荐链接
3G培训就业月薪平均7K+，不3K就业不花一分钱！
20-30万急聘多名天才Java/MTA软件工程师
见证又一个准百万富翁的诞生！