jQuery.autoSlider/index.html at master · wynn719/jQuery.autoSlider · GitHub

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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
<!DOCTYPE html>
<html lang="en-us">
  <head>
    <meta charset="UTF-8">
    <title>Jquery.autoslider by zhengbowei</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="stylesheets/normalize.css" media="screen">
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" type="text/css" href="stylesheets/stylesheet.css" media="screen">
    <link rel="stylesheet" type="text/css" href="stylesheets/github-light.css" media="screen">
    <script src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js"></script>
    <script src="js/jQuery.autoSlider.min.js"></script>
    <link rel="stylesheet" href="css/styles.css">
  </head>
  <body>
    <section class="page-header">
      <h1 class="project-name">Jquery.autoslider</h1>
      <h2 class="project-tagline">一个jQuery轮播插件，响应式支持，插件大小只有1.9kb哦！</h2>
      <a href="https://github.com/zhengbowei/jQuery.autoSlider" class="btn">View on GitHub</a>
      <a href="https://github.com/zhengbowei/jQuery.autoSlider/zipball/master" class="btn">Download .zip</a>
      <a href="https://github.com/zhengbowei/jQuery.autoSlider/tarball/master" class="btn">Download .tar.gz</a>
    </section>

    <section class="main-content">
      <div id="banner" class="banner">
        <ul>
            <li>
              <img src="http://zhengbowei.github.io/jQuery.autoSlider/imgs/wood1.jpg" alt="">
              <p>调整屏幕试一下</p>
            </li>
            <li>
              <img src="http://zhengbowei.github.io/jQuery.autoSlider/imgs/wood2.jpg" alt="">
              <p>Jquery.autoslider</p>
            </li>
            <li>
              <img src="http://zhengbowei.github.io/jQuery.autoSlider/imgs/wood3.jpg" alt="">
              <p><a href="https://github.com/zhengbowei">作者：Wayne Zheng</a></p>
            </li>
        </ul>
      </div>

      <h3>
<a id="如何使用" class="anchor" href="#%E5%A6%82%E4%BD%95%E4%BD%BF%E7%94%A8" aria-hidden="true"><span class="octicon octicon-link"></span></a>如何使用？</h3>

<p>1. 引入jQuery和jQuery.autoSlider文件</p>

<pre><code>&lt;!-- 注意，jQuery要在jQuery.autoSlider之前引入 --&gt;
&lt;script src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js"&gt;&lt;/script&gt;
&lt;script src="js/jQuery.autoSlider.min.js"&gt;&lt;/script&gt;
</code></pre>

<p>2. 引入HTML代码</p>

<pre><code>&lt;div class="banner"&gt;
    &lt;ul&gt;
        &lt;li&gt;我是一&lt;/li&gt;
        &lt;li&gt;我是二&lt;/li&gt;
        &lt;li&gt;我是三&lt;/li&gt;
    &lt;/ul&gt;
&lt;/div&gt;
</code></pre>

<p>3. 加入基本的css</p>

<pre><code>.banner{
    position: relative;
    margin: 0 auto;
}
.banner ul{
    padding: 0;
    margin: 0;
}
.banner li{
    list-style: none;
}
</code></pre>

<p>4. 调用插件</p>

<pre><code>$(function(){
    $('.banner').autoSlider();
});
</code></pre>

<h3>
<a id="其他" class="anchor" href="#%E5%85%B6%E4%BB%96" aria-hidden="true"><span class="octicon octicon-link"></span></a>其他</h3>

<p>1. 自定义参数设置</p>

<pre><code>$('.banner').autoSlider({
    speed: 800, // 图片显示速度
    delay: 3000, // 图片停留时间
    dots: true, // 导航（导航的样式需要重新定义）
    stay: true, // 鼠标移入停留
    fluid: true // 自适应
});
</code></pre>

<h3>
<a id="ps" class="anchor" href="#ps" aria-hidden="true"><span class="octicon octicon-link"></span></a>PS</h3>

<ul>
<li>如果遇到什么问题，一定要给作者一个issue！！！</li>
<li>如果觉得用起来不错的，给作者一个star可好~ </li>
</ul>

      <footer class="site-footer">
        <span class="site-footer-owner"><a href="https://github.com/zhengbowei/jQuery.autoSlider">Jquery.autoslider</a> is maintained by <a href="https://github.com/zhengbowei">zhengbowei</a>.</span>

        <span class="site-footer-credits">This page was generated by <a href="https://pages.github.com">GitHub Pages</a> using the <a href="https://github.com/jasonlong/cayman-theme">Cayman theme</a> by <a href="https://twitter.com/jasonlong">Jason Long</a>.</span>
      </footer>

    </section>

            <script type="text/javascript">
            var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
            document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
          </script>
          <script type="text/javascript">
            try {
              var pageTracker = _gat._getTracker("UA-59478227-3");
            pageTracker._trackPageview();
            } catch(err) {}
          </script>

  </body>
  <script>
  $(function(){
    $('.banner').autoSlider({
      speed: 800, // 图片显示速度
      delay: 3000, // 图片停留时间
      dots: true, // 导航
      stay: true, // 鼠标移入停留
      fluid: true // 自适应
    });
  });
  </script>
</html>