我希望在我的网站上使用此弹性内容滑块：http://tympanus.net/codrops/2013/02/26/elastic-content-slider/
然而，我注意到当我访问我网站的索引时，第四张幻灯片是首先显示的幻灯片。我想要的是在刷新页面时首先看到第一张幻灯片（欢迎）。我考虑过对幻灯片进行重新排序，因此欢迎幻灯片最后列在导航中，因此首先显示其内容，但我更希望找到解决此问题的更简洁的解决方案。
这是html：
<!DOCTYPE html>
<html>
<head>
<link rel="shortcut icon" href="http://i.imgur.com/q2PS7uE.png" type="image/x-icon">
<title><% TITLE %></title>
<% CSS %>
<% JAVASCRIPT %>
<script src="http://testingpoli.b1.jcink.com/uploads/testingpoli/jquery_cbpContentSlider.js"></script>
<script src="http://testingpoli.b1.jcink.com/uploads/testingpoli/jquery_cbpContentSlider_min.js"></script>
<script src="http://testingpoli.b1.jcink.com/uploads/testingpoli/modernizr_custom.js"></script>
<script src="http://elegantexpressions.us/black/cfs.min.js"></script>
<link href='http://fonts.googleapis.com/css?family=Old+Standard+TT:400,400italic' rel='stylesheet' type='text/css'>
</head>
<body>
<header>
<div id="banner">
<div id="cbp-contentslider" class="cbp-contentslider">
<ul>
<li id="slide1">
<h3 class="icon-wolf">Welcome</h3>
<div>
<div class="cbp-content">
<p>Lorem ipsum dolor sit amet, eos ex causae explicari liberavisse. Eam utamur veritus erroribus id, odio vide mel ex, vix viderer labitur ut. Cum elaboraret assueverit ea, ut sit omittam percipit patrioque. Pro in justo quidam, habeo idque pri an.</p>
</div>
</div>
</li>
<li id="slide2">
<h3 class="icon-rabbit">Rabbit</h3>
<div>
<div class="cbp-content">
<p>Chicory collard greens tatsoi cress bamboo shoot broccoli rabe lotus root earthnut pea arugula okra welsh onion leek shallot courgette. Chard garlic fava bean pea sprouts gram spinach plantain tomatillo. Chicory garlic black-eyed pea gourd chickpea cucumber lotus root.</p>
<p>Daikon artichoke gumbo azuki bean bok choy avocado winter purslane gram earthnut pea broccoli salsify squash plantain wattle seed wakame broccoli rabe bamboo shoot. Zucchini lotus root azuki bean epazote dulse pumpkin rutabaga spinach. Endive mung bean gumbo maize plantain rock melon.</p>
</div>
</div>
</li>
<li id="slide3">
<div>
<div class="cbp-content">
<p>Chicory collard greens tatsoi cress bamboo shoot broccoli rabe lotus root earthnut pea arugula okra welsh onion leek shallot courgette. Chard garlic fava bean pea sprouts gram spinach plantain tomatillo. Chicory garlic black-eyed pea gourd chickpea cucumber lotus root.</p>
<p>Daikon artichoke gumbo azuki bean bok choy avocado winter purslane gram earthnut pea broccoli salsify squash plantain wattle seed wakame broccoli rabe bamboo shoot. Zucchini lotus root azuki bean epazote dulse pumpkin rutabaga spinach. Endive mung bean gumbo maize plantain rock melon.</p>
</div>
</div>
</li>
<li id="slide4">
<div>
<div class="cbp-content">
<p>Chicory collard greens tatsoi cress bamboo shoot broccoli rabe lotus root earthnut pea arugula okra welsh onion leek shallot courgette. Chard garlic fava bean pea sprouts gram spinach plantain tomatillo. Chicory garlic black-eyed pea gourd chickpea cucumber lotus root.</p>
<p>Daikon artichoke gumbo azuki bean bok choy avocado winter purslane gram earthnut pea broccoli salsify squash plantain wattle seed wakame broccoli rabe bamboo shoot. Zucchini lotus root azuki bean epazote dulse pumpkin rutabaga spinach. Endive mung bean gumbo maize plantain rock melon.</p>
</div>
</div>
</li>
</ul>
<nav>
<a href="#slide1" class="icon-wolf"><span>Welcome</span></a>
<a href="#slide2" class="icon-rabbit"><span>Rabbit</span></a>
<a href="#slide3" class="icon-aligator"><span>Aligator</span></a>
<a href="#slide4" class="icon-turtle"><span>Turtle</span></a>
</nav>
</div>
</div>
</header>
<script type='text/javascript'>
$(document).ready(function() {
2
3
$('a[href=#top]').click(function(){
4
$('html, body').animate({scrollTop:0}, 'slow');
5
return false;
6
});
7
8
});
</script>
<script type='text/javascript'>
/**code written by kismet of RPG-Directory.com**/
$(function(){ $('#vertical-toggle').click(function(){ $('#chatter').toggle(); });});</script>
<div id="bannertable" style="text-align: center;">
<table class="toptable" cellpadding="0" cellspacing="9">
<tr>
<script>
// jQuery Modal Popups by Black
// http://code.jfbs.net/?showtopic=57
$(document).ready(function() {
var fadeBackground = $(document.createElement("div")).hide().attr("id", "fade-background"),
modalWindow = $(document.createElement("div")).hide().attr("id", "modal-window");
$(document.body).append(fadeBackground, modalWindow);
$(document).on("click", ".modal-link", function(e) {
$("#fade-background").css({ "opacity": "0.3" }).fadeIn("fast");
var newContents = $("#" + $(this).data("modal-target")).html();
$("#modal-window").html(newContents);
$("#modal-window").fadeIn("fast");
e.preventDefault();
});
$(document).on("click", "#fade-background", function() {
$("#fade-background").fadeOut("fast");
$("#modal-window").fadeOut("fast");
});
$(document).keypress(function(e) {
if(e.keyCode == 27) {
$("#fade-background").fadeOut("fast");
$("#modal-window").fadeOut("fast");
}
});
});
</script>
<div id='userlinks-bar'>
</div>
<table class="toptable" cellpadding="0" cellspacing="9">
<tbody><tr>
<td class="first" valign="top">
<h1>Welcome!</h1>
<h2>to augustine, nyc</h2>
<p>Lorem ipsum dolor sit amet, eos ex causae explicari liberavisse. Eam utamur veritus erroribus id, odio vide mel ex, vix viderer labitur ut. Cum elaboraret assueverit ea, ut sit omittam percipit patrioque. Pro in justo quidam, habeo idque pri an.
</p>
</td>
<p>
<td class="second" vAlign="top">
<div id="headerpop"><div style="position: center; padding-top: 18px;">
<a href="#" class="modal-link" data-modal-target="links">Links</a>
<a href="#" class="modal-link" data-modal-target="setting">Setting</a>
<a href="#" class="modal-link" data-modal-target="ratios">Ratios</a>
<a href="#" class="modal-link" data-modal-target="staff">Staff</a>
<a href="#" class="modal-link" data-modal-target="credits">Credits</a>
<a href="#" class="modal-link" data-modal-target="affiliates">Our Rating</a>
</div></div>
</td>
<p>
<td class="first" valign="top">
<h1>Header</h1>
<h2>subheader</h2>
<p>Lorem ipsum dolor sit amet, eos ex causae explicari liberavisse. Eam utamur veritus erroribus id, odio vide mel ex, vix viderer labitur ut. Cum elaboraret assueverit ea, ut sit omittam percipit patrioque. Pro in justo quidam, habeo idque pri an. </p>
</td>
<td class="first" valign="top">
<h1>Header</h1>
<h2>subheader</h2>
<p>Lorem ipsum dolor sit amet, eos ex causae explicari liberavisse. Eam utamur veritus erroribus id, odio vide mel ex, vix viderer labitur ut. Cum elaboraret assueverit ea, ut sit omittam percipit patrioque. Pro in justo quidam, habeo idque pri an. </p>
</td>
</tr>
</table>
</tbody>
<div id="links" class="modal-content">
<div style="background-color: #F8F8F8; border: 1px solid #efefef; padding: 20px; margin: 150px 0px 0px 130px;"><table><tbody><tr><td>
<a href="http://politeia.jcink.net/index.php?showtopic=12"><div class="linktitle2">Rules</div></a>
<a href="http://politeia.jcink.net/index.php?showtopic=11"><div class="linktitle2">Plot</div></a>
<a href="http://politeia.jcink.net/index.php?showtopic=9"><div class="linktitle2">FAQ</div></a>
<a href="http://politeia.jcink.net/index.php?showtopic=26"><div class="linktitle2">Abilities</div></a>
<a href="http://politeia.jcink.net/index.php?showtopic=10"><div class="linktitle2">Member Groups</div></a>
<a href="http://politeia.b1.jcink.com/index.php?act=Pages&pid=1"><div class="linktitle2">Timeline</div></a>
</td><td><div style="margin: 10px;">
<a href="http://politeia.jcink.net/index.php?showtopic=7"><div class="linktitle2">Application</div></a>
<a href="http://politeia.jcink.net/index.php?showtopic=6"><div class="linktitle2">Face Claims</div></a>
<a href="http://politeia.jcink.net/index.php?showtopic=27"><div class="linktitle2">Power Claims</div></a>
<a href="http://politeia.jcink.net/index.php?showtopic=5"><div class="linktitle2">Player Directory</div></a>
<a href="http://politeia.jcink.net/index.php?showforum=15"><div class="linktitle2">Adoptables</div></a>
</div>
</td></tr></tbody></table></div></div>
</div>
<div id="setting" class="modal-content">
<div style="background-color: #F8F8F8; border: 1px solid #efefef; padding: 20px; margin: 150px 0px 0px 170px; width: 400px;">
<div class="maintitle">Augustine, NYC</div><p><div style="margin-left: 40px; margin-right: 40px;"><table style="width: 400px;"><tbody><tr><td style="text-align: left;" valign="top">
Hey look more stuff.
</div>
</p></div></div>
<div id="ratios" class="modal-content">
<div style="background-color: #F8F8F8; border: 1px solid #efefef; padding: 20px; margin: 120px 0px 0px 170px; width: 400px;">
<div class="maintitle">Ratios</div><p><div style="margin-left: 40px; margin-right: 40px;">
Here there be character counts.</p><p>
doing something special here.
</tr></tbody></table>
</div>
</div></div>
<div id="staff" class="modal-content">
<div style="background-color: #F8F8F8; border: 1px solid #efefef; padding: 20px; margin: 150px 0px 0px 125px; width: 500px;"><div class="maintitle">Meet our Staff Team</div><p>
</p><center><table cellspacing="5px"><tbody><tr><td valign="top">
<a href="http://politeia.jcink.net/index.php?showuser=1"><div style="font-family: arial; font-size: 10px; text-transform: uppercase; letter-spacing: 2px; border-bottom: 1px solid #2c7367; padding: 5px; text-align: center;">Philosopher King</div></a><center><div style="color: #ababab; font-size: 9px; text-transform: uppercase; letter-spacing: 3px; padding: 3px;">Staff Account</div><p>
</p><div style="font-size: 7px; text-transform: uppercase; letter-spacing: 2px; line-height: 130%;">
Used for official business.<br>
</div></center></td>
<td valign="top">
<a href="http://politeia.jcink.net/index.php?showuser=5"><div style="font-family: arial; font-size: 10px; text-transform: uppercase; letter-spacing: 2px; border-bottom: 1px solid #2c7367; padding: 5px; text-align: center;">Kim</div></a><center><div style="color: #ababab; font-size: 9px; text-transform: uppercase; letter-spacing: 3px; padding: 3px;"><strike>Glorious</strike> Leader</div><p>
<div style="font-size: 7px; text-transform: uppercase; letter-spacing: 2px; line-height: 130%;">
<a href="http://politeia.jcink.net/index.php?showuser=4">Gene Lieber</a><br>
<a href="http://politeia.jcink.net/index.php?showuser=6">Frank Piper</a><br>
</div></center></td>
</tr></tbody></table></center>
</div>
</div>
<div id="credits" class="modal-content">
<div style="background-color: #F8F8F8; border: 1px solid #efefef; padding: 20px; margin: 90px 0px 0px 170px; width: 400px;">
<table style="width: 400px;"><tbody><tr><td style="text-align: left;" valign="top">
<div class="maintitle">Thank You!</div><p><div style="margin-left: 40px; margin-right: 40px;">Skin base credit goes to <b><a href="http://rpg-directory.com/members/bonbon.14453/">Bonbon</a></b>, who always makes beautiful stuff deserving of praise.</br>
</br>
The jQuery modal pop-ups (you're looking at one now) are by <b><a href="http://code.jfbs.net/index.php?showuser=1">Black.</a></b></br></br>
Mini-profile hover effects are courtesy of <a href="http://tympanus.net/codrops/author/alessio/"><b>Alessio Atzeni</b></a>.</br></br>
The collapsible cbox is by <a href="http://rpg-directory.com/user-2862.html"><b>kismet</b></a>, another person whose work you should check out.</div>
</td></tr></tbody></table>
</p></div></div>
<div id="affiliates" class="modal-content">
<div style="background-color: #F8F8F8; border: 1px solid #efefef; padding: 20px; margin: 150px 0px 0px 170px; width: 400px;">
<div class="maintitle">Our Rating</div><p>
</p><table style="width: 400px;"><tbody><tr><td style="text-align: left;" valign="top">
<div style="margin-left: 150px;"><a href="http://rpgrating.com"><img src="http://rpgrating.com/l3_s3_v3.gif" /></a></div>
<p>
<div style="margin-left: 40px; margin-right: 40px;">Politeia is an 18+ site geared toward mature roleplayers who can handle delicate subject matter. Here you may find frank portrayals of sexuality, drug use, and violence, as well as discussions regarding the same. Though it probably doesn't need to be said, viewer discretion is advised.
</div>
</td></tr></tbody></table>
</div></div>
<div id="wrapper">
<% BOARD HEADER %>
<div id="innerwrapper">
<div id="innerwrapper2">
<div id="navi">
<% NAVIGATION %>
</div>
<div id="board"><% BOARD %></div>
<script>
customIndex.init({
page: "<!-- |input_act| -->",
html: "<table class='mboard' width='100%' cellspacing='0' cellpadding='0'><tr><td class='mforum'><div class='mtitle'> {%link}</div><div class='mlast1'>{%marker} Last post by {%lp-author} on {%lp-date} in {%lp-title}.</div><div class='mdescrip'>{%description}</div></td><td class='mtopics'><div class='mnumber1'> {%topics}<div class='subnumber1'>topics</div> </div><div class='mnumber2'> {%replies}<div class='subnumber1'>replies</div</div></td><td class='mlast'><div class='msub'>{%subforumlist}</div></td></tr></table>",
conf: {
target: "board",
subforumSeperator: ", ",
subforumNone: "This forum has no subforums.",
addBefore: false,
addAfter: false,
dateDefault: "--",
titleDefault: "----",
authorDefault: ""
}
});
</script>
<div id="skin_selector">
<% SKIN_SELECTOR %>
</div>
</div>
<script>$('#logo a img[src="style_images/1/spacer.gif"]').replaceWith('<!-- |board_name| -->');</script>
</div>
</div>
<div style="width: 100%; margin: 10px 0px 20px 0px; padding: 5px 0px; text-align: center; font-family: helvetica, arial; font-size: 9px; text-transform: uppercase; color: #888 !important;">skin by <a href="http://rpg-directory.com/user-6143.html">bonbon</a>.</div>
<div style="width: 880px; margin: 10px auto 20px auto;"><% AFFS %></div>
<div style="width: 896px; margin: 10px auto 20px auto;"><% COPYRIGHT %><br></div>
<div id='vertical-toggle'>
<ul>
<li>C</li>
<li>b</li>
<li>o</li>
<li>x</li></ul></div>
<div id='chatter'>
<!-- BEGIN CBOX - www.cbox.ws - v001 -->
<div id="cboxdiv" style="text-align: center; line-height: 0">
<div><iframe frameborder="0" width="200" height="305" src="http://www3.cbox.ws/box/?boxid=3413631&boxtag=nlk6jw&sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain3-3413631" style="border: 0px solid;" id="cboxmain3-3413631"></iframe></div>
<div><iframe frameborder="0" width="200" height="75" src="http://www3.cbox.ws/box/?boxid=3413631&boxtag=nlk6jw&sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform3-3413631" style="border: 0px solid;border-top:0px" id="cboxform3-3413631"></iframe></div>
</div>
<!-- END CBOX -->
</div>
<script>
$(function() {
//Spoiler toggle code by Gunblaza
$(".spoiler-wrap").each(function(){
var t = this;
$(".spoiler-head input",t).click(function(){
$(".spoiler-content",t).toggle();
var isOpen = $(".spoiler-content",t).is(":visible") ? "Hide" : "Show";
$(".spoiler-head input",t).val(isOpen);
});
});
});
</script>
<div style="position:fixed; bottom: 5px; right: 5px; opacity: 1; cursor: pointer;" title="scroll back to top"><a href="#top"><img src="http://i.imgur.com/4fgSSG4.png" "width:28px; height: 28px;"></div></a>
</body>
</html>
这是我的CSS：
/*=============================================== *
* Banner
* ==============================================
*/
@font-face {
font-family: 'icomoon';
src:url('../fonts/icomoon.eot');
src:url('../fonts/icomoon.eot?#iefix') format('embedded-opentype'),
url('../fonts/icomoon.svg#icomoon') format('svg'),
url('../fonts/icomoon.woff') format('woff'),
url('../fonts/icomoon.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
/* Needed for a fluid height: */
html, body, .container, .main { height: 100%;}
/* main wrapper */
.cbp-contentslider {
height: 350px;
margin: 1em auto;
position: relative;
}
.cbp-contentslider > ul {
list-style: none;
height: 100%;
width: 100%;
overflow: hidden;
position: relative;
padding: 0;
margin: 0;
}
.cbp-contentslider > ul li {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
padding: 1em;
background: #1b1b1b;
}
/* Whithout JS, we use :target */
.cbp-contentslider > ul li:target {
z-index: 100;
}
.cbp-contentslider nav {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 3.313em;
z-index: 1000;
border-top: 1px double double double;
border-style: double double double;
border-left: none;
border-right: none;
overflow: hidden;
}
.cbp-contentslider nav a {
float: left;
display: block;
width: 20%;
height: 100%;
font-weight: 400;
letter-spacing: 0.1em;
overflow: hidden;
color: #B27A13;
background: #1b1b1b;
outline: none;
text-align: center;
line-height: 3;
position: relative;
padding-left: 3.125em;
text-transform: uppercase;
border-right: 0px solid #B27A13;
-webkit-transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out;
-moz-transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out;
transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out;
}
.cbp-contentslider nav a span {
display: block;
}
.cbp-contentslider nav a:last-child {
border: none;
}
.cbp-contentslider nav a:hover {
background-color: transparent;
color: #f8f8f8;
}
.cbp-contentslider nav a.rc-active {
background-color: #B27A13;
color: #f8f8f8;
}
/* Iconfont for navigation and headings */
.cbp-contentslider [class^="icon-"]:before,
.cbp-contentslider [class*=" icon-"]:before {
font-family: 'icomoon';
font-style: normal;
text-align: center;
speak: none;
font-weight: normal;
line-height: 2.5;
font-size: 2em;
position: absolute;
left: 10%;
top: 50%;
margin: -1.250em 0 0 0;
height: 2.500em;
width: 2.500em;
color: rgba(0,0,0,0.1);
-webkit-font-smoothing: antialiased;
}
.cbp-contentslider .icon-wolf:before {
content: "56";
}
.cbp-contentslider .icon-rabbit:before {
content: "52";
}
.cbp-contentslider .icon-turtle:before {
content: "54";
}
.cbp-contentslider .icon-platypus:before {
content: "42";
}
.cbp-contentslider .icon-aligator:before {
content: "41";
}
.cbp-contentslider [class^="icon-"].rc-active:before,
.cbp-contentslider [class*=" icon-"].rc-active:before,
.cbp-contentslider nav a:hover:before {
color: rgba(255,255,255,0.9);
}
.cbp-contentslider h3 {
font-size: 45px;
font-family: 'fine_blackboardregular';
height: 2em;
line-height: 1.7;
margin: 0 0 0.3em;
margin-top: 10px;
margin-right: 25px;
position: relative;
color: #B27A13;
text-transform: none;
text-align: right;
letter-spacing: 0.3em;
padding: 0 0.2em 0 0;
border-bottom: 1px solid #B27A13;
}
.cbp-contentslider h3[class^="icon-"]:before,
.cbp-contentslider h3[class*=" icon-"]:before {
top: 0;
left: 0;
width: 2em;
line-height: 1;
height: 1.2em;
margin: 0;
color: #B27A13;
}
.cbp-contentslider li > div {
position: absolute;
top: 9em;
bottom: 3.313em;
left: 0;
padding: 0 1em;
overflow-x: hidden;
overflow-y: auto;
}
.cbp-contentslider .cbp-content {
-webkit-column-rule: 1px solid #B27A13;
-moz-column-rule: 1px solid #B27A13;
column-rule: 1px solid #B27A13;
-webkit-column-count: 2;
-moz-column-count: 2;
-o-column-count: 2;
column-count: 2;
-webkit-column-gap: 1em;
-moz-column-gap: 1em;
-o-column-gap: 1em;
column-gap: 1em;
vertical-align: top;
padding: 1em 0;
}
.cbp-contentslider p {
color: #888;
padding: 0 0.5em 0.4em;
margin: 10px;
margin-right: 40px;
font-size: 1.2em;
font-weight: 300;
text-align: justify;
line-height: 1.6;
}
/* Media queries */
@media screen and (max-width: 70em) {
.cbp-contentslider p {
font-size: 100%;
}
}
@media screen and (max-width: 67.75em) {
.cbp-contentslider { font-size: 85%; }
.cbp-contentslider nav a[class^="icon-"]:before,
.cbp-contentslider nav a[class*=" icon-"]:before {
left: 50%;
margin-left: -1.250em;
}
.cbp-contentslider nav a span {
display: none;
}
}
@media screen and (max-width: 43em) {
.cbp-contentslider h3 {
font-size: 2em;
}
.cbp-contentslider .cbp-content {
-webkit-column-count: 1;
-moz-column-count: 1;
-o-column-count: 1;
column-count: 1;
}
.cbp-contentslider li > div {
top: 5em;
}
}
@media screen and (max-width: 25em) {
.cbp-contentslider nav a { padding: 0;}
.cbp-contentslider h3[class^="icon-"]:before,
.cbp-contentslider h3[class*=" icon-"]:before { display: none;}
}
Javascript显示在我上面给出的Codrops页面上。