我刚刚从 template monster 那里买了一个 joomla 模板。 主页上有照片库，单击照片即可跳至照片。
我需要的是一个自动滑动的照片库，你知道我的意思，在预设的时间间隔内自动跳过照片。 http://www.mirelmuhendislik.com/home-tr/index.php 这是主页。
我尝试这样做
function clicker() {
document.getElementById('photo2').click();
}
setInterval("clicker()",5000);
但是没有成功。我不知道为什么它不起作用是因为 joomla 的 javascript 嵌入选项还是因为我的 javascript 代码？ 我该如何解决这个问题？ 我很高兴看到一些建议 请帮忙:/
最佳答案
在这种情况下，您可以使用.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);
});
关于php - 将点击跳过图库更改为滑动照片库？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/3641478/