jQuery手写幻灯片,点击下面的banner只能切换到下一张。下面是代码求解答

baidu_19267813 baidu_19267813 墨衍会员 · AI 创作全网分发 墨衍智能分发 通过墨衍一键同步至各平台 可同步平台 CSDN微信公众号微博知乎掘金百家号博客园抖音小红书 你的文章也可以这样分发 墨衍会员 ¥399起/年,写一次发全网 我也要 + 加入社区
<script type="text/javascript">
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 制作的带旋

weixin_38625448

全球检查台纸市场稳健增长:高频诊疗需求、产品升级与医疗供应链新机会.docx

全球检查台纸市场稳健增长:高频诊疗需求、产品升级与医疗供应链新机会

行业报告QY

超音速扩散器空气动力学优化的MATLAB代码.zip

1.版本:matlab2014a/2019b/2024b 2.附赠案例数据可直接运行。 3.代码特点:参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象:计算机,电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。

海神之光

数字化转型最后一公里:AI如何打通企业技术需求对接瓶颈.docx

科易网基于40亿+科创知识图谱数据库,深度探索AI技术在技术转移、成果转化、技术经纪、知识产权、产业创新、科技招商等垂直领域的多样化应用场景,研究科技创新领域的AI+数智化解决方案,推动科技创新与产业创新智能化发展。

BIZKEEN
评论 1
收藏 已收藏
分享
返回顶部
baidu_19267813
JavaScript 87,983 成员 224,681 内容