JQuery图片滚动展示组件1_jCarouselLite图片滚动展示使用

一、jCarouselLite 组件

源码地址：

https://github.com/ganeshmax/jcarousellite

在线demo地址：

http://www.gmarwaha.com/jquery/jcarousellite/demo.php

扩展演示：

https://demo.lanrenzhijia.com/2013/pic2678/

使用注意事项：

1.当前组件是老版本的封装，Jquery的版本需要时1.xxx

2.依赖jquery.easing-1.3.js 动画库

3.特点扩展性强

二、使用步骤

1.引用css，js

   <link rel="stylesheet" media="all" type="text/css" href="style/style-demo.css">
    <script src="./script//jquery-1.11.1.js"></script>
    <script src="script/jquery.easing-1.3.js"></script>
    <script src="script/jquery.jcarousellite.js"></script>

2.组织html结构

    <div id="jcl-demo">
        <div class="custom-container widget">
            <div class="mid">
                <img src="image/1.jpg" alt="1">
            </div>
            <a href="#" class="prev">&lsaquo;</a>
            <div class="carousel">
                <ul>
                    <li><img src="http://beijing.gongjuji.net/imgdata/big/50577333-ce2b-4591-b5fb-50dafd8fc432.jpg"></li>
                    <li><img src="image/2.jpg"></li>
                    <li><img src="image/3.jpg"></li>
                    <li><img src="image/4.jpg"></li>
                    <li><img src="image/5.jpg"></li>
                    <li><img src="image/6.jpg"></li>
                    <li><img src="image/7.jpg"></li>
                    <li><img src="image/8.jpg"></li>
                    <li><img src="image/9.jpg"></li>
                    <li><img src="image/10.jpg"></li>
                    <li><img src="image/11.jpg"></li>
                </ul>
            </div>
            <a href="#" class="next">&rsaquo;</a>
            <div class="clear"></div>
        </div>
    </div>

3. js绑定

    <script type="text/javascript">
        $(function () {
            $(".widget .carousel").jCarouselLite({
                btnNext: ".widget .next",
                btnPrev: ".widget .prev",
                speed: 800,
                easing: "easeOutBack"
            });
            $(".widget img").click(function () {
                $(".widget .mid img").attr("src", $(this).attr("src")).hide().fadeIn('slow');
            })
        });
    </script>

三、展示效果：

更多：

Jquery 事件绑定使用整理 

jquery.fancybox图片预览组件使用整理_fancyBox3使用整理

JS 自定义实现数字滚动处理