帮助自动旋转无限jquery传送带。无法让轮播无限循环而不是“倒带” [英] Help with auto-rotating infinite jquery carousel. Can not get carousel to loop infinitely instead of 'rewind'
问题描述
我正在用jquery构建一个自动旋转的图像传送带，我试图让图像无限旋转，而不是当它到达最后一个图像时，它会回退到第一个图像并重新开始。不幸的是，我在jquery游戏中相当新，所以我在解决这个问题上遇到了一些麻烦。我已经尝试将在线教程中找到的代码拼凑在一起，并将其修改为适合我的代码，但没有运气。我想我可能不得不克隆现有的图像，在它们循环后出现，但我不知道要走什么方向。任何帮助都非常感谢。以下是我正在处理的代码：
$ b HTML：
< div class =main_view>
< div style =width：165px; height：98px; margin：0; padding：0; border：0;>
< img src =/ content / template_images / wanalogo-blackBG-165x98.png/>
< / div>
< div class =window>
< ul class =image_reel>
< li>< a href =/ MLB / Philadelphia-Phillies-Ticketstitle =Phillies>< img src =/ content / template_images / Banners / SideBanner / imgscroll1.jpgalt =Phillies/>< / a>< / li>
< li>< a href =/ NFL / Philadelphia-Eagles-Ticketstitle =Eagles>< img src =/ content / template_images / Banners / SideBanner / imgscroll2.jpgalt =老鹰/>< / a>< / li>
< li>< a href =/ NHL / Philadelphia-Flyers-Ticketstitle =Flyers>< img src =/ content / template_images / Banners / SideBanner / imgscroll3.jpgalt =Flyers/>< / a>< / li>
< li>< a href =/ NBA / Philadelphia-76ers-Ticketstitle =76ers>< img src =/ content / template_images / Banners / SideBanner / imgscroll4.jpgalt =76ers/>< / a>< / li>
< li>< a href =/ NCAA-Basketballtitle =NCAA Basketball>< img src =/ content / template_images / Banners / SideBanner / imgscroll8.jpgalt =NCAA篮球/>< / a>< / li>
< li>< a href =/ Concerts-Ticketstitle =Concerts>< img src =/ content / template_images / Banners / SideBanner / imgscroll5.jpgalt =Concerts />< / A>< /锂>
< li>< a href =/ Theater-Ticketstitle =Theatre>< img src =/ content / template_images / Banners / SideBanner / imgscroll6.jpgalt =Theatre />< / A>< /锂>
< li>< a href =/ Other-Events-Ticketstitle =Family Events>< img src =/ content / template_images / Banners / SideBanner / imgscroll7.jpgalt = 家庭活动/>< / a>< / li>
< / ul>
< / div>
< div style =width：170px; height：290px; border：0; padding：0; margin：-290px 0px 0px 0px;>
< img src =/ content / template_images / black-fade-border-170x290.png/>
< / div>
< div class =botTextBox>
< center>
< div class =botText>
< a href =/ MLB / Philadelphia-Phillies-Ticketstitle =Phillies> Phillies< / p>< / a>
< a href =/ NFL / Philadelphia-Eagles-Ticketstitle =Eagles>< p> Eagles< / p>< / a>
< a href =/ NHL / Philadelphia-Flyers-Ticketstitle =Flyers>< p> Flyers< / p>< / a>
< a href =/ NBA / Philadelphia-76ers-Ticketstitle =76ers>< p> 76ers< / p>< / a>
< a href =/ NCAA-Basketballtitle =NCAA Basketball>< p> NCAA Basketball< / p>< / a>
< a href =/ Concerts-Ticketstitle =Concerts>< p> Concert< / p>< / a>
< a href =/ Theater-Ticketstitle =剧院>< p>剧院< / p>< / a>
< a href =/ Other-Events-Ticketstitle =家庭活动>< p>家庭活动< / p>< / a>
< / div>
< / center>
< / div>
< div class =paging>
< a href =＃ =1> 1< / a>
< a href =＃ =2> 2< / a>
< a href =＃ =3> 3< / a>
< a href =＃ =4> 4< / a>
< a href =＃ =5> 5< / a>
< a href =＃ =6> 6< / a>
< a href =＃ =7> 7< / a>
< a href =＃ =8> 8< / a>
< / div>
< / div>
Javascript
< pre $ $（document）.ready（function（）{
$（。paging）。show（）;
$（。paging a：first ）.addClass（active）;
var imageWidth = $（。window）。width（）;
var imageSum = $（。image_reel img）。size （）;
var imageReelWidth = imageWidth * imageSum;
$ b $（。image_reel）。css（{'width'：imageReelWidth}）;
rotate = function（）{
var triggerID = $ active.attr（rel） - 1; //获取滑动次数
var image_reelPosition = triggerID * imageWidth; //确定图像的距离卷需要滑动
$（。paging a）。removeClass（'active'）; //删除所有活动类
$ active.addClass（'active'）; //添加活动类（$ active在rotateSwitch函数中声明）
//滑块动画
$（。image_reel）。animate（{
left：-image_reelPosition
}，750）;
$（。b otText）。animate（{
left：-image_reelPosition
}，750）;
};
//旋转和时间事件
rotateSwitch = function（）{
play = setInterval（function（）{//设置计时器 - 每隔X秒重复一次
$ active = $（'。paging a.active'）。next（）; //移动到下一个分页
if（$ active.length === 0）{//如果分页到达结尾...
$ active = $（'。paging a：first'）; //返回第一个
}
rotate（）; //触发分页和滑块函数
}，1500）; //定时器速度（毫秒）（7秒）
};
rotateSwitch（）; //启动时运行函数
$ b $ //悬停
$（。image_reel a）。hover（function（）{
clearInterval（play）; //停止旋转
}，函数（）{
rotateSwitch（）; //恢复旋转定时器
}）;
$ b $ //点击
$（。paging a）。click（function（）{
$ active = $（this）; //激活点击分页
//重置定时器
clearInterval（play）; //停止旋转
rotate（）; //立即触发旋转
rotateSwitch（）; //恢复旋转定时器
返回false; //防止浏览器跳转到链接锚
}）;
}）;
编辑 - CSS：
.main_view {
float：left;
overflow：hidden;
职位：亲属;
width：170px;
height：475px;
背景颜色：黑色;
border：0;
margin：2px;
padding：2px 0px 2px 0px;
text-align：center;
}
.window {
height：290px;宽度：170像素;
overflow：hidden;
职位：亲属;
背景颜色：黑色;
border：0;
padding：0px;
margin：0px;
}
.image_reel {
position：absolute;
top：0;左：0;
margin-left：-40px;
}
.image_reel img {float：left;}
.botTextBox {
height：87px;宽度：1360px;
overflow：hidden;
职位：亲属;
background：url（/content/template_images/black-side-bottom-170x87.png）no-repeat;
margin：0px;
padding：0px;
}
.botText {
position：relative;
top：0;左：0;
margin：32px 0px 0px 0px;
padding：0;
text-align：center;
}
.botText p {width：170px; float：left;}
.paging {
position：absolute;
bottom：40px;右：-7000px;
width：178px;高度：47px;
z-index：100;
text-align：center;
line-height：40px;
display：none;
}
.paging a {
padding：5px;
text-decoration：none;
颜色：#fff;
}
.paging a.active {
font-weight：bold;
背景：＃920000;
border：1px solid＃610000;
-moz-border-radius：3px;
-khtml-border-radius：3px;
-webkit-border-radius：3px;
}
.paging a：hover {font-weight：bold;}
...其实你可以看到右侧的Flash横幅，我试图用jquery替换...
再一次，我真的很感激帮助这一点。就像我说的，我在使用jQuery方面有点新，我一整天都在磕磕绊绊。
Peter Ajtai对一种方法有很好的总结，但我有另一种方法，只需要添加一些行到您的脚本。
基本上，它会克隆第一个图像，文本和传呼机链接，并将其添加到最后。当动画在最后一个图像（现在实际上是第一个图像）结束时，窗口的左侧定位被重置为零，动画重新开始。我试图用 [新] 添加注释，以便更轻松地找到更改。并且，我制作了演示，希望它能够很清楚。
$（document）.ready（function（）{
$（。paging）。show（）;
$（。分页a：第一个）.addClass（active）;
var imageWidth = $（。window）.width（）;
// [NEW] add one，since我们将第一个图像添加到最后
var imageSum = $（。image_reel img）。size（）+ 1;
var imageReelWidth = imageWidth * imageSum;
// [NEW]包括修改botTextBox的宽度
$（。image_reel，.botTextBox）。css（{'width'：imageReelWidth}）;
// [NEW] clone （。image_reel li：first）。clone（）。appendTo（$（。image_reel））;
$（。image_reel li：first）。 （.botText a：first）。clone（）。appendTo（$（。botText））; $ b $（。paging）。append（'< a href =＃ = '+ imageSum +'>< / a>'）; //不要在链接中包含数字
rotate = functio n（）{
var triggerID = $ active.attr（rel） - 1; //获取滑动次数
var image_reelPosition = triggerID * imageWidth; //确定图像卷轴需要滑动的距离
$（。paging a）。removeClass（'active'）; //删除所有活动类
$ active.addClass（'active'）; //添加活动类（$ active在rotateSwitch函数中声明）
[新]滑块动画
$（。image_reel，.botText）。animate（{
left：-image_reelPosition
}，750，function（）{
// [NEW]回调函数（动画完成时调用）
if（triggerID == imageSum - 1） {
//如果我们回到第一个图像，重置窗口位置
$（。image_reel，.botText）.css（'left'，0）;
}
}）;
};
//旋转和时间事件
rotateSwitch = function（）{
play = setInterval（function（）{//设置计时器 - 每隔X秒重复一次
$ active = $（'。paging a.active'）。next（）; //移动到下一个分页
if（$ active.length === 0）{//如果分页到达结尾...
// [NEW]回到第二张图片（第一张现在是最后一张）
$ active = $（'。paging a：eq（1）'）;
}
rotate（）; //触发分页和滑块函数
}，1500）; //定时器速度（毫秒）（7秒）
};
rotateSwitch（）; //启动时运行函数
$ b $ //悬停
$（。image_reel a）。hover（function（）{
clearInterval（play）; //停止旋转
}，函数（）{
rotateSwitch（）; //恢复旋转定时器
}）;
$ b $ //点击
$（。paging a）。click（function（）{
$ active = $（this）; //激活点击分页
//重置定时器
clearInterval（play）; //停止旋转
rotate（）; //立即触发旋转
rotateSwitch（）; //恢复旋转定时器
返回false; //防止浏览器跳转到链接锚
}）;
}）;
哦，还有最后一件事...我添加了缺少的< p> ; 在Phillies前面 botText
I'm building an auto-rotating image-carousel with jquery and I'm trying to get the images to rotate infinitely rather than when it reaches the last image, it 'rewinds' back to the first image and starts again. Unfortunately, I'm rather new at the jquery game, so I'm having some trouble getting this to work. I've tried piecing together code I've found in tutorials online and modifying it to fit my code, but no luck. I think I might have to clone the existing images to appear after they cycle through, but I'm not sure what direction to go in. Any assistance is greatly appreciated. Here's the code I'm working with below:
HTML:
<div class="main_view">
<div style="width:165px; height:98px; margin:0; padding:0; border:0;">
<img src="/content/template_images/wanalogo-blackBG-165x98.png" />
</div>
<div class="window">
<ul class="image_reel">
<li><a href="/MLB/Philadelphia-Phillies-Tickets" title="Phillies"><img src="/content/template_images/Banners/SideBanner/imgscroll1.jpg" alt="Phillies" /></a></li>
<li><a href="/NFL/Philadelphia-Eagles-Tickets" title="Eagles"><img src="/content/template_images/Banners/SideBanner/imgscroll2.jpg" alt="Eagles" /></a></li>
<li><a href="/NHL/Philadelphia-Flyers-Tickets" title="Flyers"><img src="/content/template_images/Banners/SideBanner/imgscroll3.jpg" alt="Flyers" /></a></li>
<li><a href="/NBA/Philadelphia-76ers-Tickets" title="76ers"><img src="/content/template_images/Banners/SideBanner/imgscroll4.jpg" alt="76ers" /></a></li>
<li><a href="/NCAA-Basketball" title="NCAA Basketball"><img src="/content/template_images/Banners/SideBanner/imgscroll8.jpg" alt="NCAA Basketball" /></a></li>
<li><a href="/Concerts-Tickets" title="Concerts"><img src="/content/template_images/Banners/SideBanner/imgscroll5.jpg" alt="Concerts" /></a></li>
<li><a href="/Theatre-Tickets" title="Theatre"><img src="/content/template_images/Banners/SideBanner/imgscroll6.jpg" alt="Theatre" /></a></li>
<li><a href="/Other-Events-Tickets" title="Family Events"><img src="/content/template_images/Banners/SideBanner/imgscroll7.jpg" alt="Family Events" /></a></li>
</ul>
</div>
<div style="width:170px; height:290px; border:0; padding:0; margin: -290px 0px 0px 0px;">
<img src="/content/template_images/black-fade-border-170x290.png" />
</div>
<div class="botTextBox">
<center>
<div class="botText">
<a href="/MLB/Philadelphia-Phillies-Tickets" title="Phillies">Phillies</p></a>
<a href="/NFL/Philadelphia-Eagles-Tickets" title="Eagles"><p>Eagles</p></a>
<a href="/NHL/Philadelphia-Flyers-Tickets" title="Flyers"><p>Flyers</p></a>
<a href="/NBA/Philadelphia-76ers-Tickets" title="76ers"><p>76ers</p></a>
<a href="/NCAA-Basketball" title="NCAA Basketball"><p>NCAA Basketball</p></a>
<a href="/Concerts-Tickets" title="Concerts"><p>Concert</p></a>
<a href="/Theatre-Tickets" title="Theatre"><p>Theatre</p></a>
<a href="/Other-Events-Tickets" title="Family Events"><p>Family Event</p></a>
</div>
</center>
</div>
<div class="paging">
<a href="#" rel="1">1</a>
<a href="#" rel="2">2</a>
<a href="#" rel="3">3</a>
<a href="#" rel="4">4</a>
<a href="#" rel="5">5</a>
<a href="#" rel="6">6</a>
<a href="#" rel="7">7</a>
<a href="#" rel="8">8</a>
</div>
</div>
Javascript
$(document).ready(function() {
$(".paging").show();
$(".paging a:first").addClass("active");
var imageWidth = $(".window").width();
var imageSum = $(".image_reel img").size();
var imageReelWidth = imageWidth * imageSum;
$(".image_reel").css({'width' : imageReelWidth});
rotate = function(){
var triggerID = $active.attr("rel") - 1; //Get number of times to slide
var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide
$(".paging a").removeClass('active'); //Remove all active class
$active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function)
//Slider Animation
$(".image_reel").animate({
left: -image_reelPosition
}, 750 );
$(".botText").animate({
left: -image_reelPosition
}, 750 );
};
//Rotation and Timing Event
rotateSwitch = function(){
play = setInterval(function(){ //Set timer - this will repeat itself every X seconds
$active = $('.paging a.active').next(); //Move to the next paging
if ( $active.length === 0) { //If paging reaches the end...
$active = $('.paging a:first'); //go back to first
}
rotate(); //Trigger the paging and slider function
}, 1500); //Timer speed in milliseconds (7 seconds)
};
rotateSwitch(); //Run function on launch
//On Hover
$(".image_reel a").hover(function() {
clearInterval(play); //Stop the rotation
}, function() {
rotateSwitch(); //Resume rotation timer
});
//On Click
$(".paging a").click(function() {
$active = $(this); //Activate the clicked paging
//Reset Timer
clearInterval(play); //Stop the rotation
rotate(); //Trigger rotation immediately
rotateSwitch(); // Resume rotation timer
return false; //Prevent browser jump to link anchor
});
});
Edit- CSS:
.main_view {
float: left;
overflow:hidden;
position: relative;
width:170px;
height:475px;
background-color:black;
border:0;
margin:2px;
padding:2px 0px 2px 0px;
text-align:center;
}
.window {
height:290px; width:170px;
overflow: hidden;
position: relative;
background-color:black;
border:0;
padding:0px;
margin:0px;
}
.image_reel {
position: absolute;
top: 0; left: 0;
margin-left:-40px;
}
.image_reel img {float: left;}
.botTextBox {
height:87px; width:1360px;
overflow:hidden;
position:relative;
background:url(/content/template_images/black-side-bottom-170x87.png) no-repeat;
margin:0px;
padding:0px;
}
.botText {
position:relative;
top:0; left:0;
margin:32px 0px 0px 0px;
padding:0;
text-align:center;
}
.botText p {width:170px; float: left;}
.paging {
position: absolute;
bottom: 40px; right: -7000px;
width: 178px; height:47px;
z-index: 100;
text-align: center;
line-height: 40px;
display: none;
}
.paging a {
padding: 5px;
text-decoration: none;
color: #fff;
}
.paging a.active {
font-weight: bold;
background: #920000;
border: 1px solid #610000;
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
}
.paging a:hover {font-weight: bold;}
...actually you can see the flash banner on the right that i'm trying to replace with a jquery one...
Once again, I really appreciate any help with this. Like I said, I'm kinda new at working with jQuery and I've been stumbling over this all day. Thanks a million.
Peter Ajtai has a nice summary of one method, but I have another one which only requires adding a few lines to your script.
Basically it clones the first image, text and pager link and adds it to the end. When the animation ends on the last image (which is now actually the first), the left positioning of the window is reset to zero and the animation resumes. I tried to add comments with [NEW] so you can more easily find the changes. And, I made a demo so hopefully it will be clear.
$(document).ready(function() {
$(".paging").show();
$(".paging a:first").addClass("active");
var imageWidth = $(".window").width();
// [NEW] add one, since we are adding the first image to the end
var imageSum = $(".image_reel img").size() + 1;
var imageReelWidth = imageWidth * imageSum;
// [NEW] included modifying width of botTextBox
$(".image_reel, .botTextBox").css({'width' : imageReelWidth });
// [NEW] clone first image & text and add it to the end, include dummy paging
$(".image_reel li:first").clone().appendTo( $(".image_reel") );
$(".botText a:first").clone().appendTo( $(".botText") );
$(".paging").append('<a href="#" rel="' + imageSum + '"></a>'); // don't include the number in the link
rotate = function(){
var triggerID = $active.attr("rel") - 1; //Get number of times to slide
var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide
$(".paging a").removeClass('active'); //Remove all active class
$active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function)
// [NEW] Slider Animation
$(".image_reel, .botText").animate({
left: -image_reelPosition
}, 750, function(){
// [NEW] callback function (called when animation is done)
if (triggerID == imageSum - 1) {
// if we're back to the first image, reset the window position
$(".image_reel, .botText").css('left',0);
}
});
};
//Rotation and Timing Event
rotateSwitch = function(){
play = setInterval(function(){ //Set timer - this will repeat itself every X seconds
$active = $('.paging a.active').next(); //Move to the next paging
if ( $active.length === 0) { // If paging reaches the end...
// [NEW] go back to second image (the first is now the last)
$active = $('.paging a:eq(1)');
}
rotate(); //Trigger the paging and slider function
}, 1500); //Timer speed in milliseconds (7 seconds)
};
rotateSwitch(); //Run function on launch
//On Hover
$(".image_reel a").hover(function(){
clearInterval(play); //Stop the rotation
}, function(){
rotateSwitch(); //Resume rotation timer
});
//On Click
$(".paging a").click(function() {
$active = $(this); //Activate the clicked paging
//Reset Timer
clearInterval(play); //Stop the rotation
rotate(); //Trigger rotation immediately
rotateSwitch(); // Resume rotation timer
return false; //Prevent browser jump to link anchor
});
});
Oh and one last thing... I added the missing <p> in front of the Phillies botText
这篇关于帮助自动旋转无限jquery传送带。无法让轮播无限循环而不是“倒带”的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
