首页 > 代码库 > 无缝滚动轮播图
无缝滚动轮播图
代码:
1 $(function() { 2 var index = 1; 3 var index1 = 0; 4 $(‘.right‘).click(function() {// 点击显示下一张 5 index++; 6 index1++; 7 if (index1 > 4) { 8 index1 = 0; 9 } 10 // console.log(-100*index+‘%‘); 11 $(‘#img‘).animate({ 12 left: -100 * index + ‘%‘ 13 }, 100, function() { 14 if (index === 6) { 15 index = 1; 16 $(this).css(‘left‘, ‘-100%‘); 17 } 18 }); 19 $(‘ol li‘).eq(index1).addClass(‘bg‘).siblings().removeClass(‘bg‘); 20 }); 21 22 $(‘.left‘).click(function() {//点击显示上一张; 23 index--; 24 index1--; 25 if (index1 < 0) { 26 index1 = 4; 27 } 28 console.log(-100 * index + ‘%‘); 29 $(‘#img‘).animate({ 30 left: -100 * index + ‘%‘ 31 }, 100, function() { 32 if (index === 0) { 33 index = 5; 34 $(this).css(‘left‘, ‘-500%‘); 35 } 36 }); 37 $(‘ol li‘).eq(index1).addClass(‘bg‘).siblings().removeClass(‘bg‘); 38 }); 39 $(‘ol li‘).click(function() {// 下面的按钮 40 $(this).addClass(‘bg‘).siblings().removeClass("bg"); 41 index1 = $(this).index(); 42 index = index1 + 1; 43 $(‘#img‘).animate({ 44 left: -100 * index + ‘%‘ 45 }, 100); 46 }); 47 setInterval(run, 5000); 48 49 function run() {//自动显示下一张 50 index++; 51 index1++; 52 if (index1 > 4) { 53 index1 = 0; 54 } 55 // console.log(-100*index+‘%‘); 56 $(‘#img‘).animate({ 57 left: -100 * index + ‘%‘ 58 }, 100, function() { 59 if (index === 6) { 60 index = 1; 61 $(this).css(‘left‘, ‘-100%‘); 62 } 63 }); 64 $(‘ol li‘).eq(index1).addClass(‘bg‘).siblings().removeClass(‘bg‘); 65 } 66 });
无缝滚动轮播图
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。