我在我的网站上放了一个旋转木马，但为什么不显示？
我的HTML：
<!--Sponsor Carousel-->
<link href="css/style.css" rel="stylesheet" media="screen">
<ul id="flexiselDemo1">
<li><img src="img/logo-nyt.png" /></li>
<li><img src="img/logo-microsoft.png" /></li>
<li><img src="img/logo-ebay.png" /></li>
<li><img src="img/logo-hp.png" /></li>
<li><img src="img/logo-youtube.png" /></li>
</ul>
<div class="clearout"></div>
<script type="text/javascript">
$(window).load(function() {
$("#flexiselDemo1").flexisel({
enableResponsiveBreakpoints: true,
responsiveBreakpoints: {
portrait: {
changePoint:480,
visibleItems: 1
},
landscape: {
changePoint:640,
visibleItems: 2
},
tablet: {
changePoint:768,
visibleItems: 3
}
}
});
});
</script>
<script type="text/javascript" src="js/jquery.flexisel.js"></script>
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<!--End Sponsor Carousel-->
我的CSS：
#flexiselDemo1{
display:none;
}
.nbs-flexisel-container {
position:relative;
max-width:90%;
margin: 0 auto;
}
.nbs-flexisel-ul {
position:relative;
width:9999px;
margin:0;
padding:0;
list-style-type:none;
text-align:center;
}
.nbs-flexisel-inner {
overflow:hidden;
float:left;
width:100%;
background:#fcfcfc;
background: #fcfcfc -moz-linear-gradient(top, #fcfcfc 0%, #eee 100%); /* FF3.6+ */
background: #fcfcfc -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fcfcfc), color-stop(100%,#eee)); /* Chrome,Safari4+ */
background: #fcfcfc -webkit-linear-gradient(top, #fcfcfc 0%, #eee 100%); /* Chrome10+,Safari5.1+ */
background: #fcfcfc -o-linear-gradient(top, #fcfcfc 0%, #eee 100%); /* Opera11.10+ */
background: #fcfcfc -ms-linear-gradient(top, #fcfcfc 0%, #eee 100%); /* IE10+ */
background: #fcfcfc linear-gradient(top, #fcfcfc 0%, #eee 100%); /* W3C */
border:1px solid #ccc;
border-radius:10px;
-moz-border-radius:50px;
-webkit-border-radius:5px;
}
.nbs-flexisel-item {
float:left;
margin:0px;
padding:0px;
cursor:pointer;
position:relative;
line-height:0px;
}
.nbs-flexisel-item img {
width: 100%;
cursor: pointer;
position: relative;
margin-top: 10px;
margin-bottom: 10px;
max-width:100px;
max-height:45px;
}
/*** Navigation ***/
.nbs-flexisel-nav-left,
.nbs-flexisel-nav-right {
width: 22px;
height: 22px;
position: absolute;
cursor: pointer;
z-index: 100;
opacity: 0.5;
}
.nbs-flexisel-nav-left {
left: 10px;
background: url(../images/button-previous.png) no-repeat;
}
.nbs-flexisel-nav-right {
right: 5px;
background: url(../images/button-next.png) no-repeat;
}
我的Jquery：
/ * *文件：jquery.flexisel.js *版本：1.0.2 *描述：响应式carousel jQuery插件 *作者：9bit Studios *版权所有2012,9bit Studios * http://www.9bitstudios.com *根据MIT许可证免费使用和滥用。 * http://www.opensource.org/licenses/mit-license.php * / （function（$）{ $ .fn.flexisel = function（options）{
var defaults = $.extend({
visibleItems : 5,
animationSpeed : 1000,
autoPlay : true,
autoPlaySpeed : 5000,
pauseOnHover : true,
setMaxWidthAndHeight : false,
enableResponsiveBreakpoints : true,
clone : true,
responsiveBreakpoints : {
portrait: {
changePoint:480,
visibleItems: 1
},
landscape: {
changePoint:640,
visibleItems: 2
},
tablet: {
changePoint:768,
visibleItems: 3
}
}
}, options);
/******************************
Private Variables
*******************************/
var object = $(this);
var settings = $.extend(defaults, options);
var itemsWidth; // Declare the global width of each item in carousel
var canNavigate = true;
var itemsVisible = settings.visibleItems; // Get visible items
var totalItems = object.children().length; // Get number of elements
var responsivePoints = [];
/******************************
Public Methods
*******************************/
var methods = {
init : function() {
return this.each(function() {
methods.appendHTML();
methods.setEventHandlers();
methods.initializeItems();
});
},
/******************************
Initialize Items
Fully initialize everything. Plugin is loaded and ready after finishing execution
*******************************/
initializeItems : function() {
var listParent = object.parent();
var innerHeight = listParent.height();
var childSet = object.children();
methods.sortResponsiveObject(settings.responsiveBreakpoints);
var innerWidth = listParent.width(); // Set widths
itemsWidth = (innerWidth) / itemsVisible;
childSet.width(itemsWidth);
if (settings.clone) {
childSet.last().insertBefore(childSet.first());
childSet.last().insertBefore(childSet.first());
object.css({
'left' : -itemsWidth
});
}
object.fadeIn();
$(window).trigger("resize"); // needed to position arrows correctly
},
/******************************
Append HTML
Add additional markup needed by plugin to the DOM
*******************************/
appendHTML : function() {
object.addClass("nbs-flexisel-ul");
object.wrap("<div class='nbs-flexisel-container'><div class='nbs-flexisel-inner'></div></div>");
object.find("li").addClass("nbs-flexisel-item");
var flexiselInner = object.parent(); // flexisel-inner
if (settings.setMaxWidthAndHeight) {
var baseWidth = $(".nbs-flexisel-item img").width();
var baseHeight = $(".nbs-flexisel-item img").height();
$(".nbs-flexisel-item img").css("max-width", baseWidth);
$(".nbs-flexisel-item img").css("max-height", baseHeight);
}
$("<div class='nbs-flexisel-nav-left'></div><div class='nbs-flexisel-nav-right'></div>").insertAfter(flexiselInner);
if (settings.clone) {
var cloneContent = object.children().clone();
object.append(cloneContent);
}
},
/******************************
Set Event Handlers
Set events: click, resize, etc
*******************************/
setEventHandlers : function() {
var listParent = object.parent();
var flexiselInner = listParent.parent();
var childSet = object.children();
var leftArrow = flexiselInner.find(".nbs-flexisel-nav-left");
var rightArrow = flexiselInner.find(".nbs-flexisel-nav-right");
$(window).on("resize", function(event) {
methods.setResponsiveEvents();
var innerWidth = $(listParent).width();
var innerHeight = $(listParent).height();
itemsWidth = (innerWidth) / itemsVisible;
childSet.width(itemsWidth);
if (settings.clone) {
object.css({
'left' : -itemsWidth
});
}else {
object.css({
'left' : 0
});
}
// Hide the arrows if the elements are the same of the visible
if (!settings.clone && totalItems <= itemsVisible) {
leftArrow.add(rightArrow).css('visibility', 'hidden');
}
else {
leftArrow.add(rightArrow).css('visibility', 'visible');
var halfArrowHeight = (leftArrow.height()) / 2;
var arrowMargin = (innerHeight / 2) - halfArrowHeight;
leftArrow.css("top", arrowMargin + "px");
rightArrow.css("top", arrowMargin + "px");
}
});
$(leftArrow).on("click", function(event) {
methods.scrollLeft();
});
$(rightArrow).on("click", function(event) {
methods.scrollRight();
});
if (settings.pauseOnHover == true) {
$(".nbs-flexisel-item").on({
mouseenter : function() {
canNavigate = false;
},
mouseleave : function() {
canNavigate = true;
}
});
}
if (settings.autoPlay == true) {
setInterval(function() {
if (canNavigate == true)
methods.scrollRight();
}, settings.autoPlaySpeed);
}
},
/******************************
Set Responsive Events
Set breakpoints depending on responsiveBreakpoints
*******************************/
setResponsiveEvents: function() {
var contentWidth = $('html').width();
if(settings.enableResponsiveBreakpoints) {
var largestCustom = responsivePoints[responsivePoints.length-1].changePoint; // sorted array
for(var i in responsivePoints) {
if(contentWidth >= largestCustom) { // set to default if width greater than largest custom responsiveBreakpoint
itemsVisible = settings.visibleItems;
break;
}
else { // determine custom responsiveBreakpoint to use
if(contentWidth < responsivePoints[i].changePoint) {
itemsVisible = responsivePoints[i].visibleItems;
break;
}
else
continue;
}
}
}
},
/******************************
Sort Responsive Object
Gets all the settings in resposiveBreakpoints and sorts them into an array
*******************************/
sortResponsiveObject: function(obj) {
var responsiveObjects = [];
for(var i in obj) {
responsiveObjects.push(obj[i]);
}
responsiveObjects.sort(function(a, b) {
return a.changePoint - b.changePoint;
});
responsivePoints = responsiveObjects;
},
/******************************
Scroll Left
*******************************/
scrollLeft : function() {
if (object.position().left < 0) {
if (canNavigate == true) {
canNavigate = false;
var listParent = object.parent();
var innerWidth = listParent.width();
itemsWidth = (innerWidth) / itemsVisible;
var childSet = object.children();
object.animate({
'left' : "+=" + itemsWidth
}, {
queue : false,
duration : settings.animationSpeed,
easing : "linear",
complete : function() {
if (settings.clone) {
childSet.last().insertBefore(
childSet.first()); // Get the first list item and put it after the last list item (that's how the infinite effects is made)
}
methods.adjustScroll();
canNavigate = true;
}
});
}
}
},
/******************************
Scroll Right
*******************************/
scrollRight : function() {
var listParent = object.parent();
var innerWidth = listParent.width();
itemsWidth = (innerWidth) / itemsVisible;
var difObject = (itemsWidth - innerWidth);
var objPosition = (object.position().left + ((totalItems-itemsVisible)*itemsWidth)-innerWidth);
if((difObject <= Math.ceil(objPosition)) && (!settings.clone)){
if (canNavigate == true) {
canNavigate = false;
object.animate({
'left' : "-=" + itemsWidth
}, {
queue : false,
duration : settings.animationSpeed,
easing : "linear",
complete : function() {
methods.adjustScroll();
canNavigate = true;
}
});
}
} else if(settings.clone){
if (canNavigate == true) {
canNavigate = false;
var childSet = object.children();
object.animate({
'left' : "-=" + itemsWidth
}, {
queue : false,
duration : settings.animationSpeed,
easing : "linear",
complete : function() {
childSet.first().insertAfter(childSet.last()); // Get the first list item and put it after the last list item (that's how the infinite effects is made)
methods.adjustScroll();
canNavigate = true;
}
});
}
};
},
/******************************
Adjust Scroll
*******************************/
adjustScroll : function() {
var listParent = object.parent();
var childSet = object.children();
var innerWidth = listParent.width();
itemsWidth = (innerWidth) / itemsVisible;
childSet.width(itemsWidth);
if (settings.clone) {
object.css({
'left' : -itemsWidth
});
}
}
};
if (methods[options]) { // $("#element").pluginName('methodName', 'arg1', 'arg2');
return methods[options].apply(this, Array.prototype.slice.call(arguments, 1));
} else if (typeof options === 'object' || !options) { // $("#element").pluginName({ option: 1, option:2 });
return methods.init.apply(this);
} else {
$.error('Method "' + method + '" does not exist in flexisel plugin!');
}
};
})(jQuery);
答案 0 :(得分：1)
错误是关于如何加载javascript文件。它正在加载整个文档后立即加载javascript文件，所以当你进行jQuery调用时，它无法识别它，这就是你得到那些运行时错误的原因。
解决方案：在html文件中，将以下行移动到beggining并在它们之间切换顺序，您需要先加载jQuery，因为轮播依赖于它。
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="js/jquery.flexisel.js"></script>
：）
答案 1 :(得分：0)
您无法在之前启动轮播加载脚本，并且首先需要加载jquery。此外，你的CSS需要在头部而不是html的主体。
把css放在头上：
<link href="css/style.css" rel="stylesheet" media="screen">
按如下方式加载脚本。它们可以在头部，但在html的末尾更好。
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="js/jquery.flexisel.js"></script>
<script type="text/javascript">
$(window).load(function() {
$("#flexiselDemo1").flexisel({
enableResponsiveBreakpoints: true,
responsiveBreakpoints: {
portrait: {
changePoint:480,
visibleItems: 1
},
landscape: {
changePoint:640,
visibleItems: 2
},
tablet: {
changePoint:768,
visibleItems: 3
}
}
});
});
</script>