gpt4 book ai didi

javascript - 猫头鹰旋转木马无法正常工作

转载 作者:太空宇宙 更新时间:2023-11-04 15:46:56 24 4
gpt4 key购买 nike

我按照猫头鹰轮播网站上的说明实现了代码和文件,但显示的只是全宽的大图像,并且 slider 不起作用。我的代码有什么问题吗?

已编辑:在我将其实现到我的网站中后,它不再工作,请检查我在下面添加的 JavaScript 的更新:注意我的网站上有两个 slider

<html>
<head>
<meta charset="utf-8">
<link href="style.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="owl-carousel/owl.carousel.css">
<link rel="stylesheet" href="owl-carousel/owl.theme.css">
<script src="jquery.min.js"></script>
<script src="owl-carousel/owl.carousel.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="mine.js"></script>
<title>UltraMax</title>
<script type="text/javascript">
jssor_1_slider_init = function() {

var jssor_1_SlideoTransitions = [
[{b:900,d:2000,x:-379,e:{x:7}}],
[{b:900,d:2000,x:-379,e:{x:7}}],
[{b:-1,d:1,o:-1,sX:2,sY:2},{b:0,d:900,x:-171,y:-341,o:1,sX:-2,sY:-2,e:{x:3,y:3,sX:3,sY:3}},{b:900,d:1600,x:-283,o:-1,e:{x:16}}]
];

var jssor_1_options = {
$AutoPlay: 1,
$SlideDuration: 800,
$SlideEasing: $Jease$.$OutQuint,
$CaptionSliderOptions: {
$Class: $JssorCaptionSlideo$,
$Transitions: jssor_1_SlideoTransitions
},
$ArrowNavigatorOptions: {
$Class: $JssorArrowNavigator$
},
$BulletNavigatorOptions: {
$Class: $JssorBulletNavigator$
}
};

var jssor_1_slider = new $JssorSlider$("jssor_1", jssor_1_options);

/*responsive code begin*/
/*remove responsive code if you don't want the slider scales while window resizing*/
function ScaleSlider() {
var refSize = jssor_1_slider.$Elmt.parentNode.clientWidth;
if (refSize) {
refSize = Math.min(refSize, 1920);
jssor_1_slider.$ScaleWidth(refSize);
}
else {
window.setTimeout(ScaleSlider, 30);
}
}
ScaleSlider();
$Jssor$.$AddEvent(window, "load", ScaleSlider);
$Jssor$.$AddEvent(window, "resize", ScaleSlider);
$Jssor$.$AddEvent(window, "orientationchange", ScaleSlider);
/*Jssor Slider Begin end*/
};

$(document).ready(function() {

$("#owl-demo").owlCarousel({

autoPlay: 3000, //Set AutoPlay to 3 seconds

items : 4,
itemsDesktop : [1199,3],
itemsDesktopSmall : [979,3]

});

});
</script>

</head>
<body>
<div id="owl-demo">
<div class="item"><img src="assets/owl1.jpg" alt="Owl Image"></div>
<div class="item"><img src="assets/owl2.jpg" alt="Owl Image"></div>
<div class="item"><img src="assets/owl3.jpg" alt="Owl Image"></div>
<div class="item"><img src="assets/owl4.jpg" alt="Owl Image"></div>
<div class="item"><img src="assets/owl5.jpg" alt="Owl Image"></div>
<div class="item"><img src="assets/owl6.jpg" alt="Owl Image"></div>
<div class="item"><img src="assets/owl7.jpg" alt="Owl Image"></div>
<div class="item"><img src="assets/owl8.jpg" alt="Owl Image"></div>
</div>

</body>
</head>
</html>

这是CSS

#owl-demo .item{
margin: 3px;
}
#owl-demo .item img{
display: block;
width: 100%;
height: auto;
}

最佳答案

像这样改变 jquery 库的顺序:-

<script src="jquery.min.js"></script>
<script src="owl-carousel/owl.carousel.js"></script>

你就可以开始了。

关于javascript - 猫头鹰旋转木马无法正常工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43497084/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com