我想修改一个基于Ennui Design's slider的jQuery幻灯片，以获得一个图标或缩略图列表，这些图标或缩略图可以提供以下帧内容的小预览以及跳转到该特定幻灯片的选项，或者带有this slideshow
预览的项目符号列表如果能够通过查看jQuery插件或者需要在下面的jquery脚本中修改内容来指导我如何实现这一目标，我将不胜感激。
我尝试使用此代码
汇总它的样本(function($){
$(function(){
$('#nav>li>a').hover(
function(){
$(this).stop(1);
$(this).animate({'background-position':'0px 0'});
},
function(){
$(this).stop(1);
$(this).animate({'background-position':'-140px 0'});
}
)
$('.boxgrid').each(function(){
var $caption = $(this).find('span.boxcaption');
var pheight = $(this).height();
$caption.css('top', pheight );
$(this).hover(
function(){
$caption.stop(1);
$caption.animate({ top: pheight - $caption.height() });
},
function(){
$caption.stop(1);
$caption.animate({ top: pheight })
}
)
});
});
})(jQuery);
如果我在使用prev / next按钮和预览拇指之间切换，我会遇到多个错误：
如果我使用预览拇指
最后一张幻灯片下一个控件提供一张空幻灯片，
页面的URL显示页面末尾的哈希值（例如 - testing.com/example.cfm#s1），然后prev / next按钮无法访问任何幻灯片
预览拇指，如果单击几次，将开始显示一个项目的文本和另一个项目的图像幻灯片（两个幻灯片框架的50/50。
我已经包含了以下html代码的基础：
<!---html page code --->
<div id="s">
<div class="bullets">
<div>
<a href="#s0" title=" "><img src="images/1/tooltips/0.jpg" alt=" "/>1</a>
<a href="#s1" title=" "><img src="images/1/tooltips/1.jpg" alt=" "/>2</a>
<a href="#s2" title=" "><img src="images/1/tooltips/2.jpg" alt=" "/>3</a>
<div class="bullet-frame" style="display: none; left: 24px; opacity: 0; top:20px;">
<div> <!--- blank div --->
<div style="width: 900px; left: 0px;">
<img alt=" " src="images/1/tooltips/0.jpg">
<img alt=" " src="images/1/tooltips/1.jpg">
<img alt=" " src="images/1/tooltips/2.jpg">
</div> <!--- div style width 1100% --->
</div> <!--- blank div END --->
<span></span>
</div> <!--- bullet-frame --->
<div class="ws_shadow"></div>
</div>
</div>
</div> <!--- end preview thumbs --->
<!--- start slideshow --->
<div id="one" class="contentslider">
<div class="cs_wrapper">
<div class="cs_slider">
<!--- s0 --->
<div class="cs_article" id="s0">
<h2>s0 slide</h2>
<div id="main_view10">
<a href="#"> <img src="images/images/0010.png" alt=" "/></a>
</div>
<p>sample text</p>
<div class="container">
<ul class="thumb10">
<li><a href="images/images/0010_a.png"><img src="images/images/thumb00101.jpg" alt="" /></a></li>
<li><a href="images/images/0010_b.jpg"><img src="images/images/thumb00102.jpg" alt="" /></a></li>
</ul>
</div>
<p> <a href=" " class="readmore" target="_blank">Visit site</a></p>
</div>
<!--- End s0 --->
<!--- s1 --->
<div class="cs_article" id="s1">
<h2>s1 slide</h2>
<div id="main_view10">
<a href="#"> <img src="images/images/0010.png" alt=" "/></a>
</div>
<p>sample text</p>
<div class="container">
<ul class="thumb10">
<li><a href="images/images/0010_a.png"><img src="images/images/thumb00101.jpg" alt="" /></a></li>
<li><a href="images/images/0010_b.jpg"><img src="images/images/thumb00102.jpg" alt="" /></a></li>
</ul>
</div>
<p> <a href=" " class="readmore" target="_blank">Visit site</a></p>
</div>
<!--- End s1 --->
<!--- s2 --->
<div class="cs_article" id="s2">
<h2>s2 slide</h2>
<div id="main_view10">
<a href="#"> <img src="images/images/0010.png" alt=" "/></a>
</div>
<p>sample text</p>
<div class="container">
<ul class="thumb10">
<li><a href="images/images/0010_a.png"><img src="images/images/thumb00101.jpg" alt="" /></a></li>
<li><a href="images/images/0010_b.jpg"><img src="images/images/thumb00102.jpg" alt="" /></a></li>
</ul>
</div>
<p> <a href=" " class="readmore" target="_blank">Visit site</a></p>
</div>
<!--- End s2 --->
<!--- Article Ends --->
</div><!-- End cs_slider -->
</div><!-- End cs_wrapper -->
</div><!-- End contentslider -->
<script type="text/javascript">
$(function() {
$('#one').ContentSlider({
width : '900px',
height : '400px',
speed : 800,
easing : 'easeInOutBack'
});
});
</script>
以下是滑块的jQuery
(function($) {
$.fn.ContentSlider = function(options)
{
var defaults = {
leftBtn : 'images/cs_leftImg.jpg',
rightBtn : 'images/cs_rightImg.jpg',
width : '900px',
height : '400px',
speed : 400,
easing : 'easeOutQuad',
textResize : false,
IE_h2 : '26px',
IE_p : '11px'
}
var defaultWidth = defaults.width;
var o = $.extend(defaults, options);
var w = parseInt(o.width);
var n = this.children('.cs_wrapper').children('.cs_slider').children('.cs_article').length;
var x = -1*w*n+w; // Minimum left value
var p = parseInt(o.width)/parseInt(defaultWidth);
var thisInstance = this.attr('id');
var inuse = false; // Prevents colliding animations
function moveSlider(d, b)
{
var l = parseInt(b.siblings('.cs_wrapper').children('.cs_slider').css('left'));
if(isNaN(l)) {
var l = 0;
}
var m = (d=='left') ? l-w : l+w;
if(m<=0&&m>=x) {
b
.siblings('.cs_wrapper')
.children('.cs_slider')
.animate({ 'left':m+'px' }, o.speed, o.easing, function() {
inuse=false;
});
if(b.attr('class')=='cs_leftBtn') {
var thisBtn = $('#'+thisInstance+' .cs_leftBtn');
var otherBtn = $('#'+thisInstance+' .cs_rightBtn');
} else {
var thisBtn = $('#'+thisInstance+' .cs_rightBtn');
var otherBtn = $('#'+thisInstance+' .cs_leftBtn');
}
if(m==0||m==x) {
thisBtn.animate({ 'opacity':'0' }, o.speed, o.easing, function() { thisBtn.hide(); });
}
if(otherBtn.css('opacity')=='0') {
otherBtn.show().animate({ 'opacity':'1' }, { duration:o.speed, easing:o.easing });
}
}
}
function vCenterBtns(b)
{
// Safari and IE don't seem to like the CSS used to vertically center
// the buttons, so we'll force it with this function
var mid = parseInt(o.height)/2;
b
.find('.cs_leftBtn img').css({ 'top':mid+'px', 'padding':0 }).end()
.find('.cs_rightBtn img').css({ 'top':mid+'px', 'padding':0 });
}
return this.each(function() {
$(this)
// Set the width and height of the div to the defined size
.css({
width:o.width,
height:o.height
})
// Add the buttons to move left and right
.prepend('<a href="#" class="cs_leftBtn"><img src="'+o.leftBtn+'" /></a>')
.append('<a href="#" class="cs_rightBtn"><img src="'+o.rightBtn+'" /></a>')
// Dig down to the article div elements
.find('.cs_article')
// Set the width and height of the div to the defined size
.css({
width:o.width,
height:o.height
})
.end()
// Animate the entrance of the buttons
.find('.cs_leftBtn')
.css('opacity','0')
.hide()
.end()
.find('.cs_rightBtn')
.hide()
.animate({ 'width':'show' });
// Resize the font to match the bounding box
if(o.textResize===true) {
var h2FontSize = $(this).find('h2').css('font-size');
var pFontSize = $(this).find('p').css('font-size');
$.each(jQuery.browser, function(i) {
if($.browser.msie) {
h2FontSize = o.IE_h2;
pFontSize = o.IE_p;
}
});
$(this).find('h2').css({ 'font-size' : parseFloat(h2FontSize)*p+'px', 'margin-left' : '66%' });
$(this).find('p').css({ 'font-size' : parseFloat(pFontSize)*p+'px', 'margin-left' : '66%' });
$(this).find('.readmore').css({ 'font-size' : parseFloat(pFontSize)*p+'px', 'margin-left' : '66%' });
}
// Store a copy of the button in a variable to pass to moveSlider()
var leftBtn = $(this).children('.cs_leftBtn');
leftBtn.bind('click', function() {
if(inuse===false) {
inuse = true;
moveSlider('right', leftBtn);
}
return false; // Keep the link from firing
});
// Store a copy of the button in a variable to pass to moveSlider()
var rightBtn = $(this).children('.cs_rightBtn');
rightBtn.bind('click', function() {
if(inuse===false) {
inuse=true;
moveSlider('left', rightBtn);
}
return false; // Keep the link from firing
});
vCenterBtns($(this)); // This is a CSS fix function.
});
}
})(jQuery)
提前谢谢！
答案 0 :(得分：0)
试试此滑块：http://tympanus.net/codrops/2011/01/19/sweet-thumbnails-gallery/ 它非常酷，并且具有您想要的功能。