为什么在这个应用程序中破坏了JQuery Cycle Plugin？

我第一次玩过JQuery Cycle plugin，并试图制作一个简单的图像幻灯片。大部分情况下，我遵循this gentleman's tutorial。我结束了这段代码：为什么在这个应用程序中破坏了JQuery Cycle Plugin？

<head> 
<style> @import "main.css"; </style> 
    <script type="text/javascript" src="jquery-3.0.0.min.js"> </script> 
    <script type="text/javascript" src="jquery.cycle.all.js"> </script> 
    <script type="text/javascript"> 
    $('#slider').cycle({ 
    fx:  'scrollHorz', 
    speed: 'slow', 
    next: '#next', 
    prev: '#prev' 
    }); 
</script> 
</head> 
<body> 

<div id="picwrap"> 
<div id="piccont"> 

    <div id="prev" class="controller"> </div> 
    <div id="slider"> 
    <img src="pic1.png" /> 
    <img src="pic2.png" /> 
    <img src="pic3.png" /> 
    </div> 
    <div id="next" class="controller"> </div> 

</div> 
</div> 

</body>

相关的CSS如下：

#picwrap { 
    display: block; 
    height: 560px; 
    width: 580px; 
    margin: auto; 
} 

#piccont { 
    display: block; 
    float: left; 
    height: 560px; 
    width: 580px; 
    overflow: auto; 
} 

#prev { 
    background-image: url(arrow-left.png); 
    background-repeat: no-repeat; 
    background-position: center center; 
    display: block; 
    height: 560px; 
    width: 100px; 
    float: left; 
    position: relative; 
    z-index: 99; 
} 

#next { 
    background-image: url(arrow-right.png); 
    background-repeat: no-repeat; 
    background-position: center center; 
    display: block; 
    height: 560px; 
    width: 100px; 
    float: right; 
    position: relative; 
    z-index: 99; 
} 

#slider { 
    display: block; 
    height: 560px; 
    width: 580px; 
    float: left; 
    position: absolute; 
    overflow: hidden; 
}

剧本似乎并没有被任何工作。我只能假设我犯了一个小小的错误，我正在努力注意。我已经多次与视频进行交叉引用，并检查了路径和文件名。我在其他教程中也看过，并且找不到我做错了什么。看来插件的实现完全失败了，因为在添加脚本之前和之后，文件似乎没有区别。我得到一个静态图像（图片1）与两个箭头（这是不可点击）的顶部。

任何帮助将不胜感激。

来源

2016-07-04 Placowdepuss

看来你的CSS不正确。在第一行它说'picWrap'，但如果我是正确的，它应该是'#picWrap'。大多数情况下，Cycle不会产生错误，但仍然不起作用，它在CSS中。

而且，把你的JS在底部（结束标记之前），并改变你的JS这样的：

$(document).ready(function(){ 
    $('#slider').cycle({ 
     fx:  'scrollHorz', 
     speed: 'slow', 
     next: '#next', 
     prev: '#prev' 
    }); 
});

周期需要的图像被下载才能计算出不同的幻灯片的大小。有时我甚至选择使用$（window）.load而不是$（document）.ready。图像完全加载后，窗口加载将执行。

来源

2016-07-04 19:34:30

非常感谢你，更改Javascript到你的版本解决了这个问题。至于CSS，说实话我只是一个业余爱好者，并没有意识到它有一个无处不在的案例惯例，我刚刚把它放在小写字母中。丢失的散列只是一个格式错误，我已将它包含在我的代码中。 – Placowdepuss

为什么在这个应用程序中破坏了JQuery Cycle Plugin？

回答

相关问题