Javascript 使用java脚本播放图像幻灯片时出现未捕获类型错误

我正在尝试添加一个图片幻灯片和缩略图在我的一个php页面。我的参考资料在他们的网站上运行良好

但当我尝试在php页面中实现时，它会给出javascript错误

未捕获的TypeError:$（…）。cycle不是函数

代码如下所示

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.cycle/3.0.3/jquery.cycle.all.js"></script>


<style>
.slider{
   margin: 0 auto;
   width: 625px;
   height: 345px;
   border: 8px solid #FFFFFF;
   border-radius:5px;
   box-shadow: 2px 2px 4px #333333;
   position: relative;
}
.slider_next{
   width: 57px;
   height: 57px;
   background: #f8f8f8;
   border-radius: 65px;
   position: absolute;
   z-index: 99;
   top: 136px;
   left: 592px;
   padding: 5px; 
   cursor: pointer;
}
.slider_prev{
   width: 57px;
   height: 57px;
   background: #f8f8f8;
   border-radius: 65px;
   position: absolute;
   z-index: 99;
   top: 136px;
   left: -35px;
   padding: 5px; 
   cursor: pointer;
}    
#thumb { 
  width: 100%; 
  height: 80px; 
  margin: 20px 5px; 
}
#thumb li { 
  width: 60px; 
  float: left; 
  margin: 12px; 
  list-style: none 
}
#thumb a { 
  width: 60px; 
  padding: 3px; 
  display: block; 
  border: 3px solid #FFFFFF;
  border-radius:3px;
  box-shadow: 1px 1px 3px #333333;
}
#thumb li.activeSlide a { 
  border: 3px solid #0a526f;
  border-radius:3px;
  box-shadow: 1px 1px 3px #333333;
}
#thumb a:focus { 
  outline: none; 
}
#thumb img { 
  border: none; 
  display: block;
}
</style>
<script>
$(document).ready(function(){      
   $('#slider1').cycle({
   fx: 'scrollHorz', // Here you can change the effect
   speed: 'slow', 
   timeout: 0,
   next: '#next', 
   prev: '#prev',
   pager: '#thumb',
   pagerAnchorBuilder: function(idx, slide) { 
     return '<li><a href="#"><img src="' + slide.src + '" /></a></li>'; 
   } 
  });
});
</script>

<div class="slider">
     <div id="slider1">
        <img border="0" src="images/img1.jpg" width="625" height="345" alt="" />
        <img border="0" src="images/img2.jpg" width="625" height="345" alt="" />
        <img border="0" src="images/img3.jpg" width="625" height="345" alt="" />
        <img border="0" src="images/img4.jpg" width="625" height="345" alt="" />
        <img border="0" src="images/img5.jpg" width="625" height="345" alt="" />
        <img border="0" src="images/img6.jpg" width="625" height="345" alt="" />
        <img border="0" src="images/img7.jpg" width="625" height="345" alt="" />
    </div>
    <ul id="thumb"> </ul>
    <div id='next' class="slider_next"><img src="images/next.png" alt=""/></div>
    <div id='prev' class="slider_prev"><img src="images/prev.png" alt=""/></div>
 </div>   

.滑块{
保证金：0自动；
宽度：625px；
高度：345px；
边框：8px实心#FFFFFF；
边界半径：5px；
盒影：2×2×4×333；
位置：相对位置；
}
.下一个{
宽度：57px；
高度：57px；
背景：#f8f8；
边界半径：65px；
位置：绝对位置；
z指数：99；
顶部：136px；
左：592px；
填充物：5px；
光标：指针；
}
.上一页{
宽度：57px；
高度：57px；
背景：#f8f8；
边界半径：65px；
位置：绝对位置；
z指数：99；
顶部：136px；
左：-35px；
填充物：5px；
光标：指针；
}    
#拇指{
宽度：100%；
高度：80px；
利润率：20px 5px；
}
#拇指李{
宽度：60px；
浮动：左；
利润率：12像素；
列表样式：无
}
#拇指a{
宽度：60px；
填充：3倍；
显示：块；
边框：3px实心#FFFFFF；
边界半径：3px；
盒影：1px 1px 3px#333333；
}
#拇指li.activeSlide a{
边框：3px实心#0a526f；
边界半径：3px；
盒影：1px 1px 3px#333333；
}
#拇指a：焦点{
大纲：无；
}
#拇指img{
边界：无；
显示：块；
}
$（文档）.ready（函数（）{
$（'#滑块1'）。循环({
fx:‘scrollHorz’，//在这里您可以更改效果
速度：“慢”，
超时：0，
下一个：“#下一个”，
上一页：“#上一页”，
传呼机：“#拇指”，
pagerAnchorBuilder:函数（idx，幻灯片）{
返回“
”；
} 
});
});

如何消除这个错误？

---

注：根据一项建议，我添加了

jquery.cycle.all.js的
src
，上面从
中显示的内容听起来好像jquery cycle插件没有正确加载。下面是一个使用所有相同代码的工作示例：

$（文档）.ready（函数（）{
$（'#滑块1'）。循环({
fx:‘scrollHorz’，//在这里您可以更改效果
速度：“慢”，
超时：0，
下一个：“#下一个”，
上一页：“#上一页”，
传呼机：“#拇指”，
pagerAnchorBuilder:函数（idx、幻灯片）{
返回“
”；
}
});
});
滑块{
保证金：0自动；
宽度：625px；
高度：345px；
边框：8px实心#FFFFFF；
边界半径：5px；
盒影：2×2×4×333；
位置：相对位置；
}
.下一个{
宽度：57px；
高度：57px；
背景：#f8f8；
边界半径：65px；
位置：绝对位置；
z指数：99；
顶部：136px；
左：592px；
填充物：5px；
光标：指针；
}
.上一页{
宽度：57px；
高度：57px；
背景：#f8f8；
边界半径：65px；
位置：绝对位置；
z指数：99；
顶部：136px；
左：-35px；
填充物：5px；
光标：指针；
}
#拇指{
宽度：100%；
高度：80px；
利润率：20px 5px；
}
#拇指李{
宽度：60px；
浮动：左；
利润率：12像素；
列表样式：无
}
#拇指a{
宽度：60px；
填充：3倍；
显示：块；
边框：3px实心#FFFFFF；
边界半径：3px；
盒影：1px 1px 3px#333333；
}
#拇指李{
边框：3px实心#0a526f；
边界半径：3px；
盒影：1px 1px 3px#333333；
}
#a:聚焦{
大纲：无；
}
#拇指img{
边界：无；
显示：块；
}


JQUERY代码在哪里？我现在已经添加了JQUERY代码。请共享JQUERY.cycle.all.jsI尝试使用您的代码，但仍然出现相同的错误。是的，它在您的代码片段中运行良好。但是它给了我同样的错误你在控制台中看到其他JavaScript错误了吗？
index.php:508 Uncaught TypeError:$（…）。cycle不是HTMLDocument的函数。（index.php:508）在n（jquery.min.js:2）在Object.fireWith（jquery.min.js:2）在Function.ready（jquery.min.js:2）在HTMLDocument.B（jquery.min.js:2）在Function.ready（jquery.min.js:2）
在jquery加载后是否加载了Cycle插件？是否
jquery.Cycle.all.js
也包含在该文件中？当页面上加载两个不同版本的jQuery时，也可能会出现您遇到的错误。