1、jQuery插件之bxSlider幻灯片插件

最新推荐文章于 2018-05-14 09:20:36 发布

原创最新推荐文章于 2018-05-14 09:20:36 发布 · 942 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #jquery插件 #幻灯片

jQuery 专栏收录该内容

21 篇文章

订阅专栏

本文展示了如何利用jQuery bxSlider插件创建一个带有淡入淡出动画、自动播放和暂停功能的幻灯片。通过引入必要的JS和CSS文件，设置图片列表，并在文档加载完成后初始化bxSlider，实现幻灯片展示。官网提供了更多详细配置选项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
        <script src="jquery.min.js"></script>
        <script src="jquery.bxslider.min.js"></script>
        <link href="jquery.bxslider.min.css" rel="stylesheet" />
        <style>
           img{
            width: 100%;
           }
        </style>
    </head>
    <body>
    <ul class="bxslider">
        <li><img src="picto.png" /></li>
        <li><img src="houses.jpg" /></li>
        <li><img src="hillside.jpg" /></li>
    </ul>
    </body>
    <script>
        $(document).ready(function(){
            $('.bxslider').bxSlider({
                'speed':500,
                'mode':'fade',
                'auto':true,
                'pause':2000,
                'autoHover': true
            });
        });
    </script>

</html>

可以参考官网:http://bxslider.com/

效果: