使用方法：
第一步 載入 Sudo Slider 需要用到的 JavaScript 檔
<!-- 使用 Google AJAX API 取得 jQuery 框架 1.8.2 min 版本 -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!-- 載入 Sudo Slider 的主程式碼 -->
<script src="../js/jquery.sudoSlider.min.js"></script>
第二步 使用 HTML 編輯展示框內容
<div id="slider" >
<ul>
<li><img src="../images/01.jpg" alt="image description"/></li>
<li><img src="../images/02.jpg" alt="image description"/></li>
<li><img src="../images/03.jpg" alt="image description"/></li>
<li><img src="../images/04.jpg" alt="image description"/></li>
<li><img src="../images/05.jpg" alt="image description"/></li>
</ul>
</div>
第三步 設計展示櫃的 CSS 樣式表
#slider {
width:696px;
}
#slider img{
border:none;
}
#slider ul, #slider li{
position:relative;
margin:0;
padding:0;
list-style:none;
display:block;
}
#slider li {
width:696px;
overflow:hidden;
}
#slider, #slider ul, #slider li {width:550px;}
#slider {float:left;}
#slidemenu {width:146px;height:190px;background:grey;float:left;overflow:hidden;}
#slidemenu ul{margin: 0;padding: 0;list-style-type: none;font-weight: bold;}
#slidemenu ul li{float:left;display:block;position:relative;height:63px;width:146px;background:#5DC9E1;margin-right:15px;border-bottom:1px solid white;}
#slidemenu ul li a{z-index:40; float: left;text-decoration: none;color: #FFF;background: transparent;position:relative;padding:17px 0 0 20px;font-size:25px;}
#slidemenu ul li .hover{height:63px;position:absolute;width:146px;z-index:20; background: #333 url('../images/hover.png') repeat-x;padding:0;}
#slidemenu ul li.currentone{border:0;}
第四步 寫入 Sudo Slider 的 JavaScript 設定
$(function(){
var oldt = 0;
var sudoSlider = $("#slider").sudoSlider({
ajax: [
'../images/01.jpg',
'../images/02.jpg',
'../images/03.jpg',
'../images/04.jpg',
'../images/05.jpg'
],
prevNext:true,
beforeAniFunc: function(t){
var scroll = -t+2;
if (scroll == 1) scroll = 0;
if (scroll < -2) scroll = -2;
var scroll = scroll * $('.custom').eq(0).outerHeight(true);
var diff = Math.sqrt(Math.abs(oldt-t));
var speed = parseInt(diff*800);
$('#slidemenu ul').animate(
{ marginTop: scroll },
{
queue:false,
duration:speed
}
);
var substract = $('#slidemenu ul').offset();
var posi = $('#slidemenu ul li').eq(t-1).offset();
var topvari = posi.top - substract.top;
$('#slidemenu ul li.currentone').animate({
marginTop: topvari
}, speed);
oldt = t;
},
customLink: '.custom'
});
});
附上 Sudo Slider 可修改參數
$(function(){
$("元素名稱").sudoSlider({
prevNext: true, // 是否顯示上下頁,依然會顯示自訂的按鈕
prevHtml: '<a href="#" class="prevBtn"> previous </a>',
// 前一頁的 HTML
nextHtml: '<a href="#" class="nextBtn"> next </a>',
// 下一頁的 HTML
controlsShow: true, // 是否顯示控制項
controlsAttr: 'id="controls"', // 控制項的位置
controlsFadeSpeed: '400', // 控制項動畫的速度可設定為 slow,normal,fast或數字單位毫秒
controlsFade: true, // 當到達滑塊的終點選單是否消失
insertAfter: true, // 是否將控制項的內容插到內容之後
firstShow: false, // 是否顯示一個按鈕連結到第一張圖
firstHtml: '<a href="#" class="firstBtn"> first </a>',
// 顯示一個按鈕連結到第一張圖的 HTML
lastShow: false, // 是否顯示一個按鈕連結到最後一張圖
lastHtml: '<a href="#" class="lastBtn"> last </a>',
// 顯示一個按鈕連結到最後一張圖的 HTML
numericAttr: 'class="controls"', // 數字控制項的元素
numericText: [], // 數字顯示的陣列
vertical: false, // 是否為垂直顯示
speed: '800', // 動畫的速度可設定為 slow,normal,fast或數字單位毫秒
ease: 'swing', // 動畫的類型
auto: false, // 是否自動撥放
pause: '2000', // 自動撥放間隔時間單位為毫秒
continuous: false, // 滑塊是否為連續
numeric: false, // 是否顯示數字控制
updateBefore: false, // 動畫結束後才能使用更換下一張
history: false, // 是否紀錄幻燈片
speedhistory: '400', // 紀錄的時間間隔
autoheight: true, // 是否自動調整高度
autowidth: true, // 是否自動調整寬度
customLink: false, // 是否自訂義連結
fade: false, // 是否使用滑塊動畫
crossFade: true, // 是否使用漸層
fadespeed: '1000', // 滑塊撥放的速度單位為毫秒
ajax: false, // 是否使用 AJAX 取得資料
loadingText: false, // 讀取中文字
preloadAjax: false, // 等待時間讀取 AJAX
startSlide: false, // 定義一開始顯示的張數
ajaxLoadFunction: false, // 讀取中執行函式
beforeAniFunc: false, // 動畫前執行函示
afterAniFunc: false, // 動畫後執行函示
uncurrentFunc: false, // 非作用中的滑塊執行
currentFunc: false, // 作用中的滑塊執行
slideCount: 1, // 一次顯示數量
moveCount: 1, // 一次滑動數量
responsive: false // 自動調整大小
});
});
作者網站：http://webbies.dk/SudoSlider/
檔案大小：357 KB (包含範例)
檔案下載：http://webbies.dk/assets/files/SudoSlider/SudoSlider.zip
檔案備份：下載
0 意見