jQuery手写幻灯片,点击下面的banner只能切换到下一张。下面是代码求解答
var Gindex=0;
var picArr=$("#picList li");
$("#picList").css("width",picArr.length*300);
function next(){
$("#banner li").removeClass("selected").eq(Gindex-3).addClass("selected");
$("#picList li:first-child").animate({
marginLeft:"-300px"
},1000,function(){
var temp=$(this).clone();
if(Gindex==3){
Gindex=0;
}else{
Gindex+=1;
}
$(this).remove();
temp.css({marginLeft:"0"});
$("#picList").append(temp);
});
// alert(index)
}
function prev(){
var temp=$("#picList li:last-child").clone();
$("#picList li:last-child").remove();
temp.css({marginLeft:"-300px"});
if(Gindex==0){
gindex=3;
}else{
Gindex-=1;
}
$("#banner li").removeClass("selected").eq(Gindex).addClass("selected");
$("#picList").prepend(temp);
$("#picList li:first-child").animate({marginLeft:"0"},1000)
// alert(index)
}
var interval=setInterval(next,2000);
$("#picList,#banner li").hover(function(){
clearInterval(interval);
},function(){
interval=setInterval(next,2000);
});
$("#banner li").click(function(){
var cInndex=$(this).index();
if(cInndex>Gindex){
for(var i=0;i<parseInt(cInndex-Gindex);i++){
// alert(parseInt(cInndex-Gindex));
next();
}
}else if(cInndex<Gindex){
for(var i=0;i<parseInt(Gindex-cInndex);i++){
// alert(parseInt(Gindex-cInndex));
prev();
}
}
})
</script>
运用克隆做的幻灯片效果,下面有个banner(4个li),点击某个则跳到该张图片。但是当前问题是如果现在是第一张图片显示,点击第三个li或者第四个li都只会切换到第二张图片。。求解
相关推荐
jquery全屏banner幻灯片带有淡入淡出自动轮播切换效果.zip
jquery全屏banner幻灯片带有淡入淡出自动轮播切换效果.zip
40款非常棒的jQuery 插件和制作教程(系列二)
jQuery 以其插件众多、独特、轻量以及支持大规模的网站开发闻名。本文继续向大家分享实用的 jQuery 插件,可以根据您的项目需要来选择使用。《《前一篇:40款非常棒的 jQuery 插件和制作教程(系列一)》》 Client Testimonials Powered by PHP, XML and jQuery ( 演示 | 下载 ) 结合 jQuery 和 XML 制作的客户感言插件,吸引更多用户使用你的产品。 Coding a Rotating Image Slideshow w/ CSS3 and jQuery ( 演示 | 下载 ) 使用 jQuery 和 CSS3 制作的带旋
全球检查台纸市场稳健增长:高频诊疗需求、产品升级与医疗供应链新机会.docx
全球检查台纸市场稳健增长:高频诊疗需求、产品升级与医疗供应链新机会
超音速扩散器空气动力学优化的MATLAB代码.zip
1.版本:matlab2014a/2019b/2024b 2.附赠案例数据可直接运行。 3.代码特点:参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象:计算机,电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。
数字化转型最后一公里:AI如何打通企业技术需求对接瓶颈.docx
科易网基于40亿+科创知识图谱数据库,深度探索AI技术在技术转移、成果转化、技术经纪、知识产权、产业创新、科技招商等垂直领域的多样化应用场景,研究科技创新领域的AI+数智化解决方案,推动科技创新与产业创新智能化发展。


