重新改寫 更簡單 更易用
只是想要放上照片
只是想要自動輪播
只是想要加上圖說
只是想要自動輪播
只是想要加上圖說
| 範 例 |
|
| 1 |
請於<head>xxx</head>之間或
<body>之 後，置入下列程式： <script src="http://code.jquery.com/jquery-1.9.1.js"></script> <script src="http://lmcdwriting.org/userfiles/lmcsilver20121007/jquery.bxslider/jquery.bxslider.min.js"> </script> <link href="http://lmcdwriting.org/userfiles/lmcsilver20121007/jquery.bxslider/jquery.bxslider.css" rel="stylesheet"> |
| 2 |
請於<body>之後置入驅動程式碼： <script> $(function() { $(".bxslider").bxSlider({ captions: true, slideMargin: 5, auto: true }); }); </script> 說明： 1. 要使用圖說功能> captions: true。不要使用圖說功能> captions: false。 2. 圖片與圖片之間的距離> slideMargin: 5。 3. 圖片自動移動> auto: true。圖片不要自動移動> auto: false。 |
| 3 |
請置入要出現圖像的HTML碼： <div style="width: 480px;"> <ul class="bxslider"> <li><img title="這是圖說一" src="第一張圖片網址"></li> <li><img title="這是圖說二" src="第二張圖片網址"></li> <li><img title="這是圖說三" src="第三張圖片網址"></li> <li><img title="這是圖說四" src="第四張圖片網址"></li> </ul> </div> 說明： 1. style="width: 480px;" 這會決定整個content slide的寬度，裡面圖片的大小會自動決定。 2. title="這是圖說一" 圖說內容。這要配合上面 captions: true, 的功能打開。若是captions: false(圖說功能關閉)，即可不用寫title="xxx"。 |
沒有留言:
張貼留言