本文共 2709 字，大约阅读时间需要 9 分钟。

代码来源于网络，具体来自哪里忘记了

			
   								
   
			
    
				
     
					
      
					
      
 
					
      
					
      
				
     
				
     
					 < 					 > 				
				
     
					
      
1
					
      
2
					
      
3
					
      
4
				
     
			
    
		
   
			    	

CSS

body {   	background-color: #dddddd;}* {   	margin: 0px;	padding: 0px;	list-style: none;}/* 左右箭头，不需要修改 */a {   	cursor: pointer;}/* 轮播图最外层大小 */.main {   	position: relative;	width: 500px;	height: 350px;	margin: 40px auto;}/* 轮播图展示区域大小 */.myslide {   	float: left;	position: absolute;	overflow: hidden;	width: 500px;	height: 350px;}/* 轮播图所有图片的总宽度 */.myslidetwo {   	position: absolute;	overflow: hidden;	width: 2000px;}/* 轮播图中每张图片的大小 */.myslidetwo img {   	float: left;	width: 500px;	height: 350px;}/* 存放焦点的容器 */.label {   	position: absolute;	bottom: 15px;	left: 210px;	width: 200px;}/* 每一个焦点 */.label li {   	float: left;	width: 20px;	height: 20px;	line-height: 20px;	text-align: center;	margin-right: 5px;	border: 1px solid #ddd;	font-size: 14px;	background: #fff;	cursor: pointer;}/* 当前显示焦点的背景颜色 */.label li.current {   	background: #0f0;}/* 以下是左右箭头的设置 */.arrows {   	position: absolute;	left: 0px;	top: 120px;	color: #666;	font-size: 40px;	font-weight: bold;}.arrows a {   	background: rgba(0, 0, 0, 0.2);	display: inline-block;	width: 30px;	height: 70px;	text-align: center;	line-height: 70px;}.arrows a:hover {   	color: #fff;}.arrows .pre {   	margin-right: 420px;}

JavaScript

$(document).ready(function() {   		var _now = 0;		var oul = $(".myslidetwo"); //图片		var numl = $(".label li");		var wid = $(".myslide").eq(0).width(); //盒子的宽度		//数字图标实现		numl.click(function() {   			var index = $(this).index();			$(this).addClass("current").siblings().removeClass();			oul.animate({   				'left': -wid * index			}, 500);		})		//左右箭头轮播		$(".pre").click(function() {   			if (_now >= 1) _now--;			else _now = 3;			ani();		});		$(".next").click(function() {   			if (_now == numl.size() - 1) {   				_now = 0;			} else _now++;			ani();		});		//动画函数		function ani() {   			numl.eq(_now).addClass("current").siblings().removeClass();			oul.animate({   				'left': -wid * _now			}, 500);		}		//以下代码如果不需要自动轮播可删除		//自动动画		var _interval = setInterval(showTime, 2000);		function showTime() {   			if (_now == numl.size() - 1) {   				_now = 0;			} else _now++;			ani();		}		//鼠标停留在画面时停止自动动画，离开恢复		$(".myslide").mouseover(function() {   			clearTimeout(_interval);		});		$(".myslide").mouseout(function() {   			_interval = setInterval(showTime, 3000);		});	});