Jjcarousellite 实现图片列表滚动的简单实例

jcarousel Lite与jcarousel 相比去掉了皮肤的约束,可以自定义的设置前后按钮和选项卡按钮,生成的html更加简洁,文件更小(2k)
下载链接:
使用方法:http://www.gmarwaha.com/jquery/jcarousellite/

代码如下:

<div class="类名">
  <ul>
    <li></li>
  </ul>
</div>

<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jcarousellite_1.0.1.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $(".类名").jCarouselLite({
            btnNext: ".next",   
            btnPrev: ".prev",
            //btnGo: [".1", ".2"], //自定义滚动位置选项卡,按照数组顺序
            //auto: 2000,            //指定多少毫秒定期自动滚动。默认为null
            //speed: 800,            //滑动的速度,可以尝试800 1000 1500
            //vertical:false,        //是否垂直滚动,默认false
            //circular:true,        //是否循环滚动,默认为true
            //visible:3,            //元素可见数量,可以为小数,如2.5为2.5个li
            //scroll:1,                //每次滚动的li数量
            //start:0,                //开始的地方,默认是0
            //beforeStart:function(){}    //滚动开始时回调的函数
            //afterEnd:function(){}        //滚动结束时回调的函数
        });
    });
</script>

(0)

相关推荐

  • Jjcarousellite 实现图片列表滚动的简单实例

    jcarousel Lite与jcarousel 相比去掉了皮肤的约束,可以自定义的设置前后按钮和选项卡按钮,生成的html更加简洁,文件更小(2k)下载链接:使用方法:http://www.gmarwaha.com/jquery/jcarousellite/ 复制代码 代码如下: <div class="类名">  <ul>    <li></li>  </ul></div> <script type=&q

  • JS实现图片的不间断连续滚动的简单实例

    js替代marquee实现图片无缝滚动 可能大家都碰到过,当marquee中滚动的是图片的时候,滚到终点的时候直接就跳回到起点了,而不像文字那样可以无缝滚动,下面介绍的是通过js来实现图片的无缝滚动. 先了解一下下面这几个属性: innerHTML: 设置或获取位于对象起始和结束标签内的 HTML scrollHeight: 获取对象的滚动高度. scrollLeft: 设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop: 设置或获取位于对象最顶端和窗口中可见内容

  • Android 获取传感器列表整理及简单实例

    Android 获取传感器列表整理及简单实例 Android 4.4 (API等级19)支持以下传感器: TYPE_ACCELEROMETER 加速度传感器,单位是m/s2,测量应用于设备X.Y.Z轴上的加速度 传感器类型值(Sensor Type):1 (0x00000001) TYPE_AMBIENT_TEMPERATURE 温度传感器,单位是℃ 传感器类型值(Sensor Type): 13 (0x0000000d) TYPE_GAME_ROTATION_VECTOR 游戏动作传感器,不收

  • JS获取IMG图片高宽的简单实例

    前段时间在LJW写的touchslider.js轮播代码里添加自适应屏幕大小的功能时,遇到一个问题.不管用什么样的方法都无法获取到IMG标签的高宽,最后只有给图片定一个高宽的比例值:趁今天有空我就写了几个demo测试了下,找了下原因:且听我细细说来,如有哪里说的不对的,欢迎拍砖--- 首先获取高宽的方法具我所知有: obj.style.width(height); obj.offsetWidth(offsetHeight); obj.clientWidth(clientHeight); getC

  • jquery 图片缩放拖动的简单实例

    一.不使用jquery,简单的缩放: 复制代码 代码如下: <HTML> <HEAD> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <TITLE>onMouseWheel</TITLE> <SCRIPT> var count = 10; function Picture() { count = Coun

  • javascript实现文字图片上下滚动的具体实例

    复制代码 代码如下: <div style="border:#d3d3d3 1px solid;width:100%;">         <div id="demo" style="overflow:hidden;height:160;width:100%;">          <div id="demo1">           文章标题列表          </div>

  • javascript实现列表滚动的方法

    本文实例讲述了javascript实现列表滚动的方法.分享给大家供大家参考.具体如下: index.html如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type&quo

  • jquery控制左右箭头滚动图片列表的实例

    复制代码 代码如下: <!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"> <head> <meta http-equiv=&qu

  • 使用JS实现图片展示瀑布流效果(简单实例)

    不知大家有没有发现,一般的图片展示网站都会使用瀑布流效果,所谓的瀑布流 就是网站内的图片不会一下子全缓存出来,而是等你滚动到一定的距离的时候, 下面的图片才会继续缓存,并且图片也是随机出现的,只是宽度一样,高度并不 一样,高高低低就像瀑布一样,所以叫做瀑布流效果.下面我把代码给大家,大家 随便下几张图片试试. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&qu

  • JS简单封装的图片无缝滚动效果示例【测试可用】

    本文实例讲述了JS简单封装的图片无缝滚动效果.分享给大家供大家参考,具体如下: <!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" lang="

随机推荐