我刚刚从模板怪物买了一张joomla模板。 主页上有照片库,点击它们可以跳到照片上。
我需要的是一个自动滑动的照片库,你知道我的意思是在预设的时间间隔内自动跳过照片。 http://www.mirelmuhendislik.com/home-tr/index.php 这是主页。
我试图通过
来做到这一点function clicker() {
document.getElementById('photo2').click();
}
setInterval("clicker()",5000);
但它没有用。我不知道为什么它没有工作是因为joomla的javascript嵌入选项还是因为我的javascript代码? 我该如何解决这个问题? 我很高兴看到一些建议 请帮忙:/
答案 0 :(得分:1)
在这种情况下,您可以使用.bind()
和.trigger()
$(function() {
setInterval(function() {
$('#slider').trigger('slide'); //triggers 'slide'
},2000); //Performs sliding every 2 seconds
});
$('#slider').bind('slide', function() {
//write your slide methods
});
修改:代码&演示页面: http://jsbin.com/efoje4
HTML :
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<meta charset=utf-8 />
<title>Hello world !!</title>
<style type="text/css">
div {margin:0px auto;padding:0px; width:300px;height:200px; overflow:hidden; }
ul { margin :0px; padding:0px; list-style:none; width:1200px;height:200px;}
li{float : left;margin:0px padding:0px; width:300px;height:200px; }
img { margin:0px padding:0px; width:300px;height:200px; }
</style>
</head>
<body>
<div>
<ul id="slider">
<li>
<img src="http://mystuffspace.com/graphic/adorable-puppies.jpg"/>
</li>
<li>
<img src="http://2.bp.blogspot.com/_TP5pGCYHvfg/SyMRSFukqJI/AAAAAAAAA0Y/yIP62DYXOP8/s400/Puppies.jpg"/>
</li>
<li>
<img src="http://temunot.files.wordpress.com/2008/11/4-cute-puppies-wallpaper-640x480.jpg" />
</li>
<li>
<img src="http://mystuffspace.com/graphic/puppies-2.jpg" />
</li>
</ul>
</div>
</body>
</html>
JavaScript :
var margin = 0, slider = $('#slider'), width = 300;
$(document).ready(function() {
setInterval(function() {
slider.trigger('slide');
},2000);
});
slider.bind('slide',function() {
if(margin <= slider.width() *(-1) + width) {
margin = 0;
}else if(margin <= slider.width()) {
margin -= width;
}
slider.animate({marginLeft : margin},500);
});
答案 1 :(得分:0)
<div class="extra_wrapper">
<div id="gallery" class="content">
<div class="slideshow-container">
<div id="loading" class="loader"></div>
<div id="slideshow" class="slideshow"></div>
</div>
</div>
<div id="thumbs" class="navigation">
<ul id="slider" class="thumbs noscript">
<li> <a class="thumb" name="leaf" href="images/stories/big_pic1.png"> <img src="images/stories/gallery_pic1.jpg" /></a></li>
<li> <a class="thumb" name="leaf" href="images/stories/big_pic2.png"> <img src="images/stories/gallery_pic2.jpg" /></a></li>
<li> <a class="thumb" name="leaf" href="images/stories/big_pic3.png"> <img src="images/stories/gallery_pic3.jpg" /></a></li>
<li> <a class="thumb" name="leaf" href="images/stories/big_pic4.png"> <img src="images/stories/gallery_pic4.jpg" /></a></li>
<li class="last"> <a class="thumb" name="leaf" href="images/stories/big_pic5.png"> <img src="images/stories/gallery_pic5.jpg" /></a></li>
</ul>
</div>
</div>
这是在我的网站上运行照片库的模块脚本 http://mirelmuhendislik.com/home-tr/ 这里 当我添加你的脚本时,它不仅移动了整个照片库,而且还有一些假设要跳过的大照片。 我想让下面的小照片保持不动
答案 2 :(得分:0)
在这个模板中,他们使用了jquery galleriffic库 也许我们可以将它设置为在下面的设置中自动滑动。
var defaults = {
delay: 3000,
numThumbs: 20,
preloadAhead: 40, // Set to -1 to preload all images
enableTopPager: false,
enableBottomPager: true,
maxPagesToShow: 7,
imageContainerSel: '',
captionContainerSel: '',
controlsContainerSel: '',
loadingContainerSel: '',
renderSSControls: true,
renderNavControls: true,
playLinkText: 'Play',
pauseLinkText: 'Pause',
prevLinkText: 'Previous',
nextLinkText: 'Next',
nextPageLinkText: 'Next ›',
prevPageLinkText: '‹ Prev',
enableHistory: false,
enableKeyboardNavigation: true,
autoStart: false,
syncTransitions: false,
defaultTransitionDuration: 1000,
onSlideChange: undefined, // accepts a delegate like such: function(prevIndex, nextIndex) { ... }
onTransitionOut: undefined, // accepts a delegate like such: function(slide, caption, isSync, callback) { ... }
onTransitionIn: undefined, // accepts a delegate like such: function(slide, caption, isSync) { ... }
onPageTransitionOut: undefined, // accepts a delegate like such: function(callback) { ... }
onPageTransitionIn: undefined, // accepts a delegate like such: function() { ... }
onImageAdded: undefined, // accepts a delegate like such: function(imageData, $li) { ... }
onImageRemoved: undefined // accepts a delegate like such: function(imageData, $li) { ... }
};
答案 3 :(得分:0)
是否存在使用www访问网站的问题。字首 好的问题解决了 我刚刚编辑了jquery galleriffic代码和 取代
if(this.autoStart) {
this.play();
}
与
this.play();
你可能会问为什么我没有设置autoStart = 1 好吧,我试过但它没有工作,我不知道为什么