<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <style> .out{ width: 590px; height: 470px; margin: 80px auto; position: relative; } .img li{ list-style: none; position: absolute; top: 0; left: 0; } .num{ position: absolute; bottom: 20px; left: 190px; list-style: none; } .num li { display: inline-block; width: 12px; height: 12px; background-color: white; border-radius: 50%; text-align: center; line-height: 18px; margin-left: 6px; } .btn { position: absolute; color: white; top:50%; width: 30px; height: 60px; background-color: lightgray; font-size: 30px; text-align: center; line-height: 60px; opacity: 0.7; margin-top: -30px; display: none; } .left { left: 0; } .right { right: 0; } .out:hover .btn{ display: block; } /*.active {*/ /* background-color: red;*/ /*}*/ .num .active { background-color: red; } </style> <body> <div class="out"> <ul class="img"> <li><a href="#"><img src="../images/1.jpg"></a></li> <li><a href="#"><img src="../images/2.jpg"></a></li> <li><a href="#"><img src="../images/3.jpg"></a></li> <li><a href="#"><img src="../images/4.jpg"></a></li> <li><a href="#"><img src="../images/5.jpg"></a></li> <li><a href="#"><img src="../images/6.jpg"></a></li> </ul> <ul class="num"> <!-- <li class="active"></li>--> <!-- <li></li>--> <!-- <li></li>--> <!-- <li></li>--> <!-- <li></li>--> <!-- <li></li>--> </ul> <div class="left btn"> < </div> <div class="right btn"> > </div> </div> <script src="jquery-3.0.0.js"></script> <script> // 通过jquery自动添加按钮 var i=0 var img_num =$(".img li").length; console.log(img_num) for (var j=0;j<img_num;j++){ $(".num").append("<li></li>") } $(".num li").eq(0).addClass("active") //手动轮播 $(".num li").mousemove(function () { i = $(this).index() $(this).addClass("active").siblings().removeClass("active") $(".img li").eq(i).stop().fadeIn(700).siblings().stop().fadeOut(700) }) //自动轮播 var c= setInterval(Go_rignt,1000)//定时器 function Go_rignt() { if (i==img_num-1){ i=-1; } i++; $(".num li").eq(i).addClass("active").siblings().removeClass("active"); $(".img li").eq(i).stop().fadeIn(700).siblings().stop().fadeOut(700); } function Go_left() { if (i==0){ i=img_num; } i--; $(".num li").eq(i).addClass("active").siblings().removeClass("active"); $(".img li").eq(i).stop().fadeIn(700).siblings().stop().fadeOut(700); } //悬浮停止 $(".out").hover(function () { clearInterval(c) },function () { c=setInterval(Go_rignt,1000) }) //给左右的btn加功能 $(".right").click(Go_rignt) $(".left").click(Go_left) </script> </body> </html>
html 前端的轮播图
原文：https://www.cnblogs.com/luncky/p/11896374.html