参考链接教程：
https://www.cnblogs.com/youngdze/p/3827251.htm https://www.cnblogs.com/junhaoliu/p/6084281.html
首先要引入：jquery库文件和Flexslider插件，以及Flexslider所需的基本css样式文件
<link href="//cdn.bootcss.com/flexslider/2.6.3/flexslider.min.css" rel="stylesheet">
<script src="//cdn.bootcss.com/jquery/2.2.2/jquery.min.js"></script>
<script src="//cdn.bootcss.com/flexslider/2.6.3/jquery.flexslider-min.js"></script>
轮播图结构代码
image.png
轮播图js代码
image.png
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Flexslider插件的使用</title>
<!--引入flexslider.css-->
<link href="//cdn.bootcss.com/flexslider/2.6.3/flexslider.min.css" rel="stylesheet">
<style>
.slider {
width: 1200px;
margin: 100px auto;
}
.slides img {
width: 1200px;
height: 200px;
}
</style>
</head>
<body>
<!--轮播图结构代码-->
<div class="flexslider slider">
<ul class="slides">
<li><img src="img/kitchen_adventurer_caramel.jpg" /></li>
<li><img src="img/kitchen_adventurer_cheesecake_brownie.jpg" /></li>
<li><img src="img/kitchen_adventurer_donut.jpg" /></li>
<li><img src="img/kitchen_adventurer_lemon.jpg" /></li>
</ul>
</div>
<!--引入jq-->
<script src="//cdn.bootcss.com/jquery/2.2.2/jquery.min.js"></script>
<!--引入flexslider-min.js-->
<script src="//cdn.bootcss.com/flexslider/2.6.3/jquery.flexslider-min.js"></script>
<script>
$(function(){
$('.flexslider').flexslider({
animation: 'slide', // 必备参数，自动滑动
slideshowSpeed: 2000, // 每次自动滑动间隔时间，默认为 7000，单位为 ms
animationSpeed: 1000, // 手动点击滑动时间，默认为 600，单位为 ms
//itemWidth: 900 // 定义每个 item 宽度，单位为 px，默认为 100%
slideshow: true, //载入页面时，是否自动播放
directionNav: true //是否显示左右控制按钮
})
})
</script>
</body>
</html>
效果图
image.png
网友评论