0
對於我的生活,我無法弄清楚這裏有什麼問題。在IE9,FF和webkit中一切正常。在IE8和IE7中,pageAnchorBuilder不會構建傳呼機圖像。JQuery Cycle pagerAnchorBuilder不能在IE7或IE8中工作 - 適用於IE9及其他所有其他
下面的網址:http://nathab.ensocms.com/africa/botswana-kalahari-delta-beyond/slideshow/
$(function() {
$('.trip-slideshow').after('<div class="trip-slideshow-pager">').cycle({
fx: 'fade',
speed: 'fast',
timeout: 0,
pager: '.trip-slideshow-pager',
pagerAnchorBuilder: function(idx, slide) {
return '<a href="#"><img src="' + slide.src + '" width="70" height="70" /></a></div>';
},
after: function() {
$('.trip-slideshow-caption').html(this.alt);
}
});
// Scroll left one photo for each click of a photo
$('.trip-slideshow-pager img').click(function() {
var scrollPosition = $('.trip-slideshow-pager').scrollLeft();
$('.trip-slideshow-pager').animate({scrollLeft: scrollPosition + 75}, '600');
});
});
這裏有相應的CSS:
.trip-slideshow {
width:640px;
margin-top:25px;
height:452px;
margin-left:40px;
margin-bottom:5px; }
.trip-slideshow img { width:640px; height:452px; }
.trip-slideshow-caption {
width:640px;
margin-left:40px;
padding:10px;
background:#000;
color:#fff;
-webkit-text-shadow:none;
-moz-text-shadow:none;
text-shadow:none;
margin-bottom:40px;
}
.trip-slideshow-pager {
width:640px;
height:90px;
margin-left:40px;
margin-bottom:8px;
white-space:nowrap;
overflow-x:scroll;
}
.trip-slideshow-pager a { width:70px; height:70px; margin-right:5px; }
.trip-slideshow-pager img { width:70px; height:70px; }