JQuery插件之圖片輪播插件–slideBox

時間 2019-11-18

原文原文鏈接

今天偶然發現了一個比較好用的圖片輪播插件—slideBoxcss

代碼以下java

   1: <!doctype html>

   2: <html>

   3: <head>

   4: <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

   5: <title>slideBox輪播插件</title>

   6: <link href="css/jquery.slideBox.css" rel="stylesheet" type="text/css" />

   7: </head>

   8: <body>

   9: <center>

  10: <h5>1、左右輪播，滾動持續0.6秒，滾動延遲3秒，滾動效果swing，初始焦點第1張，點選按鍵自動隱藏，按鍵邊框半徑（IE8-只方不圓）5px（以上各項爲默認設置值）</h3>

  11: <div id="demo1" class="slideBox">

  12:   <ul class="items">

  13:     <li><a href="http://www.ido321.com" title="標題一"><img src="./img/1.jpg"></a></li>

  14:     <li><a href="http://www.ido321.com" title="標題二"><img src="./img/0.jpeg"></a></li>

  15:     <li><a href="http://www.ido321.com" title="標題三"><img src="./img/2.png"></a></li>

  16:   </ul>

  17: </div>

  18: <h5>2、上下輪播，滾動持續0.3秒，滾動延遲5秒，滾動效果linear，初始焦點第2張，點選按鍵自動隱藏</h3>

  19: <div id="demo2" class="slideBox">

  20:   <ul class="items">

  21:    <li><a href="http://www.ido321.com" title="標題一"><img src="./img/1.jpg"></a></li>

  22:     <li><a href="http://www.ido321.com" title="標題二"><img src="./img/0.jpeg"></a></li>

  23:     <li><a href="http://www.ido321.com" title="標題三"><img src="./img/2.png"></a></li>

  24:   </ul>

  25: </div></center>

  26: <script src="js/jquery.min.js" type="text/javascript"></script>

  27: <script src="js/jquery.slideBox.min.js" type="text/javascript"></script>

  28: <script>

  29: jQuery(function($){

  30:     $('#demo1').slideBox();

  31:     $('#demo2').slideBox({

  32:         direction : 'top',//left,top#方向

  33:         duration : 0.3,//滾動持續時間，單位：秒

  34:         easing : 'linear',//swing,linear//滾動特效

  35:         delay : 5,//滾動延遲時間，單位：秒

  36:         startIndex : 1//初始焦點順序

  37:     });

  38: });

  39: </script>

  40: <div style="text-align:center;clear:both">

  41: <p>適用瀏覽器：IE八、360、FireFox、Chrome等瀏覽器</p>

  42: <p>來源：<a href="http://www.ido321.com/" target="_blank">淡忘~淺思</a></p>

  43: </div>

  44: </body>

  45: </html>

在代碼中引入了slideBox.css和slideBox.js文件。demo1用的是默認的設置，demo2是自定義設置。jquery

slide的默認設置以下瀏覽器

   1: //默認參數

   2:       var defaults = {

   3:           direction : 'left',//left,top

   4:           duration : 0.6,//unit:seconds

   5:           easing : 'swing',//swing,linear

   6:           delay : 3,//unit:seconds

   7:           startIndex : 0,

   8:           hideClickBar : true,

   9:           clickBarRadius : 5,//unit:px

  10:           hideBottomBar : false,

  11:           width : null,

  12:           height : null

  13:       };

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。