jquery flexslider轮播

最新推荐文章于 2024-10-18 11:14:09 发布

Smallmouse96

最新推荐文章于 2024-10-18 11:14:09 发布

阅读量448

点赞数

文章标签： jquery

本文链接：https://blog.csdn.net/Smallmouse96/article/details/106090202

版权

本文详细介绍了如何使用Flexslider实现轮播图效果，包括HTML结构、CSS样式及JavaScript配置，提供了完整的代码示例，并解释了Flexslider的参数设置，如动画效果、滑动方向等。

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

引用jquery;flexslider;

关于flexslider的使用使用前往http://www.woothemes.com/flexslider/，包括flexslider的样式表

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title>轮播</title>
    </head>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        body {
            font: normal 12px "Microsoft Yahei", arial, helvetica, clean, sans-serif;
            color: #333333;
        }
        fieldset, img {
            border: 0;
        }
        img {
            height: 500px;
        }
        .container {
            margin: 0 auto;
            width: 1000px;
            padding: 0;
        }
        
        .left {float: left;}
        .right {float: right;}
        .demo_15 .flexslider_demo_15 {
            height: 520px;
        }
    </style>
    <!-- 引入滚动条插件样式 -->
    <!-- 引入jq -->
    <script type="text/javascript" src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <!-- 引入幻灯片插件flexslider.js/flexslider.css下载地址：http://www.woothemes.com/flexslider/ -->
    <link rel="stylesheet" type="text/css" href="./flexslider.css" />
    <script type="text/javascript" src="./jquery.flexslider-min.js"></script>
    
    <script type="text/javascript">
        jQuery.noConflict();
        (function($) {
            $(document).ready(function() {
                $('.demo_15 .flexslider_demo_15').flexslider({
                    animation: "slide",
                    controlNav: true,
                    slideshow: false,
                    directionNav: true,
                    prevText: "",
                    nextText: ""
                });
            });
        })(jQuery);
    </script>
    <body>
        
        <!--轮播-->
        <div class="container">
            <div class="demo demo_15">
                <div class="demo_c">
                    <!-- 轮播内容开始 -->
                    <div class="flexslider flexslider_demo_15">
                        <ul class="slides">
                            <li>
                                <a href="javascript:;">
                                    <img src="https://www.baidu.com/img/flexible/logo/pc/result.png" />
                                </a>
                                <div class="bottom">
                                    <div class="left">
                                            <p>第<span>01</span>张</p>
                                    </div>
                                    <div class="right">
                                        <a href="javascript:;">百度1</a>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <a href="javascript:;">
                                    <img src="https://www.baidu.com/img/flexible/logo/pc/result.png" />
                                </a>
                                <div class="bottom">
                                    <div class="left">
                                        <p>第<span>02</span>张</p>
                                    </div>
                                    <div class="right">
                                        <a href="javascript:;">百度2</a>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <a href="javascript:;">
                                    <img src="https://www.baidu.com/img/flexible/logo/pc/result.png" />
                                </a>
                                <div class="bottom">
                                    <div class="left">
                                        <p>第<span>03</span>张</p>
                                    </div>
                                    <div class="right">
                                        <a href="javascript:;">百度3</a>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <!-- 轮播内容结束-->
                </div>
            </div>
        </div>
    </body>

</html>

Flexslider选项设置
参数	描述	默认值
animation	动画效果类型，有"fade"：淡入淡出，"slide"：滑动	"fade"
easing	内容切换时缓动效果，需要jquery easing插件支持	"swing"
direction	内容滚动方向，有"horizontal"：水平方向和"vertical"：垂直方向	"horizontal"
animationLoop	是否循环滚动	true
startAt	初始滑动时的起始位置，定位从第几个开始滑动	0
slideshow	是否自动滑动	true
slideshowSpeed	滑动内容展示时间(ms)	7000
animationSpeed	内容切换时间(ms)	600
initDelay	初始化时延时时间	0
pauseOnHover	鼠标滑向滚动内容时，是否暂停滚动	false
touch	是否支持触摸滑动	true
directionNav	是否显示左右方向箭头按钮	true
keyboard	是否支持键盘方向键操作	true
minItems	一次最少展示滑动内容的单元个数	1
maxItems	一次最多展示滑动内容的单元个数	0
move	一次滑动的单元个数	0
回调函数	start: function(){}, before: function(){}, after: function(){}, end: function(){}, added: function(){}, removed: function(){}, init: function(){},