轮播图切换效果（flexslider插件）实现

最新推荐文章于 2022-03-14 15:26:47 发布

靳小霞

最新推荐文章于 2022-03-14 15:26:47 发布

阅读量1.8k

点赞数

分类专栏： JQuery JS

本文链接：https://blog.csdn.net/u012493556/article/details/52690909

版权

JS 同时被 2 个专栏收录

15 篇文章 0 订阅

订阅专栏

JQuery

14 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>图片切换效果</title>
    <link href="flexslider.css" rel="stylesheet" type="text/css">
</head>
<body>
    <div class="flexslider">

      <ul class="slides">
        <li style="width:300px;height:300px"><img src="10.jpg"  style="width:280px;height:280px" ></li>
         <li style="width:300px;height:300px"><img src="9.jpg"  style="width:280px;height:280px" ></li>
         <li style="width:300px;height:300px"><img src="8.jpg"  style="width:280px;height:280px" ></li>
         <li style="width:300px;height:300px"><img src="7.jpg"  style="width:280px;height:280px" ></li>
        <li style="width:300px;height:300px"><img src="6.jpg"  style="width:280px;height:280px" ></li>
      </ul>

   </div>
</body>
<script type="text/javascript" src="jquery.min.js"></script>
<script src="jquery.flexslider-min.js"></script>
<script type="text/javascript">
  $(function() {
      $(".flexslider").flexslider({

          slideshowSpeed: 4000, //展示时间间隔ms

          animationSpeed: 400, //滚动时间ms

          touch: true //是否支持触屏滑动

      });

    });
</script>

</html>

靳小霞

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
轮播图切换效果（flexslider插件）实现

<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>图片切换效果</title> <link href="flexslider.css" rel="stylesheet" type="text/css"></head><body> <div class="flexslider"> <ul
复制链接

扫一扫

专栏目录