jQuery Cycle + Jcarousel幻灯片拇指不加载?
-
29-09-2019 - |
题
我正在努力将jQuery Cycle和Jcarousel合并以制作幻灯片。它在Firefox,Chrome和Safari中效果很好,但是在IE中,缩略图并未加载。
我猜这与打印机中的图像的产生有关,然后jcarousel只是在IE中启发出来,但我不确定。我觉得我非常接近让这个幻灯片工作的工作,但是我需要弄清楚为什么它在IE中失败了。
这是HTML代码:
<!-- PHOTO SLIDESHOW CONTROLS -->
<div id="photo-slideshow-controls">
<a id="prev-btn" href="#">Prev</a>
<a id="next-btn" href="#">Next</a>
<a id="play" href="#">Play</a>
<a id="pause" href="#">Pause</a>
<div class="clear"></div>
</div><!--/PHOTO SLIDESHOW CONTROLS -->
<!-- PHOTO SLIDESHOW -->
<div id="advanced-slideshow">
<img src="assets/bridge-towers.jpg" width="593" height="474" alt="Bridge Towers" name="John Doe" />
<img src="assets/dixie-lan-bbq.jpg" width="632" height="474" alt="BBQ" name="Jane Doe l Associated Press" />
<img src="assets/downtown-overlook.jpg" width="632" height="421" alt="Overlooking Downtown Kansas City" name="Joel Johns l GardnerEDGE" />
<img src="assets/downtown-skyline.jpg" width="474" height="219" alt="Downtown Kansas City Skyline" name="Brett Jankord" />
<img src="assets/liberty-tower.jpg" width="356" height="474" alt="Liberty Tower" name="Steve Hengeli" />
<img src="assets/plaza-fountain.jpg" width="632" height="468" alt="Plaza Fountain" name="Kevin Wright l GardnerEDGE" />
<img src="assets/sprint-center.jpg" width="632" height="371" alt="Sprint Center" name="John Doe" />
<img src="assets/union-station.jpg" width="632" height="416" alt="Union Station at night" name="Jane Doe" />
<img src="assets/western-auto.jpg" width="632" height="474" alt="Western Auto" name="Kevin Wright l GardnerEDGE" />
<img src="assets/bridge-towers.jpg" width="593" height="474" alt="Bridge Towers" name="John Doe" />
<img src="assets/dixie-lan-bbq.jpg" width="632" height="474" alt="BBQ" name="Jane Doe l Associated Press" />
<img src="assets/downtown-overlook.jpg" width="632" height="421" alt="Overlooking Downtown Kansas City" name="Joel Johns l GardnerEDGE" />
<img src="assets/downtown-skyline.jpg" width="474" height="219" alt="Downtown Kansas City Skyline" name="Brett Jankord" />
</div><!--/PHOTO SLIDESHOW -->
<div id="photo-credit"></div>
<ul id="mycarousel" class="jcarousel-skin-tango">
</ul>
<div class="clear"></div>
<div id="slideshow-caption"></div>
因此,循环在Div#Advanced-Slideshow中滑动IMG,然后根据UL#Mycarousel中的这些图像创建一个缩略图。然后,Jcarousel使用UL#Mycarousel中的列表项目来构建轮播。像FF,Chrome,Safari中的魅力一样工作,但我不知道如何使其在IE中工作。
这是JS代码:
$(document).ready(function(){
// Adds ability to link to specifics slides
var index = 0, hash = window.location.hash;
if (hash) {
index = /\d+/.exec(hash)[0];
index = (parseInt(index) || 1) - 1; // slides are zero-based
}
// Setup for Cycle Plugin
$('#advanced-slideshow').cycle({
prev: '#prev-btn',
next: '#next-btn',
timeout: 0,
before: onBefore,
startingSlide: index,
pager: '#mycarousel',
// callback fn that creates a thumbnail to use as pager anchor
pagerAnchorBuilder: function(idx, slide) {
return '<li><a href="#"><img src="' + slide.src + '" width="75" height="75" /></a></li>';
}
});
//Pauses slideshow
$('#pause').click(function() { $('#photo-slideshow').cycle('pause'); return false; });
//Instantly resumes slidesshow
$('#play').click(function() { $('#photo-slideshow').cycle('resume', true); });
/* Delayed resumes slideshow
$('#play').click(function() { $('#photo-slideshow').cycle('resume'); return false; });
*/
function onBefore(curr,next,opts) {
// Centers the image
var $slide = $(next);
var w = $slide.outerWidth();
var h = $slide.outerHeight();
$slide.css({
marginTop: (476 - h) / 2,
marginLeft: (634 - w) / 2
});
// Centers the DIV vertically!!!!
var divHeight = 476;
var theImageHeight = $slide.outerHeight();
var newTopMargin = (divHeight - theImageHeight) / 2;
if(theImageHeight > 476){
$('#advanced-slideshow').css({
marginTop: newTopMargin
});
}
// Adds caption and credit line
$('#photo-credit').html('<p>' + "Photo By: " + this.name + '</p>')
$('#slideshow-caption').html(this.alt);
// Adds ability to link to certain slides
{window.location.hash = opts.currSlide + 1;}
};
//jCarousel
$('#mycarousel').jcarousel({
scroll: 5,
visible: 5,
});
}); // 结尾
这是我到目前为止的链接。 演示
对此的任何帮助将不胜感激!
解决方案
在jQuery论坛上的用户指出,我有一个额外的东西,我需要更改粘膜:5,可见:5
它运行效果很好,现在幻灯片在IE中起作用。我测试了IE 6至IE8。如果您只是在Head Tag中而不是在页面末尾,则在IE中可以更好地工作。我认为我会分享的,以防其他人想使用它。
不隶属于 StackOverflow