2014年3月8日 星期六

content slide：有圖說及自動播放功能




重新改寫  更簡單  更易用

只是想要放上照片
只是想要自動輪播
只是想要加上圖說

範
例
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"。

沒有留言:

張貼留言