Slider.js轻量级图片播放控件

Slider.js基于HTML5和CSS3实现的Slideshow

  1、Slider.js 是一个图片播放Slideshow引擎，采用jQuery、CSS3和HTML5 canvas技术实现。

  2、可以为播放的条目设置文本标题并带链接，用户可以通过分页码或向前/向后链接进行浏览。

  3、js代码开源，易懂。展示界面和交互都可以定制。

示例截图

slider.js及样式引入

<script src="../Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <link href="../Slider/css/slider.css" rel="stylesheet" type="text/css" />
    <script src="../Slider/js/jquery-1.7.2.min.js" type="text/javascript"></script>
    <script src="../Slider/js/jQuery-easing.js" type="text/javascript"></script>
    <script src="../Slider/js/jQuery-jcSlider.js" type="text/javascript"></script>

html代码

<div class="main-content">
        <div id="pic_wrap" style="display: none">
            <ul id="imgShow">
                <li>
                    <div class="middle-out">
                        <div class="middle-in">
                            <img src="../Img/Chrysanthemum.jpg" width="573" height="300" />
                        </div>
                        <div align="center" style="margin-top: 5px; padding-top: 5px;">
                            Chrysanthemum
                        </div>
                    </div>
                </li>
                 <li>
                    <div class="middle-out">
                        <div class="middle-in">
                            <img src="../Img/Desert.jpg" width="573" height="300"/>
                        </div>
                        <div align="center" style="margin-top: 5px; padding-top: 5px;">
                            Desert
                        </div>
                    </div>
                </li>
                 <li>
                    <div class="middle-out">
                        <div class="middle-in">
                            <img src="../Img/Hydrangeas.jpg" width="573" height="300"/>
                        </div>
                        <div align="center" style="margin-top: 5px; padding-top: 5px;">
                            Hydrangeas
                        </div>
                    </div>
                </li>
                 <li>
                    <div class="middle-out">
                        <div class="middle-in">
                            <img src="../Img/Jellyfish.jpg" width="573" height="300"/>
                        </div>
                        <div align="center" style="margin-top: 5px; padding-top: 5px;">
                            Jellyfish
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>

JS代码：

<script type="text/javascript">
        $(function () {
            $('#pic_wrap').jcSlider({
                loading: false,                 //预加载loading开关设置，提供true,false
                loadpic: '../Slider/img/loading.gif',     //预加载loading图片路径，相对定位,如../img/riddick.png
                play: true,                     //是否开起自动播放功能，提供true,false
                play_speed: 2000,               //自动播放速度设置，提供easing值 或 数值(mm)
                slider_btn: true,               //左右按钮开关，提供true,false
                slider_speed: 500,              //图片切换速度设置，提供easing值 或 数值(mm)
                slider_num: true,               //数字按钮开关，提供true,false
                offset: 0,                      //设置左右按钮偏移量(px)
                btn_event: 'mouseover',             //数字按钮事件设置，提供click,mouseover等
                btn_position: 'middle',         //数字按钮位置，提供left,middle,right
                num_offsetW: 0,                 //设置数字按钮的X偏移(px)
                num_offsetH: 400,               //设置数字按钮的Y偏移(px)
                scaling: false,                  //是否设置图片大小，提供true,false
                 956,                     //设置图片宽度单位(px)
                height: 300,                    //设置图片高度单位(px)        
                sliderModle: 'xScroll'
            });
            var tagli = $("#imgShow li");
            if (tagli.length > 0) {
                $('#pic_wrap').css('display', 'block');
            }
            var _w1 = $('#pic_wrap').width();
            var _w2 = $('#sliderNum').width();
            $('#sliderNum').css('left', (_w1 - _w2) / 2);
        });
    </script>

控件下载地址：http://download.csdn.net/detail/zhai123_/5982569