JQ实现简单的轮播图
- 2019 年 12 月 27 日
- 筆記
下面我们将使用Jquery实现简单的轮播图功能，以下为示例代码：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>图片轮播</title> <style> #img1{ width:380px; border:solid 5px orange; position: relative; } #img1 img{ display: block; } #img1 div{ border:solid 1px orange; background: #f3f3f3; padding: 1px 5px; position: absolute; bottom: 8px; font-weight: bold; } </style> </head> <body> <div id="img1"> <img src="img/1.jpg" alt="图片一" width="380" /> <div style="right: 60px;background: orange;">1</div> <div style="right: 35px;">2</div> <div style="right: 10px;">3</div> </div> <script src="jquery.min.js"></script> <script> var arr = ['img/1.jpg','img/2.jpg','img/3.jpg']; var k = 0; var t; //每秒对img中src进行赋值，从arr中取值 function changeSrc() { k++; if(k > 2){ k = 0; } var path = arr[k]; console.log(path); $("#img1 img").attr("src",path); //改变位置效果 $("#img1 div").css('background',''); $("#img1 div:eq("+ k +")").css('background','orange'); t = setTimeout(changeSrc,1000) } $(function(){ t = setTimeout(changeSrc,1000); $("#img1").mouseenter(function(){ console.log('清除了定时器'); clearTimeout(t); }); $("#img1").mouseleave(function(){ console.log('开始了定时器'); t = setTimeout(changeSrc,1000); }) }); </script> </body> </html>
