*YouTube 教學頻道* *影像布落格*
首頁
初學者技能教案專區
布落格寫作
數位影音敘事專題寫作
西洋哲學史導讀
老子探義導讀
《論語》小談
flickr圖像集

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

沒有留言:

張貼留言