Jquery循环插件 - 从一个脚本循环插件多个div？ [英] Jquery cycle plugin - Multiple divs with cycle plugin from one script?
问题描述
到目前为止，我使用的代码显示了第一个div中的所有图片，但是当我点击我的徽标时（这是链接到index.html）所有的图像突然出现的地方，并与循环插件工作。
这是我头脑中的
< script type =text / javascriptsrc =js / jquery-1.3.js>< / script>
< script type =text / javascriptsrc =js / jquery.cycle.all.js>< / script>
< script type =text / javascript>
$（document）.ready（function（）{
$（'＃box1'）。cycle（{
fx：'fade'，
speed：300，
timeout：0，
next：'＃box1'，
pause：1
}）;
}）;
$ b $（文档）.ready（函数（）{
$（'＃box2'）。cycle（{
fx：'fade'，
速度： 300，
超时：0，
下一个：'＃box2'，
暂停：1
}）;
}）;
$ b $（document）.ready（function（）{
$（'＃box3'）。cycle（{
fx：'fade'，
speed： 300，
timeout：0，
next：'＃box3'，
pause：1
}）;
}）;
< / script>
body ...
< div id =container>
< div id =box1class =box>
< img src =images / car.jpgalt =images / car.jpg/>
< img src =images / van.jpgalt =images / van.jpg/>
< / div>
< div id =box2class =box>
< img src =images / bottle.jpgalt =images / bottle.jpg/>
< img src =images / pattern.jpgalt =images / pattern.jpg/>
< / div>
< div id =box3class =box>
< img src =images / car.jpgalt =images / car.jpg/>
< img src =images / van.jpgalt =images / van.jpg/>
< / div>
< / div>
在css中，容器的位置是：absolute;
我确定有一个简单的解决方案，但我搜索了stackoverflow和其他网站无济于事。任何帮助都非常感谢!!!!
我做了这个例子：
http://jsfiddle.net/oceog/YHLz2/11/
p> $（function（）{
$（'。box'）。each（function（）{
var $ this = $（this）;
$ this.cycle（{
fx：'fade'，
speed：300，
timeout：0，
next ：$ this，
pause：1
}）;
}）;
}）;
它按预期工作，您也是。可能是你使用过旧的jQuery？ （当前是1.8）
如果回答不符合您的问题，请问您可以编辑jsfiddle以显示问题所在？
当我点击页面时，
- 在我的徽标上，链接到index.html
加载网页时 你加载不index.html，但index.htm，或index.php或其他东西，检查您的网站目录
jsfiddle应该重复您的问题，而不是只显示你的结构 b
$ b
如果你的网站在互联网上 - 给我链接，我会检查
尝试将您的代码更改为以下内容：
$（document）.load（function（）{
$（'。box'）。each（function（）{
var $ this = $（this）;
$ this.cycle（{
fx：'fade'，
速度：300，
超时：0，
下一个：$ this，
暂停：1
}）;
}）;
}）;
Im new to jquery/javascript and need help!
I want to use the cycle plugin in multiple divs with different images in each div. Each div is the same size and each image is the same size.
The code I have used so far shows all images in the first div but when I click on my logo (which is linked to index.html) all the images suddenly appear in place and working with the cycle plugin.
This is what I have in the head
<script type="text/javascript" src="js/jquery-1.3.js"></script>
<script type="text/javascript" src="js/jquery.cycle.all.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#box1').cycle({
fx: 'fade',
speed: 300,
timeout: 0,
next: '#box1',
pause: 1
});
});
$(document).ready(function(){
$('#box2').cycle({
fx: 'fade',
speed: 300,
timeout: 0,
next: '#box2',
pause: 1
});
});
$(document).ready(function(){
$('#box3').cycle({
fx: 'fade',
speed: 300,
timeout: 0,
next: '#box3',
pause: 1
});
});
</script>
body...
<div id="container">
<div id="box1" class="box">
<img src="images/car.jpg" alt="images/car.jpg"/>
<img src="images/van.jpg" alt="images/van.jpg"/>
</div>
<div id="box2" class="box">
<img src="images/bottle.jpg" alt="images/bottle.jpg"/>
<img src="images/pattern.jpg" alt="images/pattern.jpg"/>
</div>
<div id="box3" class="box">
<img src="images/car.jpg" alt="images/car.jpg"/>
<img src="images/van.jpg" alt="images/van.jpg"/>
</div>
</div>
In the css the container is position: absolute;
I'm sure there is a simple solution but I have searched stackoverflow and other sites to no avail. Any help is greatly appreciated!!!!
I made this example:
http://jsfiddle.net/oceog/YHLz2/11/
$(function() {
$('.box').each(function() {
var $this = $(this);
$this.cycle({
fx: 'fade',
speed: 300,
timeout: 0,
next: $this,
pause: 1
});
});
});
it works as expected, yours too. May be you use too old jquery ? (current is 1.8)
if answer not fit your problem, can you please edit jsfiddle to show where the problem ?
- when I load the page
- when I click on my logo, linked to index.html
I think when you load the page you load not index.html, but index.htm, or index.php or something else, check your site directory
The jsfiddle should repeat your problem, not just show your structure
if your site on the internet - give me link and i will check
Try to change your code to the following:
$(document).load(function() {
$('.box').each(function() {
var $this = $(this);
$this.cycle({
fx: 'fade',
speed: 300,
timeout: 0,
next: $this,
pause: 1
});
});
});
这篇关于Jquery循环插件 - 从一个脚本循环插件多个div？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
