下一张和上一张幻灯片按钮功能 i++, i--
上次问问题的经历很棒,我想我会回来寻求更多帮助。你们太棒了。先感谢您。
我正在使用一个特色帖子滑块,可以自动前进 4 个帖子。我想添加下一个和上一个按钮。我知道我需要将某种 .click() 事件附加到 #movers-next 和 #movers-previous,但到目前为止我尝试过的所有操作都导致性能参差不齐。
您能帮我编写一个循环变量“curclicked”的稳定方法吗? (注意:.stripNav ul li a 是由插件自动生成的,作为循环帖子的一种方式)
谢谢。
<script type="text/javascript">
var theInt = null;
var $crosslink, $navthumb;
var curclicked = 0;
theInterval = function(cur){
clearInterval(theInt);
if( typeof cur != 'undefined' )
curclicked = cur;
$crosslink.removeClass("active-thumb");
$navthumb.eq(curclicked).parent().addClass("active-thumb");
jQuery(".stripNav ul li a").eq(curclicked).trigger('click');
theInt = setInterval(function(){
$crosslink.removeClass("active-thumb");
$navthumb.eq(curclicked).parent().addClass("active-thumb");
jQuery(".stripNav ul li a").eq(curclicked).trigger('click');
curclicked++;
if( 6 == curclicked )
curclicked = 0;
}, 8000);
};
jQuery(function(){
jQuery("#main-photo-slider").codaSlider();
$navthumb = jQuery(".nav-thumb");
$crosslink = jQuery(".cross-link");
$navthumb
.click(function() {
var $this = jQuery(this);
theInterval($this.parent().attr('href').slice(1) - 1);
return false;
});
theInterval();
});
<div id="page-wrap">
<div class="slider-wrap">
<div id="main-photo-slider" class="csw">
<div class="panelContainer">
<div class="panel" title="Panel 1">
<div class="wrapper">
<img src='http://thevarsitysquad.com/wordpress/love2eat/wp-content/files_flutter/th_b700d8c1271c49208e0f9230a1a215f2_1257387907thai_cuisine.jpg' /> <div class="photo-meta-data">
Etiam eu mauris augue <p>Suscipit a aliquet a, gravida non erat. Integer euismod felis nec…</p>
</div>
</div>
</div>
<div class="panel" title="Panel 2">
<div class="wrapper">
<img src='http://thevarsitysquad.com/wordpress/love2eat/wp-content/files_flutter/th_b700d8c1271c49208e0f9230a1a215f2_1257387756EthnicCuisine.jpg' /> <div class="photo-meta-data">
Etiam eu mauris augue <p>Suscipit a aliquet a, gravida non erat. Integer euismod felis nec…</p>
</div>
</div>
</div>
<div class="panel" title="Panel 3">
<div class="wrapper">
<img src='http://thevarsitysquad.com/wordpress/love2eat/wp-content/files_flutter/th_b700d8c1271c49208e0f9230a1a215f2_1257386373slider-primary.jpg' /> <div class="photo-meta-data">
Etiam eu mauris augue <p>Suscipit a aliquet a, gravida non erat. Integer euismod felis nec…</p>
</div>
</div>
</div>
<div class="panel" title="Panel 4">
<div class="wrapper">
<img src='http://thevarsitysquad.com/wordpress/love2eat/wp-content/files_flutter/th_b700d8c1271c49208e0f9230a1a215f2_1257387711cuisine.jpg' /> <div class="photo-meta-data">
Etiam eu mauris augue <p>Suscipit a aliquet a, gravida non erat. Integer euismod felis nec…</p>
</div>
</div>
</div>
</div>
</div>
<div id="movers-row">
<a id="movers-previous" href="#"><img src="http://thevarsitysquad.com/wordpress/love2eat/wp-content/themes/eater/img/slider-button-previous.gif" /></a>
<div><a href="#1" class="cross-link"><img src='http://thevarsitysquad.com/wordpress/love2eat/wp-content/files_flutter/th_b700d8c1271c49208e0f9230a1a215f2_1257387907thai_cuisine.jpg' /></a></div>
<div><a href="#2" class="cross-link"><img src='http://thevarsitysquad.com/wordpress/love2eat/wp-content/files_flutter/th_b700d8c1271c49208e0f9230a1a215f2_1257387756EthnicCuisine.jpg' /></a></div>
<div><a href="#3" class="cross-link"><img src='http://thevarsitysquad.com/wordpress/love2eat/wp-content/files_flutter/th_b700d8c1271c49208e0f9230a1a215f2_1257386373slider-primary.jpg' /></a></div>
<div><a href="#4" class="cross-link"><img src='http://thevarsitysquad.com/wordpress/love2eat/wp-content/files_flutter/th_b700d8c1271c49208e0f9230a1a215f2_1257387711cuisine.jpg' /></a></div>
<a id="movers-next" href="#"><img src="http://thevarsitysquad.com/wordpress/love2eat/wp-content/themes/eater/img/slider-button-next.jpg" /></a>
</div>
</div>
</div>
I had a great experience asking a question last time and thought I'd come back for more help. You guys are wonderful. Thank you in advance.
I am working with a featured post slider that advances through 4 posts automatically. I would like to add next and previous buttons. I know that I need to attach some kind of .click() event to #movers-next and #movers-previous but everything I've tried so far has resulted in spotty performance.
Can you please help me code a stable method of looping through variable 'curclicked'?
(NOTE: .stripNav ul li a is auto-generated by the plugin as a means of looping through posts)
Thank You.
<script type="text/javascript">
var theInt = null;
var $crosslink, $navthumb;
var curclicked = 0;
theInterval = function(cur){
clearInterval(theInt);
if( typeof cur != 'undefined' )
curclicked = cur;
$crosslink.removeClass("active-thumb");
$navthumb.eq(curclicked).parent().addClass("active-thumb");
jQuery(".stripNav ul li a").eq(curclicked).trigger('click');
theInt = setInterval(function(){
$crosslink.removeClass("active-thumb");
$navthumb.eq(curclicked).parent().addClass("active-thumb");
jQuery(".stripNav ul li a").eq(curclicked).trigger('click');
curclicked++;
if( 6 == curclicked )
curclicked = 0;
}, 8000);
};
jQuery(function(){
jQuery("#main-photo-slider").codaSlider();
$navthumb = jQuery(".nav-thumb");
$crosslink = jQuery(".cross-link");
$navthumb
.click(function() {
var $this = jQuery(this);
theInterval($this.parent().attr('href').slice(1) - 1);
return false;
});
theInterval();
});
<div id="page-wrap">
<div class="slider-wrap">
<div id="main-photo-slider" class="csw">
<div class="panelContainer">
<div class="panel" title="Panel 1">
<div class="wrapper">
<img src='http://thevarsitysquad.com/wordpress/love2eat/wp-content/files_flutter/th_b700d8c1271c49208e0f9230a1a215f2_1257387907thai_cuisine.jpg' /> <div class="photo-meta-data">
Etiam eu mauris augue <p>Suscipit a aliquet a, gravida non erat. Integer euismod felis nec…</p>
</div>
</div>
</div>
<div class="panel" title="Panel 2">
<div class="wrapper">
<img src='http://thevarsitysquad.com/wordpress/love2eat/wp-content/files_flutter/th_b700d8c1271c49208e0f9230a1a215f2_1257387756EthnicCuisine.jpg' /> <div class="photo-meta-data">
Etiam eu mauris augue <p>Suscipit a aliquet a, gravida non erat. Integer euismod felis nec…</p>
</div>
</div>
</div>
<div class="panel" title="Panel 3">
<div class="wrapper">
<img src='http://thevarsitysquad.com/wordpress/love2eat/wp-content/files_flutter/th_b700d8c1271c49208e0f9230a1a215f2_1257386373slider-primary.jpg' /> <div class="photo-meta-data">
Etiam eu mauris augue <p>Suscipit a aliquet a, gravida non erat. Integer euismod felis nec…</p>
</div>
</div>
</div>
<div class="panel" title="Panel 4">
<div class="wrapper">
<img src='http://thevarsitysquad.com/wordpress/love2eat/wp-content/files_flutter/th_b700d8c1271c49208e0f9230a1a215f2_1257387711cuisine.jpg' /> <div class="photo-meta-data">
Etiam eu mauris augue <p>Suscipit a aliquet a, gravida non erat. Integer euismod felis nec…</p>
</div>
</div>
</div>
</div>
</div>
<div id="movers-row">
<a id="movers-previous" href="#"><img src="http://thevarsitysquad.com/wordpress/love2eat/wp-content/themes/eater/img/slider-button-previous.gif" /></a>
<div><a href="#1" class="cross-link"><img src='http://thevarsitysquad.com/wordpress/love2eat/wp-content/files_flutter/th_b700d8c1271c49208e0f9230a1a215f2_1257387907thai_cuisine.jpg' /></a></div>
<div><a href="#2" class="cross-link"><img src='http://thevarsitysquad.com/wordpress/love2eat/wp-content/files_flutter/th_b700d8c1271c49208e0f9230a1a215f2_1257387756EthnicCuisine.jpg' /></a></div>
<div><a href="#3" class="cross-link"><img src='http://thevarsitysquad.com/wordpress/love2eat/wp-content/files_flutter/th_b700d8c1271c49208e0f9230a1a215f2_1257386373slider-primary.jpg' /></a></div>
<div><a href="#4" class="cross-link"><img src='http://thevarsitysquad.com/wordpress/love2eat/wp-content/files_flutter/th_b700d8c1271c49208e0f9230a1a215f2_1257387711cuisine.jpg' /></a></div>
<a id="movers-next" href="#"><img src="http://thevarsitysquad.com/wordpress/love2eat/wp-content/themes/eater/img/slider-button-next.jpg" /></a>
</div>
</div>
</div>
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论