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
                width: 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