一共6张图片，每1.5m自动切换播放图片，鼠标在图片内则停止自动播放。可通过底部列表手动播放图片，也可通过图片两侧按钮手动点击切换图片。效果图如下。
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>轮播图</title> ???<script src="https://libs.baidu.com/jquery/2.1.4/jquery.js"></script> ???<style> ???????.outer{ ???????????width: 790px; ???????????height: 340px; ???????????margin: 80px auto; ???????????position: relative; ???????} ???????.img li{ ???????????position: absolute; ???????????list-style: none; ???????????top: 0; ???????????left: 0; ???????} ???????.num{ ??????????????position: absolute; ??????????????bottom: 10px; ??????????????left: 270px; ??????????????list-style: none; ???????} ???????.num li{ ???????????display: inline-block; ???????????width: 18px; ???????????height: 18px; ???????????background-color: white; ???????????border-radius: 50%; ???????????text-align: center; ???????????line-height: 20px; ???????????margin-left: 10px; ??????????} ???????.btn{ ???????????position: absolute; ???????????width: 30px; ???????????height: 60px; ???????????background-color: lightgrey; ???????????color: white; ???????????text-align: center; ???????????line-height: 60px; ???????????font-size: 30px; ???????????top: 140px; ???????????opacity: 0.6; ???????} ???????.left{left: 0;} ???????.right{right: 0} ???????.outer:hover .btn{display: block;} ???????.num .active{background-color: cadetblue} ???</style></head><body><div class="outer"> ???<ul class="img"> ???????<li><a href=""><img src="img/1.jpg" alt=""></a></li> ???????<li><a href=""><img src="img/2.jpg" alt=""></a></li> ???????<li><a href=""><img src="img/3.jpg" alt=""></a></li> ???????<li><a href=""><img src="img/4.jpg" alt=""></a></li> ???????<li><a href=""><img src="img/5.jpg" alt=""></a></li> ???????<li><a href=""><img src="img/6.jpg" alt=""></a></li> ???</ul> ???<ul class="num"> ???</ul> ???<div class="left btn"> < </div> ???<div class="right btn"> > </div></div> <script> ???????var i=0; ???????//自动创建轮播图底部轮播标签 ???????for (var j=0;j<$(‘.img li‘).length;j++){ ???????????$(‘.num‘).append(‘<li></li>‘) ???????} ???????//给第一张图添加active ???????$(‘.num li‘).eq(0).addClass(‘active‘) ???????//底部轮播标签手动轮播 ???????$(‘.num li‘).mouseover(function () { ???????????i=$(this).index();//鼠标悬浮标签的索引值 ???????????$(this).addClass(‘active‘).siblings().removeClass(‘active‘);; ???????????$(‘.img li‘).eq(i).fadeIn(500).siblings().fadeOut(500); ???????}) ???????//底部轮播标签自动轮播 ???????var c=setInterval(toRight,1500); ???????var i=0; ???????function toRight() { ??????????i++; ??????????if (i==$(‘.img li‘).length) ??????????????i=0; ??????????$(‘.num li‘).eq(i).addClass(‘active‘).siblings().removeClass(‘active‘) ; ??????????$(‘.img li‘).eq(i).stop().fadeIn(500).siblings().stop().fadeOut(500); ???????} ???????function toLeft(){ ???????????i--; ???????????if (i==-1) ???????????????i=$(‘.img li‘).length-1; ???????????$(‘.num li‘).eq(i).addClass(‘active‘).siblings().removeClass(‘active‘) ; ???????????$(‘.img li‘).eq(i).stop().fadeIn(500).siblings().stop().fadeOut(500); ???????} ???????//鼠标悬浮在当前图片时停止自动轮播，鼠标移除时从移出前的位置开始轮播 ???????$(‘.outer‘).hover(function () { ???????????clearInterval(c); ???????},function () { ???????????c=setInterval(toRight,1500); ???????}) ???????$(‘.right‘).click(toRight) ???????$(‘.left‘).click(toLeft) ???</script>使用jQuery实现轮播图
原文地址：https://www.cnblogs.com/Forever77/p/10385661.html