คือเป็น Tab menu นะคะ แต่ว่าพอลองไปแก้ๆก็ได้สไลด์ติดมาด้วย แล้วอ่านโค้ดมันไม่เป็นเท่าไหร่อ่ะค่ะ
แต่ไม่อยากได้สไลด์ข้อความในนั้น (เหมือน fade in เข้ามาอ่ะค่ะ) รบกวนช่วยบอกหน่อยนะคะว่าจะต้องเอาออกตรงไหน งงมากเลย
ขอบคุณค่ะ
หน้าแรกค่ะ Code (JavaScript)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<title>Coda-Slider 1.1.1</title>
<meta http-equiv="Content-Language" content="en-us" />
<meta name="author" content="Niall Doherty" />
<script src="jquery-1.2.1.pack.js" type="text/javascript"></script>
<script src="jquery-easing.1.2.pack.js" type="text/javascript"></script>
<script src="jquery-easing-compatibility.1.2.pack.js" type="text/javascript"></script>
<script src="coda-slider.1.1.1.pack.js" type="text/javascript"></script>
<!--
The CSS. You can of course have this in an external .css file if you like.
Please note that not all these styles may be necessary for your use of Coda-Slider, so feel free to take out what you don't need.
-->
<style type="text/css">
* { margin: 0; padding: 0 }
/* I've used a hard CSS reset above, but you should consider a more sophisticated reset, such as this one: http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/ */
p { text-align: left; margin: 15px 0 }
p, ul { font-size: 13px; line-height: 1.4em }
p a, li a { color: #39c; text-decoration: none }
p.intro { border-bottom: 1px solid #ccc; margin-bottom: 20px; padding: 20px 0 30px 0; text-align: center; width: 100% }
p#cross-links { text-align: center }
p#cross-links { border-bottom: 1px solid #ccc; margin-bottom: 30px; padding-bottom: 30px }
noscript p, noscript ol { color: #a00; font-size: 13px; line-height: 1.4em; text-align: left }
noscript a { color: #a00; text-decoration: underline }
noscript ol { margin-left: 25px; }
a:focus { outline:none }
img { border: 0 }
h3 { border-bottom: 1px solid silver; margin-bottom: 5px; padding-bottom: 3px; text-align: left }
body {
font-family: Verdana, Arial;
background: #f7f7f7 /*url("images/body-bg.png")*/ repeat-y center;
color: #000;
width: 350px;
margin: auto;
text-align: center;
padding-bottom: 20px;
}
.stripViewer .panelContainer .panel ul {
text-align: left;
margin: 0 15px 0 30px;
}
.slider-wrap { /* This div isn't entirely necessary but good for getting the side arrows vertically centered */
margin: 20px 0;
position: relative;
width: 100%;
}
/* These 2 lines specify style applied while slider is loading */
.csw {width: 100%; /*height: 460px;*/ background: #fff; overflow: scroll}
.csw .loading {margin: 200px 0 300px 0; text-align: center}
.stripViewer { /* This is the viewing window */
position: relative;
overflow: hidden;
border: 2px solid #6f189b; /* this is the border. should have the same value for the links */
margin: auto;
width: 350px; /* Also specified in .stripViewer .panelContainer .panel below */
/*height: 460px;*/
clear: both;
background: #fff;
}
.stripViewer .panelContainer { /* This is the big long container used to house your end-to-end divs. Width is calculated and specified by the JS */
position: relative;
left: 0; top: 0;
width: 100%;
list-style-type: none;
/* -moz-user-select: none; // This breaks CSS validation but stops accidental (and intentional - beware) panel highlighting in Firefox. Some people might find this useful, crazy fools. */
}
.stripViewer .panelContainer .panel { /* Each panel is arranged end-to-end */
float:left;
height: 100%;
position: relative;
width: 350px; /* Also specified in .stripViewer above */
}
.stripViewer .panelContainer .panel .wrapper { /* Wrapper to give some padding in the panels, without messing with existing panel width */
padding: 10px;
}
.stripNav { /* This is the div to hold your nav (the UL generated at run time) */
margin: auto;
}
.stripNav ul { /* The auto-generated set of links */
list-style: none;
}
.stripNav ul li {
float: left;
margin-right: 2px; /* If you change this, be sure to adjust the initial value of navWidth in coda-slider.1.1.1.js */
}
.stripNav a { /* The nav links */
font-size: 10px;
font-weight: bold;
text-align: center;
line-height: 32px;
background: #c6e3ff;
color: #6f189b;
text-decoration: none;
display: block;
padding: 0 15px;
}
.stripNav li.tab1 a { background: #e5e5e6 }
.stripNav li.tab2 a { background: #e5e5e6 }
.stripNav li.tab3 a { background: #e5e5e6 }
.stripNav li.tab4 a { background: #e5e5e6 }
.stripNav li.tab5 a { background: #e5e5e6 }
.stripNav li a:hover {
background: #e3ccee;
}
.stripNav li a.current {
background: #6f189b;
color: #fff;
}
.stripNavL, .stripNavR { /* The left and right arrows */
position: absolute;
top: 230px;
text-indent: -9000em;
}
.stripNavL a, .stripNavR a {
display: block;
height: 40px;
width: 40px;
}
.stripNavL {
left: 0;
}
.stripNavR {
right: 0;
}
/*.stripNavL {
background: url("images/arrow-left.gif") no-repeat center;
}
.stripNavR {
background: url("images/arrow-right.gif") no-repeat center;
}*/
</style>
<!-- Initialize each slider on the page. Each slider must have a unique id -->
<script type="text/javascript">
jQuery(window).bind("load", function() {
jQuery("div#slider1").codaSlider()
// jQuery("div#slider2").codaSlider()
// etc, etc. Beware of cross-linking difficulties if using multiple sliders on one page.
});
</script>
</head>
<body>
<!--<p class="intro"><noscript>
</noscript>
</p>-->
<div class="slider-wrap">
<div id="slider1" class="csw">
<div class="panelContainer">
<div class="panel" title="TEST 1">
<div class="wrapper">
<h3>TEST 1</h3>
<p>TEST TEXT</p>
<p><a href="#5" class="cross-link" title="Go to TEST 5">« Previous</a> | <a href="#2" class="cross-link" title="Go to TEST 2">Next »</a></p>
</div>
</div>
<div class="panel" title="TEST 2">
<div class="wrapper">
<h3>TEST 2</h3>
<p>TEST<br />TEST</p>
<p><a href="#1" class="cross-link" title="Go to TEST 1">« Previous</a> | <a href="#3" class="cross-link" title="Go to TEST 3">Next »</a></p>
</div>
</div>
<div class="panel" title="TEST 3">
<div class="wrapper">
<h3>TEST 3</h3>
<p>TEST<br />TEST<br />TEST</p>
<p><a href="#2" class="cross-link" title="Go to TEST 2">« Previous</a> | <a href="#4" class="cross-link" title="Go to TEST 4">Next »</a></p>
</div>
</div>
<div class="panel" title="TEST 4">
<div class="wrapper">
<h3>TEST 4</h3>
<p>TEST<br />TEST<br />TEST<br />TEST</p>
<p><a href="#3" class="cross-link" title="Go to TEST 3">« Previous</a> | <a href="#5" class="cross-link" title="Go to TEST 5">Next »</a></p>
</div>
</div>
<div class="panel" title="TEST 5">
<div class="wrapper">
<h3>TEST 5</h3>
<p>TEST<br />TEST<br />TEST<br />TEST<br />TEST</p>
<p><a href="#4" class="cross-link" title="Go to TEST 4">« Previous</a> | <a href="#1" class="cross-link" title="Go to TEST 1">Next »</a></p>
</div>
</div>
</div><!-- .panelContainer -->
</div><!-- #slider1 -->
</div><!-- .slider-wrap -->
</body>
</html>
/*
* jQuery Easing Compatibility v1 - http://gsgd.co.uk/sandbox/jquery.easing.php
*
* Adds compatibility for applications that use the pre 1.2 easing names
*
* Copyright (c) 2007 George Smith
* Licensed under the MIT License:
* http://www.opensource.org/licenses/mit-license.php
*/
eval(function(p,a,c,k,e,d){e=function(c){return(c<a?"":e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('0.C(0.1,{7:2(x,t,b,c,d){3 0.1.D(x,t,b,c,d)},5:2(x,t,b,c,d){3 0.1.6(x,t,b,c,d)},h:2(x,t,b,c,d){3 0.1.B(x,t,b,c,d)},A:2(x,t,b,c,d){3 0.1.m(x,t,b,c,d)},y:2(x,t,b,c,d){3 0.1.w(x,t,b,c,d)},v:2(x,t,b,c,d){3 0.1.u(x,t,b,c,d)},s:2(x,t,b,c,d){3 0.1.r(x,t,b,c,d)},q:2(x,t,b,c,d){3 0.1.p(x,t,b,c,d)},o:2(x,t,b,c,d){3 0.1.n(x,t,b,c,d)},8:2(x,t,b,c,d){3 0.1.l(x,t,b,c,d)},g:2(x,t,b,c,d){3 0.1.j(x,t,b,c,d)},i:2(x,t,b,c,d){3 0.1.k(x,t,b,c,d)},z:2(x,t,b,c,d){3 0.1.f(x,t,b,c,d)},e:2(x,t,b,c,d){3 0.1.a(x,t,b,c,d)},9:2(x,t,b,c,d){3 0.1.4(x,t,b,c,d)}});',40,40,'jQuery|easing|function|return|easeInOutBack|easeOut|easeOutQuad|easeIn|elasin|backinout|easeOutBack||||backout|easeInBack|elasout|easeInOut|elasinout|easeOutElastic|easeInOutElastic|easeInElastic|easeInExpo|easeInOutBounce|bounceinout|easeOutBounce|bounceout|easeInBounce|bouncein||easeInOutExpo|expoinout|easeOutExpo||expoout|backin|expoin|easeInOutQuad|extend|easeInQuad'.split('|'),0,{}))
Code (JavaScript)
/*
jQuery Coda-Slider v1.1 - http://www.ndoherty.com/coda-slider
Copyright (c) 2007 Niall Doherty
Inspired by the clever folks at http://www.panic.com/coda
Many thanks to Gian Carlo Mingati. Coda-Slider is a heavily modified version of his slideViewer, which can be found at http://www.gcmingati.net/wordpress/wp-content/lab/jquery/imagestrip/imageslide-plugin.html
Requirements:
- jQuery 1.2 ... available via http://www.jquery.com
- jQuery easing plugin (1.2) ... available via http://gsgd.co.uk/sandbox/jquery/easing/
- jQuery easing compatability plugin ... available via http://gsgd.co.uk/sandbox/jquery/easing/
- CSS included in index.html
*/
jQuery(function(){
jQuery("div.csw").prepend("<p class='loading'>Loading...<br /><img src='images/ajax-loader.gif' alt='loading...'/ ></p>");
});
var j = 0;
jQuery.fn.codaSlider = function(settings) {
settings = jQuery.extend({
easeFunc: "expoinout",
easeTime: 750,
toolTip: false
}, settings);
return this.each(function(){
var container = jQuery(this);
// Remove the preloader gif...
container.find("p.loading").remove();
// Self-explanatory...
container.removeClass("csw").addClass("stripViewer");
// Get the width of a panel, set from CSS...
var panelWidth = container.find("div.panel").width();
// panelCount gives us a count of the panels in the container...
var panelCount = container.find("div.panel").size();
// Calculate the width of all the panels when lined up end-to-end...
var stripViewerWidth = panelWidth*panelCount;
// Use the above width to specify the CSS width for the panelContainer element...
container.find("div.panelContainer").css("width" , stripViewerWidth);
// Set the navWidth as a multiple of panelCount to account for margin-right on each li
var navWidth = panelCount*2;
// Specify the current panel.
// If the loaded URL has a hash (cross-linking), we're going to use that hash to give the slider a specific starting position...
if (location.hash && parseInt(location.hash.slice(1)) <= panelCount) {
var cPanel = parseInt(location.hash.slice(1));
var cnt = - (panelWidth*(cPanel - 1));
jQuery(this).find("div.panelContainer").css({ left: cnt });
// Otherwise, we'll just set the current panel to 1...
} else {
var cPanel = 1;
};
// Create appropriate nav
container.each(function(i) {
// Create the Left and Right arrows
jQuery(this).before("<div class='stripNavL' id='stripNavL" + j + "'><a href='#'>Left</a><\/div>");
jQuery(this).after("<div class='stripNavR' id='stripNavR" + j + "'><a href='#'>Right</a><\/div>");
// Create the Tabs
jQuery(this).before("<div class='stripNav' id='stripNav" + j + "'><ul><\/ul><\/div>");
jQuery(this).find("div.panel").each(function(n) {
jQuery("div#stripNav" + j + " ul").append("<li class='tab" + (n+1) + "'><a href='#" + (n+1) + "'>" + jQuery(this).attr("title") + "<\/a><\/li>");
});
// Tab nav
jQuery("div#stripNav" + j + " a").each(function(z) {
// Figure out the navWidth by adding up the width of each li
navWidth += jQuery(this).parent().width();
// What happens when a nav link is clicked
jQuery(this).bind("click", function() {
jQuery(this).addClass("current").parent().parent().find("a").not(jQuery(this)).removeClass("current"); // wow!
var cnt = - (panelWidth*z);
cPanel = z + 1;
jQuery(this).parent().parent().parent().next().find("div.panelContainer").animate({ left: cnt}, settings.easeTime, settings.easeFunc);
});
});
// Left nav
jQuery("div#stripNavL" + j + " a").click(function(){
if (cPanel == 1) {
var cnt = - (panelWidth*(panelCount - 1));
cPanel = panelCount;
jQuery(this).parent().parent().find("div.stripNav a.current").removeClass("current").parent().parent().find("li:last a").addClass("current");
} else {
cPanel -= 1;
var cnt = - (panelWidth*(cPanel - 1));
jQuery(this).parent().parent().find("div.stripNav a.current").removeClass("current").parent().prev().find("a").addClass("current");
};
jQuery(this).parent().parent().find("div.panelContainer").animate({ left: cnt}, settings.easeTime, settings.easeFunc);
// Change the URL hash (cross-linking)...
location.hash = cPanel;
return false;
});
// Right nav
jQuery("div#stripNavR" + j + " a").click(function(){
if (cPanel == panelCount) {
var cnt = 0;
cPanel = 1;
jQuery(this).parent().parent().find("div.stripNav a.current").removeClass("current").parent().parent().find("a:eq(0)").addClass("current");
} else {
var cnt = - (panelWidth*cPanel);
cPanel += 1;
jQuery(this).parent().parent().find("div.stripNav a.current").removeClass("current").parent().next().find("a").addClass("current");
};
jQuery(this).parent().parent().find("div.panelContainer").animate({ left: cnt}, settings.easeTime, settings.easeFunc);
// Change the URL hash (cross-linking)...
location.hash = cPanel;
return false;
});
// Same-page cross-linking
jQuery("a.cross-link").click(function(){
jQuery(this).parents().find(".stripNav ul li a:eq(" + (parseInt(jQuery(this).attr("href").slice(1)) - 1) + ")").trigger('click');
});
// Set the width of the nav using the navWidth figure we calculated earlier. This is so the nav can be centred above the slider
jQuery("div#stripNav" + j).css("width" , navWidth);
// Specify which tab is initially set to "current". Depends on if the loaded URL had a hash or not (cross-linking).
if (location.hash && parseInt(location.hash.slice(1)) <= panelCount) {
jQuery("div#stripNav" + j + " a:eq(" + (location.hash.slice(1) - 1) + ")").addClass("current");
} else {
jQuery("div#stripNav" + j + " a:eq(0)").addClass("current");
}
});
j++;
});
};
Load balance : Server 04
