继续优化
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>轮播图</title> <!-- <link rel="stylesheet" type="text/css" href="css/style.css"> --> <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> <!-- <script type="text/javascript" src="js/lunbo.js"></script> --> <style type="text/css"> *{ margin: 0; padding: 0; } body { font-size: 14px; line-height: 1.5; font-family: 'Microsoft Yahei', 'arial', 'tahoma', 'simsun'; color: #666; background-color: #fff } img { border: 0; } a { text-decoration: none; color: #666; } .public_scroll { position: relative; min-width: 1100px; max-width: 100%; height: 793px; overflow: hidden; } .public_s_list{ overflow: hidden;} .public_s_list a { position: absolute; display: block; width: 100%; } .public_s_list a img { width: 100%; display: block; } .public_s_dot{ overflow: hidden; text-align: center; position: absolute; bottom:25px; z-index: 2; width: 100%; } .public_s_dot i{ width: 10px; height: 10px; background-color: #fff; margin:0 8px; display: inline-block; cursor: pointer; border-radius: 50%;} .public_s_dot .active{ background-color: #808080 } </style> </head> <body> <div class="public_scroll" id="publicScroll"> <div class="public_s_list"> <a href="javascript:;" class="J_pic"><img src="http://www.emoi.com/media/pc-cn/201810/1540853894181026841.jpg" alt="1"></a> <a href="javascript:;" class="J_pic"><img src="http://www.emoi.com/media/pc-cn/201805/1525203825936416255.jpg" alt="2"></a> <a href="javascript:;" class="J_pic"><img src="http://www.emoi.com/media/pc-cn/201712/1513641621162167882.jpg" alt="3"></a> </div> <div class="public_s_dot" id="publicDot"></div> </div> <script type="text/javascript"> $(function() { var index = 0; var timer; //获取id为publicScroll 所有的img var imgList = $('#publicScroll .J_pic'); //img的个数 var imgNum = imgList.length; if(imgNum>1){ //第一张图显示 $('.J_pic').eq(0).show().siblings().hide(); $('.J_pic').mouseover(function(){ clearInterval(timer); //鼠标经过停止自动播放 }); $('.J_pic').mouseout(function(){ showTime(); //鼠标离开继续自动播放 }); // 填充分页 var bPage=$('#publicDot'); var html=''; for(var i=0,max=imgNum;i<max;i++){ html+=(i==0)?'<i class="active"></i>':'<i></i>'; } bPage.append(html); // //鼠标点击分页 bPage.children('i').on('click',function(){ index=$(this).index(); showBg(); }) function showBg() { $('.J_pic').eq(index).fadeIn(300).siblings().fadeOut(300); bPage.children('i').eq(index).addClass('active').siblings().removeClass('active'); } function showTime() { timer = setInterval(function() { index++; if (index == imgNum) { index = 0; } showBg(); }, 4000); } //自动播放图片 showTime(); } }); </script> </body> </html>