HTML+CSS代码：
<!doctype html><html><head><meta charset="utf-8"><title>图片轮播</title><style> ???*{ margin:0; padding:0;} ???ul{ list-style:none;} ???.clear{ clear:both;} ???#box{ ???????width:500px; ???????height:320px; ???????margin:100px auto; ???????border:#999 5px solid; ???????position:relative; ???????????overflow:hidden; ???} ???????.m_unit{ ???????width:10000px; ???????height:320px; ???????position:absolute; ???????left:0px; ???????top:0px; ???} ???.m_unit ul{overflow:hidden; list-style:none;} ???.m_unit ul li{float:left;} ???????.btn{} ???.btn .btn_icon{ width:60px; height:60px; overflow:inherit; background:url(images/btn.png) no-repeat;} ???.btn #b_left{ position:absolute;top:50%;left:0;} ???.btn #b_right{ position:absolute;top:50%;right:0; background-position:-60px 0;} ???????.dot{position:absolute; bottom:5px; right:10px;} ???.dot ul li{ width:20px; height:20px; float:left; margin-right:2px; background:#000; opacity:0.3;} ???.dot ul .initial{ background:#F00;opacity:0.8;}</style></head><body> ???<div id="box"> ???????<div class="m_unit"> ???????????<ul> ???????????????<li><a href="#"><img src="images/a1.png"/></a></li> ???????????????<li><a href="#"><img src="images/a2.png"/></a></li> ???????????????<li><a href="#"><img src="images/a3.png"/></a></li> ???????????????<li><a href="#"><img src="images/a4.png"/></a></li> ???????????</ul> ???????????<div class="clear"></div> ???????</div> ???????????????<div class="btn"> ???????????<div id="b_left" class="btn_icon"></div> ???????????<div id="b_right" class="btn_icon"></div> ???????</div> ???????????????<div class="dot"> ???????????<ul> ???????????????<li class="initial"></li> ???????????????<li></li> ???????????????<li></li> ???????????????<li></li> ???????????</ul> ???????</div> ???</div></body></html>JAVAScript+JQuery代码：
???<!--导入JQuery--> ???<script src="js/jquery-1.12.4.min.js"></script> ???<script> ???????//获取图片长度 ???????var imgLength = $(‘.m_unit ul li‘).length; ???????????????//拼接假0 ???????$(‘.m_unit ul‘).append($(‘.m_unit ul li‘).eq(0).clone()); ???????????????//信号量 ???????var idx =0; ???????????????//自动轮播 ???????var timer = setInterval(rightBtn,2000); ???????????????//鼠标进入box ???????$(‘#box‘).mouseenter(function(){ ???????????clearInterval(timer); ???????}); ???????????????//鼠标离开box ???????$(‘#box‘).mouseleave(function(){ ???????????timer = setInterval(rightBtn,2000); ???????}); ???????????????//右按钮的点击事件 ???????$(‘#b_right‘).click(rightBtn); ???????function rightBtn(){ ???????????idx++; ???????????$(‘.m_unit‘).animate({‘left‘:-500 * idx},1000,function(){ ???????????????if(idx > imgLength-1){ ???????????????????idx = 0; ???????????????????$(this).css(‘left‘,‘0px‘); ???????????????} ???????????}); ???????????dotChange(); ???????} ???????????????//左按钮的点击事件 ???????$(‘#b_left‘).click(function(){ ???????????idx--; ???????????if(idx < 0){ ???????????????idx =imgLength-1; ???????????????$(‘.m_unit‘).css(‘left‘,-500 * imgLength); ???????????} ???????????$(‘.m_unit‘).animate({‘left‘:-500 * idx},1000); ???????????dotChange(); ???????}); ???????????????//设置小圆点击事件 ???????$(‘.dot ul li‘).each(function(i) { ???????????$(this).click(function(){ ???????????????idx =i; ???????????????$(‘.m_unit‘).animate({‘left‘:-500 * idx},1000); ???????????????dotChange(); ???????????}); ???????}); ???????????????//设置小红点跟随轮播 ???????function dotChange(){ ???????????var idxx=idx; ???????????if(idxx > imgLength-1) idxx=0; ???????????$(‘.dot ul li‘).eq(idxx).css({‘background‘:‘#F00‘,‘opacity‘:0.8}).siblings().css({‘background‘:‘#000‘,‘opacity‘:0.3}); ???????} ???</script>JQuery图片轮播实例
原文地址：https://www.cnblogs.com/royal6/p/10265882.html