幻灯片插件–s3Slider

发布于，归属于jquery。 只剩下板凳啦！ 共有304人围观    

幻灯片插件

下载：s3sliderfull（内含完整示例）

使用说明：

第一步：引入JQ库与s3Slider.js

  1. <br />
  2. <script src="js/jquery.js" type="text/javascript"></script><br />
  3. <script src="js/s3Slider.js" type="text/javascript"></script><br />

第二步：建立如下的html结构

  1. </p>
  2. <div id="s3slider">
  3. <ul id="s3sliderContent">
  4. <li class="s3sliderImage">
  5.           <img src="#" /><br />
  6.           <span>Your text comes here</span>
  7.       </li>
  8. <li class="s3sliderImage">
  9.           <img src="#" /><br />
  10.           <span>Your text comes here</span>
  11.       </li>
  12. <div class="clear s3sliderImage"></div>
  13. </ul>
  14. </div>
  15. <p>

第三步：CSS样式

  1. <br />
  2. #s3slider {<br />
  3.    width: 400px; /* important to be same as image width */<br />
  4.    height: 300px; /* important to be same as image height */<br />
  5.    position: relative; /* important */<br />
  6.    overflow: hidden; /* important */<br />
  7. }</p>
  8. <p>#s3sliderContent {<br />
  9.    width: 400px; /* important to be same as image width or wider */<br />
  10.    position: absolute; /* important */<br />
  11.    top: 0; /* important */<br />
  12.    margin-left: 0; /* important */<br />
  13. }</p>
  14. <p>.s3sliderImage {<br />
  15.    float: left; /* important */<br />
  16.    position: relative; /* important */<br />
  17.    display: none; /* important */<br />
  18. }</p>
  19. <p>.s3sliderImage span {<br />
  20.    position: absolute; /* important */<br />
  21.    left: 0;<br />
  22.    font: 10px/15px Arial, Helvetica, sans-serif;<br />
  23.    padding: 10px 13px;<br />
  24.    width: 374px;<br />
  25.    background-color: #000;<br />
  26.    filter: alpha(opacity=70); /* here you can set the opacity of box with text */<br />
  27.    -moz-opacity: 0.7; /* here you can set the opacity of box with text */<br />
  28.    -khtml-opacity: 0.7; /* here you can set the opacity of box with text */<br />
  29.    opacity: 0.7; /* here you can set the opacity of box with text */<br />
  30.    color: #fff;<br />
  31.    display: none; /* important */<br />
  32.    top: 0;</p>
  33. <p>   /*<br />
  34.        if you put<br />
  35.        top: 0; -> the box with text will be shown at the top of the image<br />
  36.        if you put<br />
  37.        bottom: 0; -> the box with text will be shown at the bottom of the image<br />
  38.    */<br />
  39. }</p>
  40. <p>.clear {<br />
  41.    clear: both;<br />
  42. }<br />

第四步：初始化插件

  1. <br />
  2. $(document).ready(function() {<br />
  3.    $('#s3slider').s3Slider({<br />
  4.       timeOut: 4000<br />
  5.    });<br />
  6. });<br />

timeOut参数设置幻灯片切换时间，4000就是4秒。

（如果您喜欢这篇教程，可以通过支付宝打赏我们1元哦，拜谢！）

跟作者说两句

:wink: :twisted: :roll: :oops: :mrgreen: :lol: :idea: :evil: :cry: :arrow: :?: :-| :-x :-o :-P :-? :) :( :!: 8-O 8)

只剩下板凳了！

  1. Pingback: jquery插件大全（不断更新中） | ria之家--RIA三部曲：JQ、ext、flex

同类