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

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>

时间: 2024-11-02 00:02:55

Jjcarousellite 实现图片列表滚动的简单实例_javascript技巧的相关文章

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

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

javascript实现文字图片上下滚动的具体实例_javascript技巧

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

原生JS实现图片轮播与淡入效果的简单实例_javascript技巧

最近对css的兴趣提不起来,因为以前对图片轮播一直耿耿于怀苦于学艺不精,所以,花了点时间熟悉了一下js.然后一条道走到黑,用jquery和js写了一下轮播和图片淡入的效果.以后学习的路很长,希望自己在前端的路上越走越远`(∩_∩)′ 从原理来讲,网上的教程有很多,简单来说. 淡入淡出,其实这里只用到了淡入的效果.每一张淡入的图片,我们将它的display设置为block,其他为none,所以实际存在并且在文档流占位置的只有一张图片.在设置图片的display方式之前,将图片的透明度逐渐增大,就会

js实现目录链接,内容跟着目录滚动显示的简单实例_javascript技巧

如下所示: <script> require(["jquery", "bootstrap"], function($) { $(function() { $('.left').height(($('body').height() > $(window).height()) ? $('body').height() : $(window).height()); }); var goTo = $(".con"); var guide

js不间断滚动的简单实现_javascript技巧

CSS: ul, li { margin: 0; padding: 0; } #scrollDiv { width: 300px; height: 25px; line-height: 25px; border-bottom: #4c8cd1 1px solid; overflow: hidden; } #scrollDiv li { height: 25px; padding-left: 10px; } JS: <script> function AutoScroll(obj) { $(ob

jstree的简单实例_javascript技巧

最近使用到了jstree,感觉是一款灵活的.可多项定制的tree插件: 我这边使用过程记录下: 参考的jstree api网站,以及demo介绍: https://www.jstree.com/api/ jstree api github: https://github.com/vakata/jstree 使用中的例子介绍: html代码: <!-- 搜索框 --> <div class="search_input"> <input type="

js实现table添加行tr、删除行tr、清空行tr的简单实例_javascript技巧

如下所示: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author"

JavaScript实战(原生range和自定义特效)简单实例_javascript技巧

今天我又码了两个特效:一个是用原生input[type=range]的,另一个完全自定义的:下面是完整代码和演示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> #tip{ position: absolute; top: 30px; left: 0; ri

js 上传文件预览的简单实例_javascript技巧

1. FILE API html5提供了FIle和FileReader两个方法,可以读取文件信息并读取文件. 2. example <html> <body> <div id="test-image-preview" style="border: 1px solid rgb(204, 204, 204); width: 100%; height: 200px; background-size: contain; background-repeat