flexslider图片轮播

最新推荐文章于 2023-10-17 16:36:23 发布

forever_ss

最新推荐文章于 2023-10-17 16:36:23 发布

阅读量472

点赞数

CC 4.0 BY-SA版权

分类专栏： web 前端文章标签： jquery flexslider

本文链接：https://blog.youkuaiyun.com/forever_ss/article/details/51563971

web 前端专栏收录该内容

7 篇文章

订阅专栏

这篇博客介绍了如何利用Flexslider库结合jQuery创建图片轮播效果。提供了Flexslider的CSS和JS文件下载链接，并强调在引入JS之前需先引入jQuery。

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

flexslider css以及js的网盘地址：http://pan.baidu.com/s/1jI6imzW，在加入flexslider的js前加入jquery

代码块

<link rel="stylesheet" href="./css/flexslider.css" type="text/css" media="screen" />
<script type="text/javascript" src="./js/jquery-1.11.2.min.js"></script>
<script  src="./js/jquery.flexslider.js"></script>

-页面代码

<div>
    <section class="slider">
        <div class="flexslider">
            <ul class="slides"> 
                <li> <img src="1.png" /></li>
                <li> <img src="1.png" /></li>
                <li> <img src="1.png" /></li>
            </ul>
        </div>
    </section> 
</div>
<script type="text/javascript">
$(window).load(function(){
    $('.flexslider').flexslider({
      animation: "slide",

    });
  });
</script>