1.普通轮播图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> /* 轮播图区域 */ .box{ width: 560px; height: 300px; margin: 50px auto; overflow: hidden; position: relative; } /* 图片滚动区域 */ .content{ font-size: 0; width: 3000px; height: 300px; display: inline-block; position: absolute; } /* 下方序列按钮 */ .btns{ position: absolute; bottom: 30px; /* background-color: yellow; */ width: 560px; text-align: center; } .btns span{ padding: 6px; border-radius: 50%; background-color: white; font-size: 0px; margin: 0 8px; } .btns .choose{ background-color: red; } .pre, .next{ position: absolute; top: 50%; color: white; font-size: 30px; right: 0px; height: 50px; width: 30px; text-align: center; line-height: 50px; background-color: rgba(0,0,0,0.6); } .pre{ left: 0; } </style> </head> <body> <div class="box"> <div class="content"> <img src="img/0.jpg" alt=""> <img src="img/1.jpg" alt=""> <img src="img/2.jpg" alt=""> <img src="img/3.jpg" alt=""> <img src="img/4.jpg" alt=""> </div> <div class="btns"> <span class="choose"></span> <span></span> <span></span> <span></span> <span></span> </div> <div class="pre"><</div> <div class="next">></div> </div> <script src="../js/jquery-3.6.0.min.js"></script> <script> var $img = $('.content'); var $btns = $('.btns span'); var $pre = $('.pre'); var $next = $('.next'); var index =0; var timebar; // 轮播函数 function startInterval(){ // 轮播定时器 timebar = setInterval(function(){ if(index >=4){ index = 0; }else{ index++; } // 调用切换动画 change(); },2000); } // 切换动画函数 function change(fn){ $img.stop(true).animate({left: -560*index},800); $btns.eq(index).addClass('choose'); $btns.eq(index).siblings().removeClass('choose'); fn && fn(); } // 加载完毕启动动画 startInterval(); // 绑定点击向左轮播 $pre.click(function(){ // 清除timebar定时器 clearInterval(timebar); // 边界判断 if(index <= 0){ index = 4; }else{ index--; } // 完成后，加入定时器 change(startInterval); }) // 绑定点击向右轮播 $next.click(function(){ // 清除timebar定时器 clearInterval(timebar); // 边界判断 if(index >= 4){ index = 0; }else{ index++; } // 完成后，加入定时器 change(startInterval); }) // 绑定点击下标按钮轮播 $btns.click(function(){ // 清除timebar定时器 clearInterval(timebar); index = $(this).index(); change(startInterval); }) </script> </body> </html>
2.猫腻轮播图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> /* 轮播图区域 */ .box{ width: 560px; height: 300px; margin: 50px auto; overflow: hidden; position: relative; } /* 图片滚动区域 */ .content{ font-size: 0; width: 5000px; height: 300px; display: inline-block; position: absolute; } /* 下方序列按钮 */ .btns{ position: absolute; bottom: 30px; /* background-color: yellow; */ width: 560px; text-align: center; } .btns span{ padding: 6px; border-radius: 50%; background-color: white; font-size: 0px; margin: 0 8px; } .btns .choose{ background-color: red; } .pre, .next{ position: absolute; top: 50%; color: white; font-size: 30px; right: 0px; height: 50px; width: 30px; text-align: center; line-height: 50px; background-color: rgba(0,0,0,0.6); } .pre{ left: 0; } </style> </head> <body> <div class="box"> <div class="content"> <img src="img/4.jpg" alt=""> <img src="img/0.jpg" alt=""> <img src="img/1.jpg" alt=""> <img src="img/2.jpg" alt=""> <img src="img/3.jpg" alt=""> <img src="img/4.jpg" alt=""> <img src="img/0.jpg" alt=""> </div> <div class="btns"> <span class="choose"></span> <span></span> <span></span> <span></span> <span></span> </div> <div class="pre"><</div> <div class="next">></div> </div> <script src="../js/jquery-3.6.0.min.js"></script> <script> var $img = $('.content'); var $btns = $('.btns span'); var $pre = $('.pre'); var $next = $('.next'); var index = 1; var timebar; // 轮播函数 function startInterval(){ // 轮播定时器 timebar = setInterval(function(){ index ++; if(index >= 7){ index = 0; } // 调用切换动画 change(); },2000); } // 切换动画函数 function change(fn){ $img.stop(true).animate({left: -560*index},500,function(){ if(index === 6){ index = 1; $img.css('left',-560*index); }else if(index ===0){ index = 5; $img.css('left',-560*index) } $btns.eq(index-1).addClass('choose'); $btns.eq(index-1).siblings().removeClass('choose'); fn && fn(); }); } // 默认第一张显示index = 1 $img.css('left',-560*index); // 加载完毕启动动画 startInterval(); // 绑定点击向左轮播 $pre.click(function(){ // 清除timebar定时器 clearInterval(timebar); // 边界判断 index--; if(index < 0){ index = 4; } // 完成后，加入定时器 change(startInterval); }) // 绑定点击向右轮播 $next.click(function(){ // 清除timebar定时器 clearInterval(timebar); // 边界判断 index++; if (index >= 7) { index = 0; } // 完成后，加入定时器 change(startInterval); }) // 绑定点击下标按钮轮播 $btns.click(function(){ // 清除timebar定时器 clearInterval(timebar); index = $(this).index()+1; change(startInterval); }) </script> </body> </html>
3.最后一张设置猫腻图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> /* 轮播图区域 */ .box{ width: 560px; height: 300px; margin: 50px auto; overflow: hidden; position: relative; } /* 图片滚动区域 */ .content{ font-size: 0; width: 5000px; height: 300px; display: inline-block; position: absolute; } /* 下方序列按钮 */ .btns{ position: absolute; bottom: 30px; /* background-color: yellow; */ width: 560px; text-align: center; } .btns span{ padding: 6px; border-radius: 50%; background-color: white; font-size: 0px; margin: 0 8px; } .btns .choose{ background-color: red; } .pre, .next{ position: absolute; top: 50%; color: white; font-size: 30px; right: 0px; height: 50px; width: 30px; text-align: center; line-height: 50px; background-color: rgba(0,0,0,0.6); } .pre{ left: 0; } </style> </head> <body> <div class="box"> <div class="content"> <img src="img/0.jpg" alt=""> <img src="img/1.jpg" alt=""> <img src="img/2.jpg" alt=""> <img src="img/3.jpg" alt=""> <img src="img/4.jpg" alt=""> <img src="img/0.jpg" alt=""> </div> <div class="btns"> <span class="choose"></span> <span></span> <span></span> <span></span> <span></span> </div> <div class="pre"><</div> <div class="next">></div> </div> <script src="../js/jquery-3.6.0.min.js"></script> <script> var $img = $('.content'); var $btns = $('.btns span'); var $pre = $('.pre'); var $next = $('.next'); var index = 0; var timebar; // 轮播函数 function startInterval(){ // 轮播定时器 timebar = setInterval(function(){ index ++; if(index >= 6){ index = 0; } // 调用切换动画 change(); },2000); } // 切换动画函数 function change(fn){ $img.stop(true).animate({left: -560*index},500,function(){ if(index === 5){ index = 0; $img.css('left',-560*index); } $btns.eq(index).addClass('choose'); $btns.eq(index).siblings().removeClass('choose'); fn && fn(); }); } // 默认第一张显示index = 1 $img.css('left',-560*index); // 加载完毕启动动画 startInterval(); // 绑定点击向左轮播 $pre.click(function(){ // 清除timebar定时器 clearInterval(timebar); // 边界判断 index--; if(index < 0){ index = 4; // $img.css('left',-560*5) } // 完成后，加入定时器 change(startInterval); }) // 绑定点击向右轮播 $next.click(function(){ // 清除timebar定时器 clearInterval(timebar); // 边界判断 index++; if (index >= 6) { index = 0; } // 完成后，加入定时器 change(startInterval); }) // 绑定点击下标按钮轮播 $btns.click(function(){ // 清除timebar定时器 clearInterval(timebar); index = $(this).index(); change(startInterval); }) </script> </body> </html>
