1、使用js实现轮播图
简单的方法：修改图片名称为feng1.jpg、feng2.jpg这样的 在js中只用改变名称为1、2、3就能切换图片。
实现功能：1自动轮播、2手动轮播，左右切换、3鼠标指针悬停在图片上时停止轮播，鼠标指针移开继续轮播
实现方法：1.切换图片的函数+定时器实现自动轮播、2点击切换图片的函数、3悬停clear定时器，鼠标指针离开 创建定时器
代码：
<!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>轮播图1</title> <style> .lunbo { width: 900px; height: 400px; margin: 100px auto; } .lunbo img { width: 100%; height: 100%; } .tleft{ position: absolute; top: 230px; left: 330px; font-size: 80px; color: aliceblue; cursor: pointer;/*显示小手指样式*/ } .tright{ position: absolute; top: 230px; right: 330px; font-size: 80px; color: aliceblue; cursor: pointer;/*显示小手指样式*/ } </style> </head> <body> <a class="tleft" onclick="toleft()"><</a> <div class="lunbo"> <img id="lunbo_img" src="img/feng1.jpg" onmouseover="stopimg()" onmouseout="startimg()"> </div> <span class="tright" onclick="toright()">></span> <script> var index = 1; var time=setInterval(lunbo,2000);//定时器 function lunbo() {//轮播显示 index++; if (index > 3) { index = 1; } var img = document.getElementById("lunbo_img"); img.src = "img/feng" + index + ".jpg"; } var toleft=function(){//上一页 clearInterval(time); if(index==1){ index=3 } else{ index--; } let img = document.getElementById("lunbo_img"); img.src="img/feng" + index + ".jpg"; time=setInterval(lunbo,2000); } var toright=function(){//下一页 clearInterval(time); if(index==3){ index=1 } else{ index++; } let img = document.getElementById("lunbo_img"); img.src="img/feng" + index + ".jpg"; time=setInterval(lunbo,2000); } var stopimg=function(){//鼠标悬停，图片暂停 clearInterval(time); } var startimg=function(){//鼠标离开 time=setInterval(lunbo,2000); } //setInterval(lunbo, 200); //切记定时器里调用lunbo方法不能加(),setInterval(lunbo,2000);如果加()会执行lunbo（）方法，而导致定时器没用。 </script> </body> </html>
