问题描述
|
我有jQuery循环插件的扩展版本,效果很好(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>
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)