//设置图片下标
var curIndex = 0;
var autoChange=setInterval(function(){
if(curIndex < $('#bannerItem li').length-1){
curIndex++;
}else{
curIndex =0;
}
changeTo(curIndex);
},2500);
//自动变化
function changeTo(num){
$("#bannerItem").find("li").removeClass("imgOn").hide().eq(num).fadeIn(1000).addClass("imgOn");
};
$('#banner-left').click(function(){
clearInterval(autoChange);
changeTo(curIndex-1);
autoChange=setInterval(function(){
if(curIndex < $('#bannerItem li').length-1){
curIndex++;
}else{
curIndex =0;
}
},2500);
});
//切换图片
function changeTo(num){
$("#bannerItem").find("li").removeClass("imgOn").hide().eq(num).fadeIn(1000).addClass("imgOn");
};
//问题在这里
$('#banner-pre').click(function(){
clearInterval(autoChange);
changeTo(curIndex-1);
autoChange=setInterval(function(){
if(curIndex < $('#bannerItem li').length-1){
curIndex++;
}else{
curIndex =0;
}
},2500);
});
/* $('#banner-next').click(function(){
clearInterval(autoChange);
});*/
这样的话点击上一张图会卡住不能继续自动播放,再点击会一直停在第一张图,不知道该如何处理
没仔细瞅代码,说下逻辑
1.监听左右两个按钮事件
2.获取当前停留图片的index
3.判断左右按钮哪个被点击相应的index++,或index--
(注意,此处需判断边界,即停留在第一张图片的时候,点击向左的按钮是要切换到最后一张图片,还是停留在这;停留在最后一张图片的时候同理)
4.获取index,切换图片,也就是你代码里的changTo函数,此处在加上缓冲效果,可以由css3 translate实现,也可以自己写缓冲函数,jq里的animate函数也行
版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。