您的位置：首页 > 其它

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

2016-09-28 15:30 676 查看 
<!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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航