我有jQuery cycle plugin的扩展版本,效果很好(JSFiddle)。
如何为其添加参数,以便左侧的标签可以显示在右侧?
var $output = $('#output');
var $pager = $('#tabs');
var settings = [];
var positionFromTop = [];
var pagerPaddingTop = parseInt($pager.css('padding-top'), 10);
//grab the data from the html, store it in settings, and remove
//we do this for full compatibility with cycle
$pager.children().each(function(i, value) {
var $this = $(this);
settings[i] = $this.clone();
positionFromTop[i] = $this.position().top - pagerPaddingTop;
});
$pager.empty();
function onBefore(curr, next, opts) {
$pager
.stop()
.animate({
scrollTop: positionFromTop[$(next).index()]
}, 1000);
}
(function($) {
$output.cycle({
pager: $pager,
before: onBefore,
pause: true,
pauseOnPagerHover: true,
pagerAnchorBuilder: function(i) {
return settings[i];
},
prev: $('#pager_prev'),
next: $('#pager_next')
});
})(jQuery);
#pager_wrapper {
width: 320px;
height: 240px;
}
#pager_prev,
#pager_next {
display: block;
width: 286px;
position: absolute;
z-index: 15;
height: 20px;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
border-left: 1px solid #ccc;
cursor: pointer;
}
#pager_prev {
background: #f8f8f8 url('http://png-2.findicons.com/files/icons/977/rrze/16/sort_up.png') no-repeat bottom center;
}
#pager_next {
bottom: 0;
background: #f8f8f8 url('http://png-4.findicons.com/files/icons/977/rrze/16/sort_down.png') no-repeat top center;
}
body {
background: #EEE;
font-family: "Trebuchet MS", Verdana, Arial, sans-serif;
font-size: 14px;
line-height: 1.6;
}
#content {
width: 750px;
margin: 50px auto;
padding: 20px;
background: #FFF;
border: 1px solid #CCC;
}
h1 {
margin: 0;
}
hr {
border: none;
height: 1px;
line-height: 1px;
background: #CCC;
margin-bottom: 20px;
padding: 0;
}
p {
margin: 0;
padding: 7px 0;
}
.clear {
clear: both;
line-height: 1px;
font-size: 1px;
}
a {
outline-color: #888;
}
h3 {
margin: 0;
padding: 7px 0 0 0;
font-size: 16px;
text-transform: uppercase;
}
div#feature_list {
width: 750px;
height: 240px;
overflow: hidden;
position: relative;
}
div#feature_list ul {
list-style: none;
padding: 0;
margin: 0;
}
div#feature_list ul#tabs {
position: relative;
padding-top: 22px;
left: 0;
z-index: 10;
width: 320px;
height: 196px;
overflow: hidden;
border-left: 1px solid #ccc;
}
ul#tabs li {
font-size: 12px;
font-family: Arial;
}
ul#tabs li img {
padding: 5px;
border: none;
float: left;
margin: 10px 10px 0 0;
}
ul#tabs li a {
color: #222;
text-decoration: none;
display: block;
padding: 10px;
height: 60px;
outline: none;
}
ul#tabs li a:hover {
text-decoration: underline;
}
ul#tabs li.activeSlide a {
background: url('http://jqueryglobe.com/labs/feature_list/feature-tab-current.png');
color: #FFF;
}
ul#tabs li.activeSlide a:hover {
text-decoration: none;
cursor: default;
}
ul#output {
right: 0;
width: 463px;
height: 240px;
position: absolute;
top: 0;
}
ul#output li {
position: absolute;
width: 463px;
height: 240px;
}
ul#output li a {
position: absolute;
bottom: 10px;
right: 10px;
padding: 8px 12px;
text-decoration: none;
font-size: 11px;
color: #FFF;
background: #000;
-moz-border-radius: 5px;
}
ul#output li a:hover {
background: #D33431;
}
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script src="//ajax.microsoft.com/ajax/jquery.cycle/2.99/jquery.cycle.min.js"></script>
<div id="content">
<h1>Feature List</h1>
<p>This is a demo page. Built using <a href='http://jquery.malsup.com/cycle/'>jquery cycle plug-in</a>.</p>
<hr />
<div id="feature_list">
<div id="pager_wrapper">
<span id="pager_prev"> </span>
<ul id="tabs">
<li>
<a href="javascript:;">
<img src="http://jqueryglobe.com/labs/feature_list/services.png" />
<h3>Services</h3>
<span>Lorem ipsum dolor sit amet consect</span>
</a>
</li>
<li>
<a href="javascript:;">
<img src="http://jqueryglobe.com/labs/feature_list/programming.png" />
<h3>Programming</h3>
<span>Lorem ipsum dolor sit amet consect</span>
</a>
</li>
<li>
<a href="javascript:;">
<img src="http://jqueryglobe.com/labs/feature_list/applications.png" />
<h3>Applications</h3>
<span>Lorem ipsum dolor sit amet consect</span>
</a>
</li>
<li>
<a href="javascript:;">
<img src="http://jqueryglobe.com/labs/feature_list/applications.png" />
<h3>My Tab</h3>
<span>Lorem ipsum dolor sit amet consect</span>
</a>
</li>
<li>
<a href="javascript:;">
<img src="http://jqueryglobe.com/labs/feature_list/applications.png" />
<h3>My Tab2</h3>
<span>Lorem ipsum dolor sit amet consect</span>
</a>
</li>
</ul>
<span id="pager_next"> </span>
</div>
<ul id="output">
<li>
<img src="http://jqueryglobe.com/labs/feature_list/sample1.jpg" width='463' height='240' />
<a href="#">See project details</a>
</li>
<li>
<img src="http://jqueryglobe.com/labs/feature_list/sample2.jpg" width='463' height='240' />
<a href="#">See project details</a>
</li>
<li>
<img src="http://jqueryglobe.com/labs/feature_list/sample3.jpg" width='463' height='240' />
<a href="#">See project details</a>
</li>
<li>
<img src="broken.jpg" width='463' height='240' />
<a href="#">See project details</a>
</li>
<li>
<img src="http://jqueryglobe.com/labs/feature_list/sample3.jpg" width='463' height='240' />
<a href="#">See project details</a>
</li>
</ul>
</div>
</div>