我正在结合 jquery 循环和 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 中滑动 imgs,然后根据 ul#mycarousel 中的这些图像创建一个缩略图寻呼机。然后 jcarousel 使用 ul#mycarousel 中的列表项来构建轮播。在 FF、Chrome、Safari 中像魅力一样工作,但我不知道如何让它在 IE 中工作。
这是JS代码:
$(文档).ready(函数() {
// 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,
});
}); // 结尾
这是我到目前为止所拥有的链接。演示
对此的任何帮助将不胜感激!