漂亮的 Jquery的图片轮播 JQuery_Sliders

效果图：

1：Head中引入这三个文件。

<script src="../js/jquery-1.9.0.min.js" type="text/javascript"></script>

<script src="../../js/slides.min.jquery.js" type="text/javascript"></script>

            <link href="../../css/jquery_sliders.css" rel="stylesheet" type="text/css" />

2：播放器的显示大小和图片的显示大小在query_sliders.css中进行

3：引入JS代码

    <script>
        $(function () {
            $('#slides').slides({
                preload: true,
                preloadImage: 'img/loading.gif',
                play: 5000,
                pause: 2500,
                hoverPause: true
            });
        });
</script>

4：html代码

  <div id="slides">
                <div class="slides_container">
                    <a href="http://www.zzjs.net" title="阿里西西广告图片" target="_blank"><img src="img/slide-1.jpg" width="570" height="270" alt="Slide 1"></a>
                    <a href="http://www.alixixi.com" title="阿里西西广告图片" target="_blank"><img src="img/slide-2.jpg" width="570" height="270" alt="Slide 2"></a>
                    <a href="http://www.alixixi.com" title="阿里西西广告图片" target="_blank"><img src="img/slide-3.jpg" width="570" height="270" alt="Slide 3"></a>
                    <a href="http://www.alixixi.com" title="阿里西西广告图片" target="_blank"><img src="img/slide-4.jpg" width="570" height="270" alt="Slide 4"></a>
                    <a href="http://www.alixixi.com" title="阿里西西广告图片" target="_blank"><img src="img/slide-5.jpg" width="570" height="270" alt="Slide 5"></a>
                    <a href="http://www.alixixi.com" title="阿里西西广告图片" target="_blank"><img src="img/slide-6.jpg" width="570" height="270" alt="Slide 6"></a>
                    <a href="http://www.alixixi.com" title="阿里西西广告图片" target="_blank"><img src="img/slide-7.jpg" width="570" height="270" alt="Slide 7"></a>
                </div>
            </div>