先上个效果截图：
主要包含以下功能点：
* 1、页面加载完，自动循环翻页
* 2、翻页按钮，翻页
* 3、定点翻页
* 4、翻页时同步圆点状态
* 5、鼠标进入，停止自动翻页
* 6、快速点击翻页的bug(加 isPaging 标志)
主要包含以下功能点：
* 1、页面加载完，自动循环翻页
* 2、翻页按钮，翻页
* 3、定点翻页
* 4、翻页时同步圆点状态
* 5、鼠标进入，停止自动翻页
* 6、快速点击翻页的bug(加 isPaging 标志)
上代码：
<!DOCTYPE html><html> ???<head> ???????<meta charset="utf-8"> ???????<title>轮播图 - jQuery 版本</title> ???????<style> ???????????*{ ???????????????margin: 0; ???????????????padding: 0; ???????????} ???????????ul{ ???????????????list-style: none; ???????????} ???????????????????????/** ????????????* 轮播图布局样式 ????????????*/ ???????????????????????/** ????????????* 0、轮播图容器 ????????????*/ ???????????#container{ ???????????????position: relative; ???????????????width: 600px; ???????????????height: 400px; ???????????????margin: 50px auto; ???????????????overflow: hidden; ???????????} ???????????????????????/** ????????????* 1、图片(模拟) ????????????*/ ???????????ul#imgs{ ???????????????position: absolute; ???????????????width: calc(600px * 7); ???????????????left: -600px; ???????????} ???????????ul#imgs li{ ???????????????float: left; ???????????????width: 600px; ???????????????height: 400px; ???????????????????????????????background-color: #42B983; ???????????????color: white; ???????????????text-align: center; ???????????????line-height: 400px; ???????????????font-size: 100px; ???????????} ???????????#imgs li:nth-child(odd){ ???????????????/* 模拟图片 */ ???????????????/*background-color: #9ACD32;*/ ???????????} ???????????????????????/** ????????????* 2、前后翻页按钮 ????????????*/ ???????????#prev,#next{ ???????????????position: absolute; ???????????????top: calc(50% - 15px);; ???????????????width: 40px; ???????????????height: 30px; ???????????????background-color: yellow; ???????????????border: none; ???????????????font-weight: bold; ???????????????font-size: 16px; ???????????????cursor: pointer; ???????????????opacity: .6; ???????????????-webkit-user-select: none; ???????????????-moz-user-select: none; ???????????????-ms-user-select: none; ???????????????user-select: none; ???????????} ???????????#prev,#next:focus{ ???????????????outline: none; ???????????} ???????????#prev{ ???????????????left: 10px; ???????????} ???????????#next{ ???????????????right: 10px; ???????????} ???????????????????????/** ????????????* 3、小圆点定点翻页 ????????????*/ ???????????ul#index{ ???????????????position: absolute; ???????????????top: 360px; ???????????????left: calc(50% - 55px); ???????????????height: 12px; ???????????} ???????????ul#index li{ ???????????????float: left; ???????????????height: 12px; ???????????????width: 12px; ???????????????margin: 0 5px; ???????????????border-radius:50%; ???????????????background-color: #800080; ???????????????opacity: .4; ???????????????cursor: pointer; ???????????} ???????????ul#index li.active{ ???????????????opacity: 1; ???????????} ???????</style> ???????<script src="jquery-1.12.4.js" type="text/javascript" charset="utf-8"></script> ???</head> ???<body> ???????<!-- ???????????1、进行页面布局 ???????????2、js 代码 ???????--> ???????<div id="container"> ???????????<!--图片区--> ???????????<ul id="imgs"> ???????????????<li> ???????????????????<div class="img">5</div> ???????????????</li> ???????????????<li> ???????????????????<div class="img">1</div> ???????????????</li> ???????????????<li> ???????????????????<div class="img">2</div> ???????????????</li> ???????????????<li> ???????????????????<div class="img">3</div> ???????????????</li> ???????????????<li> ???????????????????<div class="img">4</div> ???????????????</li> ???????????????<li> ???????????????????<div class="img">5</div> ???????????????</li> ???????????????<li> ???????????????????<div class="img">1</div> ???????????????</li> ???????????</ul> ???????????<button id="prev"><</button> ???????????<button id="next">></button> ???????????<ul id="index"> ???????????????<li class="active"></li> ???????????????<li></li> ???????????????<li></li> ???????????????<li></li> ???????????????<li></li> ???????????</ul> ???????</div> ???????<script type="text/javascript"> ???????????/** ????????????* 事件绑定 ????????????* 1、页面加载完，自动循环翻页 ????????????* 2、翻页按钮，翻页 ????????????* 3、定点翻页 ????????????* 4、翻页时同步圆点状态 ????????????* 5、鼠标进入，停止自动翻页 ????????????* 6、快速点击翻页的bug(加 isPaging 标志) ????????????*/ ???????????????????????/** ????????????* 0、自动轮播 ????????????*/ ???????????????????????/** ????????????* 一些可以设置的参数 ????????????*/ ???????????var PAGE_WIDTH = 600, ???????????????PAGE_SLIDE_TIME = 600, ???//单页滑动时间 ???????????????PAGE_INTERVAL = 1200 + PAGE_SLIDE_TIME, ???//换页间隔时间 ???????????????curIndex = 1, ???//合法取值 1 ~ 5(0 表示左边假的，6表示右边假的) ???????????????isPaging = false ???//是否正在翻页(用来处理连续点击翻页产生的bug) ???????????????????????????var intervalId; ???????????$(function(){ ???????????????intervalId = setInterval(next,PAGE_INTERVAL) ???????????}) ???????????????????????/** ????????????* 1、页面按钮 ????????????*/ ???????????$("#next").click(function(){ ???????????????next() ???????????}) ???????????????????????$("#prev").click(function(){ ???????????????next(false) ???????????}) ???????????????????????$("#index li").click(function(){ ???????????????next($(this).index() + 1) ???????????}) ???????????????????????/** ????????????* 2、鼠标出入 ????????????*/ ???????????$("#container").hover(function(){ ???????????????clearInterval(intervalId) ???????????},function(){ ???????????????intervalId = setInterval(next,PAGE_INTERVAL) ???????????????????????}) ???????????????????????/** ????????????* 翻页核心功能 ????????????* next(boolean|number]) ????????????* ?????????????* ????????boolean: ???表示前后翻页 ????????????* ????????number: ???????表示定点翻页 ????????????*/ ???????????function next(flag=true){ ???????????????????????????????if(isPaging){ ???????????????????return ???????????????} ???????????????isPaging = true; ???????????????????????????????var tempIndex = curIndex; ???????????????????????????????//1 确定要翻过去的页码,计算 left 值 ???????????????typeof flag === "boolean" && (curIndex += flag ? 1 : -1) ???????????????typeof flag === "number" && (curIndex = flag) ???????????????left = - curIndex * PAGE_WIDTH ???????????????????????????????//2 执行翻页动画 ???????????????$("#imgs").animate({"left":left},PAGE_SLIDE_TIME,function(){ ???????????????????if(curIndex == 0 || curIndex == 6){ ???????????????????????//页码校正 ???????????????????????curIndex = (curIndex + 5) % 5 ???????????????????????left = - curIndex * PAGE_WIDTH ???????????????????????$("#imgs").css("left",left) ???????????????????} ???????????????????//清除正在翻页标志 ???????????????????isPaging = false ???????????????}) ???????????????????????????????//3 同步点的状态 ???????????????$("#index li").eq(tempIndex -1).removeClass("active") ???????????????$("#index li").eq(curIndex -1).addClass("active") ???????????} ???????</script> ???</body></html>用 jQuery 手写轮播图
原文地址：https://www.cnblogs.com/wuzz/p/10295786.html