jquery插件系列之轮播图

John Doe
2019-09-09

基于js函数库（jquery）开发轮播图插件

如果你熟悉以下基本知识，阅读起来可能会更好

  • 有一定的前端开发基础（熟悉html、css、js）
  • 有基于jquery再次开发插件的经验
    项目目录结构
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    / # 项目根目录 （本实例是 slider-by-jquery)
    ---lib
    ------jquery.js # jquery-v3.3.1 库
    ---js
    ------slider.js  # 轮播图构造器
    ---css
    ------slider.css # 主要样式
    ----images
    ------... # 轮播图片资源
    ---index.html    # 项目入口文件

实例代码（index.html）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>jQuery轮播图插件</title>
    <link rel="stylesheet" href="./css/slider.css">
</head>
 
<body>
    <div id="slider"  style="margin:50px auto"></div>
 
    <script src="./lib/jquery.js"></script>
    <script src="./js/slider.js"></script>
    <script>
        var images = new Array(15); // 轮播图片容器
        var path = './images/';
        var imgType = '.jpg';
        for (var i = 0; i < images.length; i++) {
            images[i] = path + (i + 1) + imgType;
        }
        $('#slider').sliderImg(images);
    </script>
</body>
 
</html>

 上一页

markdown