WOWSlider - 一款效果精美的响应式图片轮播插件，有众多专业的模板。

关于WOWSlider

WOW Slider是一个基于jQuery的图片轮播插件，具有独特的视觉效果和大量漂亮的预制皮肤。 WOW Slider 可以在几秒钟内创建精美的图像滑块，无需编码和图像编辑。 如果关闭 Javascript，则可作为纯 CSS 滑块完全访问，支持触摸滑动，适用于所有浏览器和所有设备，对搜索引擎友好，代码也非常简单。 WOW jQuery Slider 体积小（压缩后 6kb），加载速度快。已经在数百万个页面上成功使用和测试，几乎没有任何错误。

如何使用WOWSlider

1、引用jQuery.js 和 wowslider.js

<!-- Start WOW Slider.com HEAD section -->
<link rel="stylesheet" type="text/css" href="engine1/style.css" />
<script type="text/javascript" src="engine1/jquery.js"></script>
<script type="text/javascript" src="engine1/wowslider.js"></script>
<!-- End WOW Slider.com HEAD section -->

因为wowslider是基于jQuery的插件，所以前提必须先引用jQuery，再引用wowslider.js

2、编写HTML

<!-- Start WOWSlider.com BODY section -->
<div id="wowslider-container">
    <div class="ws_images">
        <ul>
            <li><a href="#">
                <img src="images/slide1new.jpg" alt="" title="" id="wows_0" /></a></li>
            <li><a href="#">
                <img src="images/slide2new.jpg" alt="" title="" id="wows_1" /></a></li>
            <li><a href="#">
                <img src="images/slide3new.jpg" alt="" title="" id="wows_2" /></a></li>
        </ul>
    </div>
    <div class="ws_bullets">
        <div>
            <a href="#" title="">
                <img src="tooltips/slide1new.jpg" alt="" />1</a> <a href="#" title="">
                    <img src="tooltips/slide2new.jpg" alt="" />2</a> <a href="#" title="">
                        <img src="tooltips/slide3new.jpg" alt="" />3</a>
        </div>
    </div>
    <div class="ws_shadow">
    </div>
</div>
<!-- End WOWSlider.com BODY section -->

3、调用wowslider

<script>
    jQuery("#wowslider-container").wowSlider({
        effect: "rotate",
        prev: "",
        next: "",
        duration: 20 * 100,
        delay: 20 * 100,
        width: 580,
        height: 212,
        autoPlay: true,
        stopOnHover: false,
        loop: false,
        bullets: true,
        caption: true,
        captionEffect: "slide",
        controls: true,
        logo: "",
        images: 0
    }); 
</script>

参数说明

• effect, 参数可以用于设置wowslider的滑块效果，可以制造出不同的展示效果。

• prev, 上一页的文字

• next, 下一页的文字

• duration, 用于设置滑动动画的时长。通过调整duration参数，可以控制 滑动动画的平滑度和速度。通常，duration参数的单位是毫秒(ms)，可以根据实际需求进行调整。

• delay, 用于设置自动切换的时间间隔，单位ms

• autoPlay, 设置为true启动自动切换

• stopOnHover,设置为true鼠标浏览播放停止

• loop,循环播放

• bullets，设置为true显示分页器的小点

• caption，控制图片下方的标题或说明文字

• captionEffect，控制图片下方的标题或说明文字展示效果

• controls，设置为true 开启左右切换和分页按钮