-
第06章节-Python3.5-插件轮播(轮播图插件,不重复造轮子)
打开浏览器搜索bxslider或打开(https://bxslider.com/)
或打开bxslider中文翻译网(http://www.jq22.com/jquery-info7010)
或打开(http://www.tonjay.com/401.html)[推荐阅读]
-
在(https://bxslider.com/install/)下载
image.png -
把源码解压(bxslider-4-4.2.12)到以下目录
image.png
- (bxslider-4-4.2.12)文件主要导入这两个文件如图:
image.png
image.png
- 把js, css引入如下:
image.png
- 如何使用在(http://www.jq22.com/jquery-info7010)的这里复制这块的内容如图:
image.png
image.png
这块也复制
image.png
image.png
或下载几张图片更改图片看效果
image.png
更改图片大小
- 新建s5.html文件(写一个轮播图)完整代码代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="bxslider-4-4.2.12/dist/jquery.bxslider.css">
</head>
<body>
<!--引入在这里-->
<ul class="bxslider">
<li><img src="1.jpg" /></li>
<li><img src="2.jpg" /></li>
<li><img src="3.jpg" /></li>
<li><img src="4.jpg" /></li>
</ul>
<script src="jquery-1.12.4.js"></script>
<script src="bxslider-4-4.2.12/dist/jquery.bxslider.js"></script>
<script>
$(function(){
$('.bxslider').bxSlider();
});
</script>
</body>
</html>
-
打开s5.html效果图:
image.png
