jquery旋转图像轮播 [英] jquery rotating image carousel
问题描述
i知道这可能听起来很琐碎
i有一个手动编码jquery图像轮播的任务
这里是我的场景
i有一个div，我们可以调用它：imgc
里面我有8个图像但是我已经将imgc溢出设置为隐藏，这样它只显示5个图像一次浮动彼此左边
我想要的是当我点击imgContainer下面的链接时，我想让div动画到右边，其偏移量相当于显示下一张图像的图像宽度。我还希望最初在imgContainer div中的第一个图像在div中的最后一个图像（成为最后一个图像）之后移动
我的标记：
< body > ;
< div id = 包装 >
< div id = imgc >
< img src = 内容/ images / Chrysanthemum.jpg / < span class =code-keyword>>
< img src = 内容/ images / Desert.jpg / >
< img src = Content / images / Hydrangeas.jpg / >
< img src = Content / images / Jellyfish.jpg / >
< img src = 内容/ images / Koala.jpg / >
< ; img src < span class =code-keyword> = Content / images / Lighthouse.jpg / >
< img src = 内容/ images / Penguins.jpg / >
< img src = 内容/ images / Tulips.jpg / >
< / div >
< a href = ＃ id = nxt > & gt;& gt; < / a >
< / div >
< / body >
我的css：
＃包装器 {
width ： 1000px;
overflow-x ： hidden;
}
＃ imgc {
width ： 2000px;
position ： relative;
}
＃ imgc img {
width ： 175px;
height ： 175px;
padding ： 5px;
float ： 离开;
}
我的js：
$（document）.ready（function（）{
var frst = null ;
var lst = null ;
$（' ＃imgc'）。ready（function（）{
$（' ＃nxt'）。click（function（）{
$（' ＃imgc'）。animate（{left：' - = 185'}， 1000 ，' linear'，function（）{
$（' ＃imgc img'）。first（）。insertAfter（$（' imgc img '）。last）
alert（$（' ＃imgc img' ）。长度）;
}）
}）
}）;
}）
警报应该显示9？ （只是使用警报进行测试）
请告诉我哪里出错了
非常感谢：）
< blockquote>（document）.ready（function（）{
var frst = null ;
var lst = null ;
（' ＃imgc'）。ready（function（）{
（ ' ＃nxt'）。click（function（）{
hey all
i know this might sound so trivial
i have a task of manually coding a jquery image carousel
here is my scenario
i have a div, lets call it: imgc
inside the div i have 8 images but i have overflow of imgc set to hidden so that it shows only 5 images at once floating to the left of each other
What i want is when i click on a link below the imgContainer,i want the div to animate to the right with an offset equivalent to the images width showing the next image.I also want the image that was initially the first one in the imgContainer div to be moved after the last image(become the last image) in the div
My markup:
<body>
<div id="wrapper">
<div id="imgc">
<img src="Content/images/Chrysanthemum.jpg" />
<img src="Content/images/Desert.jpg" />
<img src="Content/images/Hydrangeas.jpg" />
<img src="Content/images/Jellyfish.jpg" />
<img src="Content/images/Koala.jpg" />
<img src="Content/images/Lighthouse.jpg" />
<img src="Content/images/Penguins.jpg" />
<img src="Content/images/Tulips.jpg" />
</div>
<a href="#" id="nxt">>></a>
</div>
</body>
my css:
#wrapper{
width:1000px;
overflow-x:hidden;
}
#imgc{
width:2000px;
position:relative;
}
#imgc img{
width:175px;
height:175px;
padding:5px;
float:left;
}
my js:
$(document).ready(function () {
var frst = null;
var lst = null;
$('#imgc').ready(function () {
$('#nxt').click(function () {
$('#imgc').animate({ left: '-=185' }, 1000, 'linear', function () {
$('#imgc img').first().insertAfter($('imgc img').last)
alert($('#imgc img').length);
})
})
});
})
isnt the alert supposed to show 9? (just testing using alert)
Please let me know where have I gone wrong
Many thanks :)
(document).ready(function () { var frst = null; var lst = null;
('#imgc').ready(function () {
('#nxt').click(function () {
这篇关于jquery旋转图像轮播的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
