使用flexslider制作轮播图效果
  • 分享到微信朋友圈
    X
立即下载 查看演示

文章内容

FlexSlider 是一个功能强大的响应式jQuery滑块插件,它提供了一种简单而灵活的方式来创建漂亮的幻灯片展示，适用于各种网站和应用程序。

关键代码

<!DOCTYPE html  >
<html>
<head>
    <title></title>
    <script type="text/javascript" src="jquery-1.7.2.js"></script>
    <script src="jquery.flexslider-min.js"></script>
</head>
<body>
    <div class="flexslider">
        <ul class="slides">
            <li style="background: url(images/1.jpg) 100% 100% no-repeat;" title="标题一"></li>
            <li style="background: url(images/2.jpg) 100% 100% no-repeat;" title="标题二"></li>
            <li style="background: url(images/3.jpg) 100% 100% no-repeat;" title="标题三"></li>
        </ul>
    </div>
    <script>
        $(function () {
            $('.flexslider').flexslider({
                directionNav: true,
                pauseOnAction: false
            });
        });
    </script>
</body>
</html>

主要特点

  • 响应式设计：Flexslider可以自动适应不同屏幕尺寸和设备类型，确保在各种设备上都能良好地显示。

  • 自定义选项：它提供了丰富的选项，可以轻松地自定义幻灯片的外观和行为，包括动画效果、速度、自动播放、导航控制等。

  • 支持多种内容：除了图片，Flexslider还可以用于展示其他类型的内容，如视频、HTML元素等。

  • 触摸和滑动支持：它支持触摸和滑动手势，使用户可以通过滑动屏幕来浏览幻灯片。

  • 轻量级：Flexslider是一个轻量级的插件，加载速度快，对网页性能影响较小。

参数说明

$(window).load(function() {
 $('.flexslider').flexslider({
  animation: "fade",              //String: 动画效果类型, fade：淡入淡出, slide：滑动 
  slideDirection: "horizontal",   //String: 内容滚动方向，horizontal：水平方向和 vertical：垂直方向 
  slideshow: true,                //Boolean: 载入页面时，是否自动播放
  slideshowSpeed: 7000,           //Integer: 自动播放速度毫秒
  animationDuration: 600,         //Integer: 动画效果延时
  directionNav: true,             //Boolean: 是否显示左右方向箭头按钮 (true/false)
  controlNav: true,               //Boolean: 控制是否显示导航小圆点。可以设置为'true’（默认值）或'false'。
  keyboardNav: true,              //Boolean: 是否支持键盘方向键操作
  mousewheel: false,              //Boolean: 是否支持鼠标滚轮控制制图片滑动
  prevText: "Previous",           //String: 左方向箭头按钮显示文字
  nextText: "Next",               //String: 右方向箭头按钮显示文字
  pausePlay: false,               //Boolean: 是否创建暂停与播放按钮
  pauseText: 'Pause',             //String: 暂停按钮文字
  playText: 'Play',               //String: 播放按钮文字
  randomize: false,               //Boolean: 是否随即幻灯片顺序
  slideToStart: 0,                //Integer: 初始化第一次显示图片位置
  animationLoop: true,            //Boolean: 是否循环播放
  pauseOnAction: true,            //Boolean: 用户操作时停止自动播放
  pauseOnHover: false,            //Boolean: 悬停时是否暂停自动播放
  controlsContainer: "",          //Selector: 声明导航元素也应附加到哪个容器。默认容器是flexSlider元素。
  manualControls: "",             //Selector: 声明自定义控件导航。例如“.flex control nav li”或“#tabs nav li img”等。 
  manualControlEvent:"",          //String:自定义导航控制触发事件:默认是click,可以设定hover
  start: function(){},            //Callback: function(slider) - 滑块加载第一个滑块时回调函数
  before: function(){},           //Callback: function(slider) - 与每个滑块动画异步
  after: function(){},            //Callback: function(slider) - 每个滑块动画完成后触发
  end: function(){}               //Callback: function(slider) - 当滑块到达最后一个滑块时触发（异步）
  
 });
});