jQuery市面上很多slider，不過大部分不是無窮迴圈，就是到底就停
因應公司美術需求，開發了一套自己的slider，有幾個特點如下
使用範例
原始碼
範例網站：http://www.drama.com.tw/jquery/slider.html
下載位置：http://www.drama.com.tw/jquery/js/jquery.dramaSlider.js
因應公司美術需求，開發了一套自己的slider，有幾個特點如下
- 判斷最後位置補差額，很多slider假設1頁可以滾動2個，如果實際滾動內容只有5個的話，那第3頁會變成只有剩下一個物件的情況，此Plugin會自動判斷補位。
- 可設定頁數導覽。
- 可選擇垂直或者是水平。
$('#nav').dramaSlider({
navA: '#left', // 往左或下按鈕（必填）
navB: '#right', // 往右或上按鈕（必填）
nav: '#guide', // 頁數導覽
direction: 'vertical', // 垂直（vertical）或水平（horizontal）（預設水平）
opacity: 0.3, // 按鈕的透明度（預設0.5，1最大、0最小）
speed: 500 // 滾動速度（預設500）
});
使用範例
<br /><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br /><html xmlns="http://www.w3.org/1999/xhtml"><br /><head><br /><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br /><title>slider</title><br /><style type="text/css"><br />body {<br /> font-size: 11px;<br />}<br />#nav {<br /> width: 204px;<br /> height: 100px;<br /> overflow: hidden;<br /> position: relative;<br /> border: 1px solid blue;<br />}<br />ul {<br /> position: relative;<br /> list-style: none;<br /> margin: 0;<br /> padding: 0;<br />}<br />li {<br /> float: left;<br /> width: 100px;<br /> height: 100px;<br /> text-align: center;<br /> background: red;<br /> margin: 0 2px 0 0;<br />}<br /></style><br /><script type="text/javascript" src="js/jquery-1.3.2.min.js"></script><br /><script type="text/javascript" src="js/jquery.dramaSlider.js"></script><br /></head><br /><br /><body><br /><div id="nav"><br /> <ul><br /> <li>1</li><br /> <li>2</li><br /> <li>3</li><br /> <li>4</li><br /> <li>5</li><br /> </ul><br /></div><br /><div style="clear: both;"></div><br /><div id="guide"></div><br /><a id="left" href="#">Left</a> <a href="#" id="right">Right</a><br /><script><br />$(function() {<br /> $('#nav').dramaSlider({<br /> navA: '#left',<br /> navB: '#right',<br /> nav: '#guide'<br /> }); <br />});<br /></script><br /></body><br /></html><br />原始碼
<br />/*<br />* Drama Slider<br />* 編輯日期: 2009-10-30<br />* 作者: David<br />* Email: chan15tw@gmail.com<br />*/<br />(function() {<br /> $.fn.dramaSlider = function($opts) {<br /> var $defaults = {<br /> navA: '',<br /> navB: '',<br /> direction: 'horizontal',<br /> speed: 500,<br /> opacity: 0.5,<br /> nav: ''<br /> },<br /> $set = $.fn.extend($defaults, $opts),<br /> $page = 1; // 起始頁數<br /> if ($set.navLeft == '' || $set.navRight == '') {<br /> alert('請設定按鈕');<br /> return false;<br /> }<br /> return this.each(function() {<br /> var $li = ($set.direction == 'horizontal') ? $(this).find('li:first').outerWidth(true) : $(this).find('li:first').outerHeight(true), // 單一li寬度<br /> $ul = $(this).find('ul:first'), // 移動區塊<br /> $liAmount = $(this).find('li').size(), // li數量<br /> $liPerPage = ($set.direction == 'horizontal') ? Math.round($(this).outerWidth() / $li) : Math.round($(this).outerHeight() / $li), // 每頁數量<br /> $totalPage = Math.ceil($liAmount / $liPerPage), // 總頁數<br /> $liLeft = $liAmount % $liPerPage == 0 ? $liLeft = $liPerPage : $liAmount % $liPerPage, // 遞補數量<br /> $btnA = $($set.navA).css('opacity', $set.opacity), // 往左或下按鈕<br /> $btnB = $($set.navB); // 往右或上按鈕<br /> guide();<br /> switch ($set.direction) {<br /> case 'horizontal':<br /> $(this).find('ul').width(9999);<br /> break;<br /> case 'vertical':<br /> $(this).find('ul').height(9999);<br /> break;<br /> }<br /> <br /> // 往右或上按鈕<br /> $btnB.click(function() {<br /> if ($liAmount > $liPerPage) {<br /> if ($page != $totalPage) {<br /> if (($page + 1) == $totalPage) {<br /> if ($page == 1) $btnA.fadeTo('normal', 1);<br /> switch ($set.direction) {<br /> case 'horizontal':<br /> $ul.animate({left: '+=' + ($li * $liLeft * -1)}, $set.speed);<br /> $(this).fadeTo('normal', $set.opacity);<br /> $page++;<br /> break;<br /> case 'vertical':<br /> $ul.animate({top: '+=' + ($li * $liLeft * -1)}, $set.speed);<br /> $(this).fadeTo('normal', $set.opacity);<br /> $page++;<br /> break;<br /> }<br /> guide();<br /> } else {<br /> if ($page == 1) $btnA.fadeTo('normal', 1);<br /> switch ($set.direction) {<br /> case 'horizontal':<br /> $ul.animate({left: '+=' + ($li * $liPerPage * -1)}, $set.speed);<br /> $page++;<br /> break;<br /> case 'vertical':<br /> $ul.animate({top: '+=' + ($li * $liPerPage * -1)}, $set.speed);<br /> $page++;<br /> break;<br /> }<br /> guide();<br /> }<br /> }<br /> }<br /> return false;<br /> });<br /> <br /> // 往左或下按鈕<br /> $btnA.click(function() {<br /> if ($page != 1) {<br /> if ($page == $totalPage) {<br /> if ($page == $totalPage) $btnB.fadeTo('normal', 1);<br /> if ($page - 1 == 1) $(this).fadeTo('normal', $set.opacity);<br /> switch ($set.direction) {<br /> case 'horizontal':<br /> $ul.animate({left: '+=' + ($li * $liLeft)}, $set.speed);<br /> $page--;<br /> break;<br /> case 'vertical':<br /> $ul.animate({top: '+=' + ($li * $liLeft)}, $set.speed);<br /> $page--;<br /> break;<br /> }<br /> guide();<br /> } else {<br /> if ($page == $totalPage) $btnB.fadeTo('normal', 1);<br /> if ($page - 1 == 1) $(this).fadeTo('normal', $set.opacity);<br /> switch ($set.direction) {<br /> case 'horizontal':<br /> $ul.animate({left: '+=' + ($li * $liPerPage)}, $set.speed);<br /> $page--;<br /> break;<br /> case 'vertical':<br /> $ul.animate({top: '+=' + ($li * $liPerPage)}, $set.speed);<br /> $page--;<br /> break;<br /> }<br /> guide();<br /> }<br /> }<br /> return false;<br /> });<br /> <br /> // page navigator<br /> function guide() {<br /> if ($set.nav != '') {<br /> $($set.nav).html($page + '/' + $totalPage);<br /> }<br /> }<br /> });<br /> }<br />})(jQuery);<br />範例網站：http://www.drama.com.tw/jquery/slider.html
下載位置：http://www.drama.com.tw/jquery/js/jquery.dramaSlider.js
沒有留言:
張貼留言