代码:
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 });