为什么这个 js 幻灯片在一个安装上有效,而在另一个安装上无效?
我正在建立一个新网站。我在这里有开发的第一页: http://dev.rouviere.com/yoga/ 和一切正常,包括图像幻灯片。
但是,在这个在 Expression Engine 上运行的 安装 上,幻灯片无法正常工作,并且我在 Chrome 中收到以下错误检查员:
未捕获的语法错误:意外的标记<
我需要另一双眼睛来帮助我看到我在这里缺少的东西。所有资源都正在加载,包括四个按钮/点的图像,但出现问题导致脚本失败并且幻灯片无法正常工作。
HTML
<div class="window">
<div class="image_reel">
<a href="#"><img src="/images/slideshow-1.jpg" alt="" /></a>
<a href="#"><img src="/images/slideshow-1.jpg" alt="" /></a>
<a href="#"><img src="/images/slideshow-1.jpg" alt="" /></a>
<a href="#"><img src="/images/slideshow-1.jpg" alt="" /></a>
</div>
</div><!-- end window -->
有问题的脚本:
$(document).ready(function() {
//Set Default State of each portfolio piece
$(".paging").show();
$(".paging a:first").addClass("active");
//Get size of images, how many there are, then determin the size of the image reel.
var imageWidth = $(".window").width();
var imageSum = $(".image_reel img").size();
var imageReelWidth = imageWidth * imageSum;
//Adjust the image reel to its new size
$(".image_reel").css({'width' : imageReelWidth});
//Paging + Slider Function
rotate = function(){
var triggerID = $active.attr("rel") - 1; //Get number of times to slide
var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide
$(".paging a").removeClass('active'); //Remove all active class
$active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function)
//Slider Animation
$(".image_reel").animate({
left: -image_reelPosition
}, 500 );
};
//Rotation + Timing Event
rotateSwitch = function(){
play = setInterval(function(){ //Set timer - this will repeat itself every 3 seconds
$active = $('.paging a.active').next();
if ( $active.length === 0) { //If paging reaches the end...
$active = $('.paging a:first'); //go back to first
}
rotate(); //Trigger the paging and slider function
}, 10000); //Timer speed in milliseconds (3 seconds)
};
rotateSwitch(); //Run function on launch
//On Hover
$(".image_reel a").hover(function() {
clearInterval(play); //Stop the rotation
}, function() {
rotateSwitch(); //Resume rotation
});
//On Click
$(".paging a").click(function() {
$active = $(this); //Activate the clicked paging
//Reset Timer
clearInterval(play); //Stop the rotation
rotate(); //Trigger rotation immediately
rotateSwitch(); // Resume rotation
return false; //Prevent browser jump to link anchor
});
});
I am building a new site. I have the first page in dev here: http://dev.rouviere.com/yoga/ and everything is working correctly, including the image slideshow.
However, on this install, which is running on Expression Engine, the slideshow does not work and I get the following error in Chrome Inspector:
Uncaught SyntaxError: Unexpected token <
I need another pair of eyes to help me see what I am missing here. All the resources are loading, including the image for the four button/dots, but there is something wrong that is causing the script to fail and the slideshow not work.
HTML
<div class="window">
<div class="image_reel">
<a href="#"><img src="/images/slideshow-1.jpg" alt="" /></a>
<a href="#"><img src="/images/slideshow-1.jpg" alt="" /></a>
<a href="#"><img src="/images/slideshow-1.jpg" alt="" /></a>
<a href="#"><img src="/images/slideshow-1.jpg" alt="" /></a>
</div>
</div><!-- end window -->
The Script in question:
$(document).ready(function() {
//Set Default State of each portfolio piece
$(".paging").show();
$(".paging a:first").addClass("active");
//Get size of images, how many there are, then determin the size of the image reel.
var imageWidth = $(".window").width();
var imageSum = $(".image_reel img").size();
var imageReelWidth = imageWidth * imageSum;
//Adjust the image reel to its new size
$(".image_reel").css({'width' : imageReelWidth});
//Paging + Slider Function
rotate = function(){
var triggerID = $active.attr("rel") - 1; //Get number of times to slide
var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide
$(".paging a").removeClass('active'); //Remove all active class
$active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function)
//Slider Animation
$(".image_reel").animate({
left: -image_reelPosition
}, 500 );
};
//Rotation + Timing Event
rotateSwitch = function(){
play = setInterval(function(){ //Set timer - this will repeat itself every 3 seconds
$active = $('.paging a.active').next();
if ( $active.length === 0) { //If paging reaches the end...
$active = $('.paging a:first'); //go back to first
}
rotate(); //Trigger the paging and slider function
}, 10000); //Timer speed in milliseconds (3 seconds)
};
rotateSwitch(); //Run function on launch
//On Hover
$(".image_reel a").hover(function() {
clearInterval(play); //Stop the rotation
}, function() {
rotateSwitch(); //Resume rotation
});
//On Click
$(".paging a").click(function() {
$active = $(this); //Activate the clicked paging
//Reset Timer
clearInterval(play); //Stop the rotation
rotate(); //Trigger rotation immediately
rotateSwitch(); // Resume rotation
return false; //Prevent browser jump to link anchor
});
});
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
这样做是因为它不是拉取您的 JS 文件,而是拉取您的站点索引页面。索引页的第一个字符是“<”
听起来您已经将 htaccess 配置为使用 include 删除“index.php”。确保您的 js 目录包含在设置为不重新路由的目录中。
It's doing this because instead of pulling your JS file (s) it's pulling your site index page. The first character of your index page is "<"
Sounds like you have htaccess configured to drop "index.php" using include. Be sure that your js directory is included in the ones set up not to reroute.