jQuery幻灯片在Joomla3模板中不起作用 [英] Jquery slideshow not working in Joomla3 template
问题描述
我重新创建了乔恩·拉施(Jon Raasch)在他的博客中提到的jquery幻灯片
I recreate the jquery slideshow by Jon Raasch mentioned on his blog
http://jonraasch.com/blog/a-simple-jquery-slideshow
在正常的项目设置中，这就像一个魅力，但是，如果我尝试在joomla模板中暗示它，我似乎无法解决setInterval函数中的DOM元素.它将活动变量返回为空.
this works like a charm in a normal project setup, however if i try to imply it in a joomla template, i can't seem to address the DOM elements within the setInterval function. it returns the active variable as null.
这是模板代码: http://cl.ly/1m2o3U1O3p3J
html部分:
<body>
<div id="slideShow">
<img src="<?php echo $this->baseurl; ?>/templates/mushi/images/img1.jpg" alt="" title="" class="active" />
<img src="<?php echo $this->baseurl; ?>/templates/mushi/images/img2.jpg" alt="" title="" />
<img src="<?php echo $this->baseurl; ?>/templates/mushi/images/img3.jpg" alt="" title="" />
</div>
</body>
javascript部分:
the javascript part:
function slideSwitch() {
var $active = $('#slideShow .active');
console.log($('#slideShow img:last'));
if ( $active.length == 0 ) $active = $('#slideShow img:last');
var $next = $active.next().length ? $active.next()
: $('#slideShow img:first');
console.log("here");
$active.addClass('last-active');
$next.css({opacity: 0.0})
.addClass('active')
.animate({opacity: 1.0}, 1000, function() {
$active.removeClass('active last-active');
});
}
$(function() {
setInterval("slideSwitch()", 5000);
});
任何帮助将不胜枚举
推荐答案
好，我解决了这个问题，与jquery发生了冲突. 我将'$'替换为'jQuery'，现在可以正常使用了.
Ok i solved the problem, there was a conflict with the jquery. I replaced '$' with 'jQuery' and it now works fine.
jQuery(function() {
setInterval(function(){
var $active = jQuery('#slideShow img.active');
if ( $active.length == 0 ) $active = jQuery('#slideShow img:last');
var $next = $active.next().length ? $active.next()
: jQuery('#slideShow img:first');
console.log("here");
$active.addClass('last-active');
$next.css({opacity: 0.0})
.addClass('active')
.animate({opacity: 1.0}, 1000, function() {
$active.removeClass('active last-active');
});
}, 5000);
});
这篇关于jQuery幻灯片在Joomla3模板中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
