使用java脚本的图像幻灯片显示未捕获的类型错误

Question

我正在尝试在我的一个php页面中添加图像幻灯片和缩略图。我有Jquery Thumbail Slider的引用在他们的网站上运行良好。

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

  

Uncaught 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>   

如何摆脱这个错误？ P.S：根据一项建议，我添加了src jquery.cycle.all.js Update CustomerValue Set Value = 100 where Option in (1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20); ，如上所示https://cdnjs.cloudflare.com/ajax/libs/jquery.cycle/3.0.3/jquery.cycle.all.js

Answer 1

听起来像jQuery Cycle插件没有正确加载。这是一个包含所有相同代码的工作示例：

＆＃13;

＆＃13;

$(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>';
    }
  });
});

＆＃13;

.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;
}

＆＃13;

<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>
<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>

＆＃13;

＆＃13;

＆＃13;